브라우저 렌더링 과정

렌더링이란 HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말한다.

브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있다.

크롬은 블링크(Blink), 사파리는 웹킷(Webkit), 파이어폭스는 게코(Gecko)라는 렌더링 엔진을 사용함.

 

 

1️⃣ 사용자가 브라우저를 통해 웹에 접속하면, 서버로부터 HTML, CSS 등 웹에 필요한 리소스를 다운로드 받는다.

브라우저가 페이지를 렌더링 하려면 HTML, CSS 파일을 Object Model 로 만들어야 한다. 👉🏻

HTML 은 DOM(Document Object Model) Tree , CSS 는 CSSOM(CSS Object Model) Tree

 

 

2️⃣ Rendering Tree 생성

DOM Tree와 CSSOM Tree가 만들어졌으면 그 다음으로는 이 둘을 합쳐 Rendering Tree를 생성한다.

렌더링 트리에는 페이지를 렌더링 하는데 필요한 노드만 포함됩니다.

 

3️⃣ Layout 단계

브라우저의 뷰포트(Viewport) 내에서 각 요소의 정확한 위치와 크기를 계산하는 Box 모델이 출력된다.

모든 상대적인 측정값 (%, vh, vw) 은 실제 화면에서 절대적인 픽셀 단위로 변환된다.

 

 

4️⃣ Painting 단계

마지막으로 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하게 된다.

레이아웃 단계에서 모든 계산이 완료되면, 화면에 요소들을 그리게 된다.

이 단계를 “페인팅” 또는 “래스터화”라고 한다.

처리해야 하는 스타일이 복잡할수록 painting 단계에 소요되는 시간이 길다.

 

 

🤷🏻‍♂️ 리플로우(Reflow) 와 리페인트(Repaint) 🤷🏻‍♀️

 

1) 리플로우(Reflow)

- 사용자가 웹에 처음 접속하면, 렌더링 과정을 거쳐 화면에 모든 요소가 그려지게 된다.

이후에 사용자에 의한 다양한 액션과 이벤트로 인해서 새로운 HTML, 스타일 요소가 추가, 변경된다.

영향을 받게되는 모든 노드에 대해서 렌더링 트리 생성과 레이아웃 과정을 재수행하게 된다.

 

> 리플로우(Reflow) 가 일어나는 대표적인 속성들 <

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

 

2) 리페인트(Repaint)

- 리플로우 과정이 수행된 결과를 화면에 그리기 위해선 페인팅 단계를 재수행해야 한다.

기존 요소에 변경 사항이 생겼다고 해서 항상 리플로우(Reflow)-리페인트(Repaint)가 일어나는 것은 아니고,

단순한 색상 변경은 리플로우(Reflow) 수행 없이 바로 리페인트(Repaint)만 수행한다.

리플로우(Reflow)가 일어나면 반드시 리페인트(Repaint)가 일어난다.

 

> 리페인트(Repaint) 만 일어나는 대표적인 속성들 <

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

 

리플로우(Reflow), 리페인트(Repaint) 가 일어나지 않는 transform, opacitiy 와 같은 속성도 있습니다.

left, right, width, height 보다 <<<<<<< transform >>>>>>>>을

visibility/display 보다 <<<<<< opacitiy >>>>>>>> 를 사용하는 것이 성능 개선에 도움된다.