웹페이지가 브라우저에 랜더링되는 과정

웹페이지가 브라우저에 랜더링되는 과정

Parsing > Style > Layout/Reflow > Painting > Composite

단계별로 정리를 해보자면,

1. Parsing : HTML파일과 CSS파일을 파싱해서 DOM, CSSOM Tree를 만든다.

2. Style : 두 Tree를 결합하여 Render Tree를 만든다.

   • Render Tree를 구성할때 visibility: hidden은 요소가 공간을 차지하고, 보이지만 않기 때문에 Render Tree에 포함이 되지만, display: none 의 경우 Render Tree에서 제외된다.

3. Layout : Rendering Tree에서 각 노드의 위치와 크기를 계산한다. 루트부터 노드를 순회하면서 노드의 정확한 크기와 위치를 계산하고 렌더 트리에 반영한다.

4. Paint : 계산된 값을 이용해 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다.

5. Composite : 레이어를 합성하여 실제화면에 나타낸다.