[JavaScript] 렌더링 트리(Critical Rendering Tree)

 

카테고리가 JavaScript에 국한된 건 아니지만, 이미 카테고리를 세부적으로 나누었기에 여기에 업로드!

​

렌더링 트리 생성, 레이아웃 및 페인트  |  Web  |  Google Developers

TODO

developers.google.com

​

*Critical Rendering Path

https://www.freecodecamp.org/news/an-introduction-to-web-performance-and-the-critical-rendering-path-ce1fb5029494/

 

 

 

​

* Render Tree 형성은 DOM, CSSOM의 결합

* DOM Tree에서

- 일부 노드는 표시되지 않으며(예: 스크립트 태그, 메타 태그 등), 렌더링된 출력에 반영되지 않으므로 생략됩니다.

- 일부 노드는 CSS를 통해 숨겨지며 렌더링 트리에서도 생략됩니다. 예를 들어,---위의 예시에서---span 노드의 경우 'display: none' 속성을 설정하는 명시적 규칙이 있기 때문에 렌더링 트리에서 누락됩니다

​

참고: 간단한 여담으로, visibility: hidden은 display: none과 다릅니다. 전자는 요소를 보이지 않게 만들지만, 이 요소는 여전히 레이아웃에서 공간을 차지합니다(즉, 비어 있는 상자로 렌더링됨). 반면, 후자(display: none)는 요소가 보이지 않으며 레이아웃에 포함되지도 않도록 렌더링 트리에서 요소를 완전히 제거합니다.

​

최종 출력은 화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보를 모두 포함하는 렌더링 트리입니다. 렌더링 트리가 생성되었으므로 '레이아웃' 단계로 진행할 수 있습니다.

​

​

레이아웃에서는 뷰포트 내에서 각 요소의 정확한 위치와 크기를 정확하게 캡처하는 '상자 모델'이 출력됩니다. 모든 상대적인 측정값은 화면에서 절대적인 픽셀로 변환됩니다.

​

마지막으로, 이제 표시되는 노드와 해당 노드의 계산된 스타일 및 기하학적 형태에 대해 파악했으므로,

렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하는 마지막 단계로 이러한 정보를 전달할 수 있습니다. 이 단계를 흔히 '페인팅' 또는 '래스터화'라고 합니다.

​

(내가 생각한 페인트 단계: 바로 그림을 그리는 것이 아닌, 레이어를 나눈다.

그래야 나중에 부분적으로 레이어 수정하면 되니까 편함. 마치 포토샵의 레이어처럼!)

​

---

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=ko

Layout' 이벤트는 타임라인에서 렌더링 트리 생성, 위치 및 크기 계산을 캡처합니다.

레이아웃이 완료될 때 브라우저가 'Paint Setup' 및 'Paint' 이벤트를 발생시킵니다. 이러한 작업은 렌더링 트리를 화면의 픽셀로 변환합니다.

​

---

브라우저의 단계 정리

1. HTML 마크업을 처리하고 DOM 트리를 빌드합니다.

2. CSS 마크업을 처리하고 CSSOM 트리를 빌드합니다.

3. DOM 및 CSSOM을 결합하여 렌더링 트리를 형성합니다.

4. 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산합니다.

5. 개별 노드를 화면에 페인트합니다.

 

더 자세히 알아보기

ui.toast.com/fe-guide/ko_PERFORMANCE

성능 최적화

크롬 브라우저의 성능 측정 도구 사용법을 알려준다.