브라우저가 웹 페이지를 불러올 때는 웹킷(Webkit), 게코(Gecko) 등과 같은 렌더링 엔진을 사용한다. 렌더링 엔진은 HTML, CSS, JavaScript와 같은 웹 페이지를 이루는 요소들을 파싱하고, 이를 브라우저 화면에 표시하는 역할을 한다. 이 과정은 크게 DOM, CSSOM, 렌더트리 그리고 레이아웃을 포함하며 이러한 프로세스를 CRP(Critical Rendering Path)라고 한다.
✅ CRP(중요 렌더링 경로)는 브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 변화하는 일련의 단계를 말하며 이를 최적화하는 것은 렌더링 성능을 향상시킨다.
1. DOM 생성
브라우저는 HTML 문서를 파싱하여 DOM 트리를 생성한다.
✅ DOM(Document Object Model)은 일종의 문서로, 구조화된 표현을 제공하여 프로그래밍 언어가 DOM 구조에 접근할 수 있게 한다. 즉, 웹 페이지를 프로그래밍 언어에서 사용할 수 있게 연결시켜주는 역할을 한다.
JavaScript를 통해 DOM을 수정하는 행위를 생각해보면 되는데, 이 DOM이 없다면 JavaScript는 웹 페이지의 요소들이나 관련된 모델의 정보들을 얻지 못하게 된다.
2. CSSOM 생성
브라우저는 CSS 문서를 파싱하여 CSSOM(CSS Object Model) 트리를 생성한다.
✅ CSSOM(CSS Object Model)은 쉽게 말해 HTML 대신 CSS가 대상인 DOM으로, 자바스크립트가 CSS를 조작할 수 있게 해주는 역할을 한다.
- JavaScript 실행
🚨 렌더링 블로킹
HTML 문서에 <script>가 있는 경우 파싱을 중단하고 스크립트를 다운로드하여 실행하는 것을 의미한다. 스크립트를 실행하고 나면 HTML 파싱을 재개한다. 이는 자바스크립트는 DOM을 조작할 가능성이 있기 때문에 일관된 결과를 가져올 수 있게 하기 위함이다.
3. Render Tree 생성
DOM 트리와 CSSOM 트리를 합쳐 렌더 트리를 생성한다.
이 때, 화면에 보이지 않는 element들은 트리에서 제외되기도 한다.
display: none;: 화면에 보이지 않을 뿐더러 공간을 차지하지도 않기에 렌더 트리로 구축되지 않음visiblify: hidden;: 화면에 보이지 않을 뿐 공간을 차지하므로 렌더 트리에 포함됨
4. Layout (Reflow)
뷰포트(현재 보이는 화면의 전체) 기반으로 렌더 트리의 각 노드가 가지는 정확한 위치와 크기를 계산한다.
5. Paint
계산한 위치/크기를 기반으로 각 요소들을 실제 화면에 픽셀로 그려지도록 변환하는 (쉽게 말해 요소들에 스타일을 입혀 화면에 그리는)단계이다.
💡 생각해볼만한 문제
✅ CRP 최적화
렌더링 성능을 향상시키고자 한다면 CRP를 최적화하면 되는데, 어떤 방법을 쓸 수 있을까?
- 자원 다운로드를 지연시킴으로써 중요 자원들의 수를 최소화한다. => Lazy Loading
- 자원을 압축하고 합쳐서 파일 크기와 요청 횟수를 최소화한다. => Code Splitting
- 자원의 우선순위를 설정하여 중요한 자원을 먼저 불러와 화면이 빨리 렌더링되도록 한다. => Preloading / Prefetching / Critical CSS
✅ HTML 문서의 <head> 태그 안에 <script>가 있는 경우
브라우저는 스크립트를 실행한 후에야 나머지 HTML을 파싱하고 DOM을 완성시킬 수 있는데, 이는 렌더링 성능에 영향을 미칠 수 있다.
따라서 이 경우 성능 최적화를 위해 다음과 같은 방법을 사용할 수 있다.
1) <script>를 <body>의 마지막에 포함시킨다.<head>에 있든 <body>에 있든 브라우저는 <script> 태그를 만나면 해당 스크립트를 다운로드하고 실행할 때까지 HTML 파싱을 중단한다. 하지만 일반적으로 <script>의 위치가 초기 렌더링에 영향을 미칠 수 있으며, <script>를 <body>의 마지막에 위치시키면, HTML과 CSS 파싱이 먼저 완료되어 초기 렌더링 속도가 더 빨라질 수 있다.
2) async 속성 사용
<script> 태그에 async 속성을 추가하여 비동기적으로 스크립트를 로드할 수 있다. async 속성을 사용하면 HTML 파싱과 스크립트 로딩이 동시에 진행되고, 스크립트 로딩이 완료되면 HTML 파싱을 잠시 멈추고 스크립트를 실행한 후, HTML 파싱을 재개한다.
이 방식은 DOM이 아직 완성되지 않은 상태에서 진행되기 때문에 스크립트가 DOM을 수정할 리스크가 따른다. 따라서 주로 광고 로드 스크립트와 같이 다른 요소들과 상호작용할 필요가 없는 독립적인 스크립트에서 사용된다.
3) defer 속성 사용
<script> 태그에 defer 속성을 추가하여 스크립트 로딩을 지연시킬 수 있다. defer 속성을 사용하면 HTML 파싱과 스크립트 로딩이 동시에 진행되지만, HTML 파싱이 모두 끝난 후 스크립트가 실행된다. 따라서 DOM 생성이 완료된 이후에 스크립트가 실행되어, 초기 렌더링 성능에 영향을 미치지 않고 리스크 없이 안전하게 DOM을 조작할 수 있다.
참고:
[FrontEnd 지식] 브라우저 렌더링 원리와 순서(+성능 최적화 고려사항)
🙌 소개 웹 브라우저는 인터넷에서 다양한 정보를 제공하고, 사용자가 이를 시각적으로 확인할 수 있도록 하는 중요한 도구다. 하지만, 대용량의 웹 페이지를 불러올 때 브라우저의 성능이 느
opendeveloper.tistory.com
https://developer.mozilla.org/ko/docs/Web/Performance/Critical_rendering_path
중요 렌더링 경로 - 웹 성능 | MDN
중요 렌더링 경로 (Critical Rendering Path)는 브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 변화하는 일련의 단계를 말하며 이를 최적화하는 것은 렌더링 성능을 향상시킵니다. 중요 렌더링 경로는 Do
developer.mozilla.org
[FrontEnd 지식] 브라우저 렌더링 원리와 순서(+성능 최적화 고려사항)
🙌 소개 웹 브라우저는 인터넷에서 다양한 정보를 제공하고, 사용자가 이를 시각적으로 확인할 수 있도록 하는 중요한 도구다. 하지만, 대용량의 웹 페이지를 불러올 때 브라우저의 성능이 느
opendeveloper.tistory.com
Frontend-Interview-Questions/Notes/important-5/browser-rendering.md at main · Esoolgnah/Frontend-Interview-Questions
프론트엔드 중요도별 면접질문 + 용어 설명 ⭐️. Contribute to Esoolgnah/Frontend-Interview-Questions development by creating an account on GitHub.
github.com
8th-education/Week08/8주차_브라우저_렌더링.pdf at develop · IT-Cotato/8th-education
8기 교육팀 CS교육 발표 자료입니다. Contribute to IT-Cotato/8th-education development by creating an account on GitHub.
github.com
'CS' 카테고리의 다른 글
| CSR과 SSR (8) | 2024.11.06 |
|---|---|
| Reflow와 Repaint 알아보기 (0) | 2024.10.15 |
| Webpack과 Babel이란? (모듈 번들러, Webpack vs. Vite, Polyfill) (0) | 2024.05.20 |
| 아나콘다와 주피터 노트북 (0) | 2022.03.10 |
| 컴퓨터 시스템의 구성 (1) | 2022.03.08 |
