🌟[매일메일] 브라우저 렌더링 파이프라인이란? (FE.241224/241213)

브라우저 렌더링 파이프라인이란?

브라우저가 웹페이지를 화면에 표시하기 위해 거치는 과정

 

[1단계] DOM 생성

브라우저가 HTML 파일을 받으면, byte 단위로 읽기 시작함

브라우저의 HTML 파서(Parser)는 byte를 문자(character)로 변환하고, 이 문자를 다시 HTML 토큰으로 변환함

HTML 토큰은 각 HTML 태그와 그 안에 포함된 텍스트, 속성 등을 의미함

 

HTML 토큰이 생성되면, 브라우저는 이를 기반으로 DOM 트리를 생성함.

DOM 트리: HTML 문서 구조를 트리 형태로 표현한 것. 각 태그가 node가 되어 부모-자식 관계 형성함

 

[2단계] CSSOM 생성

브라우저는 CSS 파일을 파싱(parsing)함.

CSS 파일은 byte로 전송되므로, 브라우저는 이를 문자로 변환하고 CSS 규칙으로 나눔

CSS 규칙은 선택자(selector)와 선언(declaration)으로 구성됨.

선택자(selector)는 스타일을 적용할 HTML 요소를 정의하고, 선언(declaration)은 적용할 스타일을 정의함

 

브라우저는 이 CSS 규칙을 바탕으로 CSSOM 트리를 생성함. 각 노드는 해당 노드에 적용할 스타일 정보를 포함함

 

[3단계] 렌더 트리 생성

렌더 트리는 브라우저 DOM과 CSSOM의 결합이며, 화면에 실제로 표시될 요소로만 구성됨

display: none 같은 것은 제외됨

 

렌더 트리의 각 노드는 DOM 트리의 요소와 연결되며, CSSOM 트리에서 해당 요소에 적용될 스타일 정보를 포함함

 

[4단계] 레이아웃

Layout 계산: 렌더 트리가 생성된 후, 브라우저는 트리를 사용해 각 요소의 정확한 위치와 크기 계산

 

Reflow: Layout 계산은 viewport 크기 같은 정보에 의존함. 화면 크기가 변경되면 브라우저는 레이아웃 과정 다시 수행함.

Reflow(리플로우)는 성능에 영향을 줄 수 있으므로 최소화하는 것이 중요함

 

[5단계] 페인팅

브라우저 요소를 실제로 화면에 그리는 작업.

시각적 요소(텍스트, 색상, 그림자, 이미지 등)을 화면에 실제로 그려냄

화면에 표시되는 그래픽 요소를 생성하는 과정이므로, 성능에 큰 영향을 줄 수 있음.

복잡한 그래픽이나 애니메이션이 포함된 경우 페인트 작업이 많아져 성능이 저하될 수 있음

 

[6단계] 컴포지팅

브라우저는 화면에 그려질 요소를 레이어(Layer)로 분리하고, GPU를 활용해 레이어를 결합해 최종 화면을 구성함.

컴포지팅 단계는 GPU 가속을 활용해 성능을 최적화하고, 화면에 최종적으로 표시되는 결과를 빠르게 생성함.

 

transform과 opacity 같은 속성은 레이아웃이나 페인트 과정을 거치지 않고, 컴포지팅 단계에서만 처리됨

이 속성을 사용하는 애니메이션은 더 부드럽고 빠르게 실행될 수 있음

 

---

Reflow와 Repaint의 차이점은?

Reflow: 브라우저가 페이지의 레이아웃을 다시 계산하는 과정

DOM 구조가 변경되거나 CSS 스타일이 변경되었을 때, 브라우저가 화면의 요소 배치를 다시 계산함

모든 자식 요소와 관련된 부모 요소까지 영향을 받기 때문에 비용이 많이 드는 작업임

렌더 트리 전체 또는 일부 영역의 레이아웃 재계산이 필요

(CSS에서 요소의 width나 height 속성을 변경하면, 해당 요소 뿐 아니라 연관된 모든 요소의 배치를 다시 계산함)

 

Repaint: 요소의 모양이나 스타일이 변경될 때, 변경된 스타일을 기반으로 화면을 다시 그림.

요소의 레이아웃(위치와 크기)은 그대로이고, 색상이나 배경 등의 스타일만 변경.

해당 요소만 다시 그려짐. 렌더 트리의 일부 영역만 다시 그림.

(CSS에서 요소의 background-color가 변경된 경우, 요소의 배경색만 변경됨. Reflow보다 계산 비용이 덜 듦)

 

Reflow와 Repaint로 성능 최적화하는 법

1. reflow 유발하는 CSS 속성 사용을 최소화 함

- 미리 CSS에서 스타일을 설정해 초기 로드 시에만 계산이 이루어지도록 하고, 이후에는 변경되지 않도록.

-  width, height, margin, pading, border 등의 속성은 레이아웃을 다시 계산하게 해 reflow를 일으킴

 

2. CSS 애니메이션 최적화

- transform과 opacity만을 사용함

- 페인트 과정을 거치지 않고 컴포지팅 단계만 거치는 속성이므로, GPU 가속을 이용하고 CPU 자원을 적게 사용함

 

3. will-change 속성 사용

- 브라우저 특정 요소 변경 가능성을 미리 표시해둠

- will-change: transform으로 미리 GPU에서 요소를 준비하도록 만들어 reflow및 repain에 미치는 영향 줄임

- 너무 자주 사용하면 메모리 낭비이므로, 필요한 요소에만 적용해야 함.

 

---

출처

[1] 매일메일. 241224. 브라우저 렌더링 파이프라인에 대해서 설명해주세요. 19번. https://maeil-mail.kr

[2] 웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가 https://developer.mozilla.org/ko/docs/Web/Performance/How_browsers_work

[3] 매일메일. 241213. reflow와 repaint의 차이점에 대해서 설명해주세요. 3번. https://maeil-mail.kr