Critical Rendering Path란?
브라우저가 HTML, CSS, Javascript를 화면에 실제 픽셀로 변환하는 단계의 순서를 말합니다.
- HTML을 가져와서 Document Object Model (DOM)을 생성합니다.
- CSS를 가져와서 CSS Object Model (CSSOM)을 만듭니다.
- DOM 과 CSSOM을 묶어서 Render Tree를 만듭니다.
- Layout 단계를 거쳐서 모든 것이 페이지의 어느 위치에 갈 것인지를 정합니다.
- 마지막으로 실제 화면에 픽셀을 그리는 Paint 단계를 거칩니다.
DOM
DOM은 HTML 마크업에 대한 표현입니다.
- 브라우저가 HTML 데이터를 지정된 인코딩(ex: UTF-8)에 따라 개별 문제로 변환합니다.
- Tokenizer가 HTML 문자열을 HTML 표준에 지정된 고유 Token(꺽쇠괄호로 묶인 문자열, <html><head>)으로 변환합니다.
- Token들을 해당 속성과 규칙을 정의하는 Node 객체로 변환합니다. 이러한 과정 속에서 Node 간의 관계를 정의합니다.
- 모든 Token들을 사용하면 HTML의 내용, 속성을 가지는 DOM 트리 구조를 갖게됩니다.
CSSOM
실제 페이지를 표시할려면 CSSOM을 만들어야 한다.
- CSS 규칙들을 브라우저가 이해하고 처리할수 있는 형식으로 변환합니다.
- CSS 바이트가 문자로 변환된 후 차례대로 Token과 Node로 변환되고 마지막으로 CSSOM이라는 트리를 형성합니다.
CSSOM이 트리 구조를 갖는 이유는 페이지에 있는 객체의 최종 스타일을 계산할때 브라우저는 해당 노드에 적용 가능한 일반적인 규칙으로 시작해서 더욱 구체적인 규칙을 적용하는 방식(하향식)으로 계산된 스타일을 재귀적으로 세분화합니다.
CSS Node들은 부모 Node의 스타일 규칙을 상속받습니다. 그러기에 CSSOM은 DOM 구조와 비슷하지만 케스케이딩이 되는 규칙때문에 완전히 같지 않습니다.
DOM은 점진적으로 렌더링을 할수 있지만 CSSOM은 할 수가 없습니다.
CSSOM을 형성한 다음에 CSS를 받아으면 CSSOM 트리가 변경이 되서 페이지를 렌더링할때 잘못된 스타일로 바꿀수 있기에 부분적인 CSSOM을 사용할수 없다.
그러기에 브라우저는 모든 CSS를 받고 처리할때까지 페이지 렌더링을 차단합니다.
복잡한 규칙일수록 브라우저가 더 많은 일을 합니다.
예를 들어 div > p 인경우 p를 DOM 트리에서 찾으면 거슬러 올라가서 부모가 div인 요소일때만 이 규칙이 적용되기 때문에 구체적인 규칙일수록 DOM 트리에서 더 많은 노드를 건너야 하므로 더 손실이 큽니다.
Render Tree
DOM 와 CSSOM 트리를 합쳐서 Render Tree를 만듭니다.
Render Tree는 표시되는 각 요소의 레이아웃을 계산하는데 사용되고 픽셀을 화면에 렌더링하는 페인트 프로세스에 대한 입력으로 처리합니다.
- DOM 트리의 루트부터 표시되는 노드들을 순회합니다.
- 표시된 노드에 대해 일치하는 CSSOM 규칙을 찾아 적용합니다.
- 표시된 노드를 콘텐츠와 계산된 스타일과 함께 보냅니다.
Render Tree의 가장 중요한 속성 중 하나는 눈에 보이는 내용만 가집니다.
Layout
모든 요소가 페이지 어딘가에 어떻게 위치해야 하는지 알기 위한 단계입니다.
페이지에서 각 객체의 정확한 크기와 위치를 알기위해서 브라우저는 Render Tree의 루트부터 시작해서 순회합니다.
레이아웃 프로세스에서는 뷰포트 내에서 각 요소의 정확한 위치와 크기를 정확하게 캡처하는 상자 모델이 출력됩니다. 모든 상대적인 측정값은 화면에서 절대적인 픽셀로 변환됩니다.
Render Tree의 각 노드를 화면의 실제 픽셀로 변환하는 마지막 단계로 이러한 정보를 전달할 수 있습니다. 이 단계를 페인팅 또는 래스터화 라고 합니다.
body의 width 100%는 레이아웃 뷰포트 크기의 100%입니다 만약 viewport 를 선언하지 않았다면 기본 뷰포트(일반적으로 980px)를 사용하기 됩니다.
Layout 이벤트는 Render Tree 생성, 위치 및 크기 계산을 캡처합니다.
만약 레이아웃 뷰포트의 크기가 변하면 브라우저는 레이아웃 단계를 다시 시행합니다. 이러한 변화가 성능에 영향을 줍니다.
스타일이나 내용을 변경해서 Render Tree 업데이트할 때 마다 레이아웃 단계를 재시행할 가능성이 큽니다.
이런 부분을 최적화하려면 한꺼번에 업데이트를 진행하면 됩니다.
Paint
레이아웃이 완성될때 브라우저가 Paint 이벤트를 발생시켜서 Render Tree를 화면의 픽셀로 변환합니다.
그려야 하는 범위 의 크기에 따라서 페인팅 비용이 달라진다.
Render the Page Steps
- HTML을 파싱해서 점진적으로 DOM을 생성한다. 점진적이기에 응답을 한꺼번에 받지 않아도 되고 한 번에 생성을 마치지 않아도 됩니다..
- head에 있는 CSS, JS 링크를 요청해서 응답을 받습니다.
- 스크립트는 동기적이라서 CSSOM이 생성되기 전까지 스크립트를 실행할수 없습니다.
- CSSOM을 생성하면 자바스크립트를 실행합니다.
- 자바스크립트가 끝나면 다시 진행해서 DOM의 생성을 끝마치게 된다.
- DOM과 CSSOM을 가지게 되면 그 둘을 합쳐서 Render Tree를 만듭니다.
- 그 이후에 레이아웃을 실행하고 페이지를 그립니다.
