browser rendering

1. 브라우저의 구성

• 브라우저는 브라우저 엔진, 렌더링엔진, 자료저장소(local storage, coockie), 네트워크 통신, JS 해석기, UI 백엔드 등 으로 이루어져있다.

• 이때, 렌더링 엔진이 브라우저의 렌더링을 담당한다.

https://web.dev/howbrowserswork/

2. 렌더링 과정

1. DOM 트리를 구축한다.

   1. 하나의 html 페이지는 div, span 등 각각의 요소를 가진다.

   2. 이 요소들은 모두 노드로 설정이 되어 트리 형태로 저장이 된다. = DOM 트리

2. 렌더 트리와 렌더 레이어를 생성한다.

   1. 각각의 노드는 CSS 파서에 의해 정해진 스타일 규칙이 적용되어있다.

   2. 이러한 규칙에 따라서 CSSOM 이라는 트리가 만들어지고

   3. 미리 만들어진 DOM 트리 내에 있는 노드와 합쳐져 렌더 객체 (render object) 가 생성되며

   4. 이들이 모여서 병렬적인 렌더트리가 생성된다.

   5. 렌더 트리에서 display:none 이 포함된 노드는 지워지고, font-size 등 상속적인 스타일은 부모노드에만 적용되기 하는 등 최적화의 과정을 거쳐 렌더 레이어가 완성된다.

3. 렌더 레이어를 대상으로 layout 을 생성한다.

   1. 이때 좌표는 보통 부모를 기준으로 설정된다.

   2. Global layout 은 브라우저 사이즈가 증가하거나 폰트 사이즈가 커지면 변경된다.

4. 렌더 레이어를 대상으로 칠한다 - paint

   1. 픽셀마다 점을 찍듯 칠한다. = 레스터화

5. 레이어 합치기 - composite layer + 표기

   1. 각각의 레이어로부터 비트맵이 생성되고, GPU 에 텍스쳐로 업로드된다.

   2. 텍스쳐들은 서로 합쳐져서 하나의 이미지로 렌더링되며 화면으로 출력된다.

3. 주의하기

• DOM 트리 -> 렌더 트리 : 1:1 대응이다.

• 렌더 객체와 렌더레이어는 1:1 대응이 아니다!

  • display:none 등으로 사라지는 노드들이 있을 수 있기 때문이다.

• 렌더 레이어가 완성될 때, GPU 에서 처리되는 부분들이 있다면, 이 요소들은 각각 강제적으로 그래픽 레이어로 분리된다.

  • CSS3D, video, canvas, filter, animation, transform : translateZ(0) 등