[Web] 브라우저 렌더링 과정 정리하기 (Browser rendering process)

 

브라우저의 주요 기능은 웹 페이지의 콘텐츠를 표시하는 것입니다. 이 작업은 브라우저의 렌더링 엔진을 통해 이루어집니다. 렌더링 엔진은 HTML, CSS, JavaScript, 이미지 등 웹 페이지에 포함된 모든 요소를 화면에 보여주는 역할을 합니다.

 

렌더링 과정을 자세히 살펴봅시다.

1. 렌더링 과정 설명

렌더링 과정은 Parsing -> Style -> Layout -> Paint -> Composite 순서로 진행됩니다.

 

1-1. Parsing

렌더링 엔진은 HTML 문서와 CSS 파일을 파싱하여 브라우저가 이해할 수 있는 계층적 구조인 DOM 트리와 CSSOM 트리를 생성합니다.

 

1-2. Style

렌더링 엔진은 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 만듭니다.

 

렌더 트리는 화면에 표시되는 노드로만 구성되며, CSS에 의해 비표시되는 노드들은 포함하지 않습니다. 여기서 노드란, 트리를 구성하는 객체 하나하나를 뜻합니다.

 

1-3. Layout

Layout 단계에서는 뷰포트 내에서 각 노드들의 정확한 위치와 크기를 계산합니다.

 

뷰포트란 브라우저 디스플레이상의 표시 영역을 의미합니다. 이 과정에서 CSS에서 사용된 "em"이나 "%", "vh/vw"와 같은 상대적인 단위는 절대적인 "px" 단위로 변환됩니다.

 

1-4. Paint

Layout 단계에서 계산된 값을 이용해, 각 노드를 화면상의 실제 픽셀로 변환하는 Paint 과정을 거칩니다. 이때 브라우저는 성능 개선을 위해서 화면에 그릴 영역을 레이어 별로 나누어 놓습니다.

 

1-5. Composite

Paint 단계에서 생성된 각각의 레이어들을 합성하여 실제 브라우저 화면 위에 표시합니다.

2. Reflow와 Repaint

2-1. Reflow

위 과정이 모두 끝난 후에 사용자의 동작으로 인해 새로운 HTML 요소가 추가되거나 CSS가 변경되면, 각 노드의 크기와 위치를 다시 계산하게 됩니다. 이 과정은 Reflow라고 불립니다.

 

Reflow는 레이아웃 수치를 재계산하고 요소를 재배치하기 때문에 Layout 과정이 다시 수행되며, 이에 따라 Paint와 Composite 단계도 다시 거치게 됩니다.

 

다음은 Reflow가 일어나는 대표적인 속성들입니다.

position, width, height, margin, padding, border, border-width, font-size, font-weight, line-height, text-align, overflow...

 

2-2. Repaint

한편, 수행된 결과를 다시 실제 화면에 그리는 과정은 Repaint라고 합니다.

 

배경 이미지나 텍스트 색상 등 레이아웃 수치에 영향을 주지 않는 스타일의 변경이 일어났을 때는 Repaint만 수행하게 됩니다.

 

다음은 Repaint만 일어나는 대표적인 속성들입니다.

background, color, text-decoration, border-style, border-radius...

 

 

레이아웃 계산과 페인팅을 다시 수행하는 리렌더링 작업은 비용이 많이 들고 성능에 부정적인 영향을 미치므로, 리렌더링이 빈번하게 발생하지 않도록 주의해야 합니다.

 

 

---

참고

• ☕️ 체프의 브라우저 렌더링
• 웹 브라우저가 하는 일 : 렌더링 6단계
• 브라우저 렌더링 과정 이해하기
• 브라우저의 렌더링 과정
• CSS Triggers