how to browsers work, 브라우저 동작원리

브라우저는 웹 페이지에 필요한 리소스를 내려받고 해석한 뒤, 
다운로드, 파싱, 스타일, 레이아웃, 페인트, 합성으로 나뉘는데 단계마다 어떤 일이 발생하는지 알아보겠다.

 

웹킷 동작 과정

브라우저에서 웹 페이지를 로드하면 가장 먼저 HTML 파일을 다운로드한다.

파싱은 다운로드한 HTML을 해석하여 DOM 트리를 구성하는 단계이다.

파싱 중  <script />, <link />, <img />를 발견하면 각 리소스를 요청하고 다운로드한다.

HTML 또는 리소스에 CSS가 포함된 경우에는 CSSOM 트리 구성 작업도 함께 진행한다.

크롬 브라우저 Rendering Path

HTML Parser

HTML 문서를 parsing 하여 DOM Tree를 만드는 과정

DOM Tree

DOM: Document Object Model

- Document = HTML, well-formed XML

- ObjectModel = Data + Method

Javascript Engine

JS는 다양한 경로를 통해서 실행이 된다.

- HTML Parsing, User Input, DOM Timer...

Recalculate Style

Parsing 된 CSS 결과(CSSOM)를 Render Tree에 적용하는 과정

- HTML은 문서, 각 엘레먼트들의 렌더링에 관한 모든 정보는 CSS가 가지고 있음

- CSS parsing 과정은 Dev Tools에는 표시되지 않음

CSSOM

CSSOM: CSS Object Model

- CSS는 HTML Element의 스타일을 정의

- 외부 링크로 정의된 경우 렌더링이 블로킹된다

- cascade down(상속) 개념을 구현하기 위해 트리 구조

Render Tree

Render Tree = DOM Tree + CSSOM Tree

- Dom Tree와 Render Tree는 1 :  1 관계가 아니다.

- 화면에 보이는 요소들을 중심으로 구성

- Render Tree = CSSOM Tree, + DOM Tree

위에서 Dom Tree에 있는 web performance가 Render Tree에 없는 이유는 CSSOM에서 display: none을 적용했는데 화면에 보일 필요가 없는  것들을 Render Tree에는 반영이 되지 않는 것을 볼 수 있다.

Layout

Render Tree 노드(Box)들의 좌표를 계산하는 과정

• 노드의 크기와 위치를 계산하는 과정
• 노드의 위치와 크기를 파악하기 위해, 루트부터 노드를 순회하면서 계산하고, 레이아웃 결과로 노드의 정학환 위치와 크기를 픽셀 값으로 렌더 트리에 반영한다.
• Global and incremental layout

Layout 알고리즘

• 윈도우 사이즈를 변경하거나 폰트 변경 시 Global Layout 발생 ( Global Layout: 전체를 Layout 하는 것 )
• Dirty bit system으로 incremental layout, ( 부분만 Layout 하는 것 )
• 각 박스의 넓이는 viewport 기준, 박스의 높이는 contents를 기준

Update Layer Tree

렌더링에 사용될 최종 Layer들을 계산해서 생성하는 과정

The Compositing Forest

렌더링에 사용될 최종 Layer들을 계산해서 생성하는 과정

 

Layer 생성 조건

1. It's the root object for the page

2. CSS position properties (relative, absolute)

3. Has overflow, an alpha mask or reflection

4. CSS filter

5. CSS 3D Transform, Animation

6. <canvas>, <video>

7. will-change

8. Broswer internal

Paint

계산된 좌표를 가지고 paint를 한다. 프린트처럼 px을 브라우저에 그리기 때문에 굉장히 느리다.

Layout 단계에서 계산된 값을 이용해 렌더트리의 각 노드를 화면상의 실제 픽셀로 변환한다. 픽셀로 변환된 결과는 포토샵의 레이어처럼 생성되어 개별 레이어로 관리된다. 단, 각각의 엘리먼트가 모두 레이어가 되는 것은 아니다. transform 속성 등을 사용하면 엘리먼트가 레이어화 되는데, 이 과정을 페인트라고 한다.

Composite Layers

• Composition은 Layer들을 합성하여 한 장의 bitmap으로 만드는 과정
• 전체를 그리는 게 아니라 각 Layer 별로 Paint를 하며, Tiled Backing Stroe 기법을 활용
  • 브라우저는 재사용하기 위해서 tile로 나눠서 그린다. 

 

아래 그림은 브라우저 로딩 과정을 나타내는 것인데, 이 과정을 이해하면 성능 최적화에 도움이 된다.

출처: https://ui.toast.com/fe-guide/ko_PERFORMANCE#2-%EC%8A%A4%ED%83%80%EC%9D%BC

 

 

출처:

tv.naver.com/v/4578425/list/279844

d2.naver.com/helloworld/59361

developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=ko

www.slideshare.net/deview/125-119068291

https://ui.toast.com/fe-guide/ko_PERFORMANCE#2-%EC%8A%A4%ED%83%80%EC%9D%BC

https://developers.google.com/web/fundamentals/performance/rendering?hl=ko