브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷이나 게코등과 같은 렌더링 엔진을 사용한다. 렌더링 엔진이 HTML, CSS, Javascript로 렌더링 할 때 CRP(Critical Rendering Path)라는 프로세스를 사용하며 다음 단계들로 이루어진다.
1.HTML 파싱 후, DOM(Document Object Model)트리 구축
2.CSS 파싱 후, CSSOM(CSS Object Model)트리 구축
3.Javascript 실행
4.DOM과 CSSOM을 조합하여 렌더트리(Render Tree) 구축
5.뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기 계산(Layout/Reflow 단계)
6.계산한 위치/크기를 기반으로 화면에 그림(Paint 단계)
developer