114. 브라우저 렌더링 TIL 23.01.17

---

 

브라우저 렌더링

1~4. HTML 파일과 CSS 파일을 파싱해서 DOM Tree, CSSOM Tree를 만든다(Parsing)
5. 두 Tree를 결합하여 Rendering Tree를 만든다.
6. Rendering Tree에서 각 노드의 위치와 크기를 계산한다.(Layout)
7. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다.(Paint)
8. 레이어를 합성하여 실제 화면에 나타낸다.(Composite)

 

Dom(Document Object Model) Tree

 

CSSOM(CSS Object Model) Tree

Render Tree

 

(출처)https://web.dev/critical-rendering-path-render-tree-construction/

Render-tree Construction, Layout, and Paint