먼저 브라우저가 화면에 나타나는 요소를 렌더링 할 때, 크롬에서는 블링크 나 사파리의 웹킷 등과 같은 렌더링 엔진을 사용합니다. 렌더링 엔진이 HTML, Css, Js로 렌더링 할 때 CRP라는 프로세스를 사용하며 다음 단계들로 이루어집니다.
CRP 단계는 이렇습니다.
- HTML를 파싱 후, DOM 트리를 구축한다.
- CSS를 파싱 후, CSSOM 트리를 구축한다.
- JS를 실행한다.
- 주의! HTML 중간에 스크립트가 있다면 HTML 파싱이 중단된다.
- DOM 과 CSSOM을 조합하여 렌더 트리를 구축한다.
- 주의! display:none 속성과 같이 화면에 보이지도 않고 공간을 차지하지 않는 것은 렌더트리로 구축되지 않는다.
- 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산한다.(Layout 단계)
- 계산한 위치/크기를 기반으로 화면에 그린다.(Paint 단계)
- 브라우저 마다 다르지만, 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있다. 크롬은 블링크, 사파리는 웹킷, 파이어폭스는 게코라는 렌더링 엔진을 사용한다.
- CRP(Critical Rendering Path, 중요 렌더링 경로)는 브라우저가 HTML, CSS, Js를 화면에 픽셀로 변화하는 일련의 단계를 말한다. CRP는 DOM(Document Object, Model), CSSOM(CSS Object Model), 렌더 트리 그리고 레이아웃을 포함한다.
- 파싱은 하나의 프로그램을 런타임 환경(예를 들면, 브라우저 내 자바스크립트 엔진)이 실제로 실행할 수 있는 내부 포멧으로 분석하고 변환하는 것을 의미한다.
- 즉 파싱은 문서의 내용을 토큰으로 분석하고, 문법적 의미와 구조를 반영한 파스 트리(parse tree)를 생성하는 과정이다.
- DOM(Document Object Model)이란? 웹페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다. 영어 뜻풀이 그대로 문서 객체 모델을 의미한다.
- 문서 객체란? html, head, body 와 같은 태그들을 javascript가 이용할 수 있는 (메모리에 보관할 수 있는) 객체를 의미한다.
- DOM은 HTML과 스크립팅 언어(JS)를 서로 이어주는 역할을 한다.
- CSSOM(CSS Object Model)이란? CSS 내용을 파싱하여 자료를 구조화 한 것을 CSSOM이라고 한다.
- 렌더트리(Render Tree)란? 렌더 트리는 CSSOM 과 DOM 트리의 결합으로 만들어진다. 렌더 트리는 웹 페이지에 나타날 각 요소들의 위치(Layout)을 계산하는데 사용되고, 픽셀을 화면에 렌더링 하는 페인트(Paint) 즉 화면에 요소들을 표현하는 프로세스를 위해 존재한다.
- Layout(Reflow)이란? 뷰포트 내에서 노드의 정확한 위치와 크기를 계산한다. 이것은 바로 레이아웃(Layout) 단계이며 경우에 따라 'Reflow' 라고도 한다.
- Paint란?, 노드와 해당 노드의 계산된 스타일 및 기하학적 형태에 대해 파학했으므로, 렌더링 트리의 각 노드를 실제 픽셀로 변환하는 마지막 단계에 이러한 정보를 전달한다. 이러한 단계를 흔히 '페인팅' 또는 '레스터화' 라고 한다.