브라우저가 화면에 나타나는 요소를 렌더링할 때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 렌더링 엔진을 사용

• 렌더링 엔진이 html, css, javascript로 렌더링할 때, CRP(Critical Rendering Path) 또는 Pixel Pipeline라는 프로세스를 사용하여 다음 단계로 이루어짐

CRP(Critical Rendering Path)

브라우저가 웹페이지를 렌더링하는 프로세스 (Pixel Pipeline라고도 부름)

1. 서버로부터 리소스 다운로드(HTML, CSS, JavaScript)
2. DOM Tree 구축
   • 브라우저의 렌더링 엔진이 HTML 문서를 파싱하여 DOM(Document Object Model)트리를 형성
3. CSSOM Tree 구축
   • 스타일 요소를 파싱하여 CSSOM 트리를 형성
4. JavaScript 실행
   • 단, HTML 중간에 스크립트가 존재하는 경우 HTML 파싱을 중단 후 JS 실행
5. Render Tree 구축
   • DOM 트리와 CSSOM 트리를 결합하여 Render 트리 구축
   • 단, display: none 속성과 같이 화면에서 보이지 않고, 공간을 차지하지 않는 것은 render tree로 구축되지 않음
6. Layout(Reflow) 단계
   • 각각의 노드가 화면 내에 위치되어야 할 좌표값을 계산 후 배치 (뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산)
7. Paint 단계
   • 계산한 위치와 크기를 기반으로 화면에 그리는 과정
8. Composite 단계
   • 각 레이어 별로 Layout과 Paint를 진행한 후 레이어를 합성하는 단계