브라우저의 렌더링 원리

브라우저의 렌더링 원리

1. HTML 파싱 후, DOM(Document Object Model) 트리를 구축한다.
2. CSS 파싱 후, CSSOM(CSS Object Model) 트리를 구축한다.
3. JavaScript 실행
   • HTML 중간에 스크립트가 있다면 HTML 파싱이 중단된다.
4. DOM과 CSSOM을 조합하여 렌더트리(Render Tree)를 구축한다.
   • display:none 과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트리로 구축되지 않는다.
5. 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산한다 (Layout/Reflow 단계)
   • 뷰포트 : 브라우저 화면 상에 실제로 표시되는 영역
   • Reflow : 레이아웃 단계를 다시 거치는 것
6. 계산한 위치 / 크기를 기반으로 화면에 그린다. (Paint/Repaint 단계)
   • Repaint : 페인트 단계를 다시 거치는 것

• browser