[web] 렌더링 트리 생성, 레이아웃 및 페인트

아래의 글을 정리한 포스팅

https://web.dev/articles/critical-rendering-path/render-tree-construction?hl=ko

렌더링 트리 생성, 레이아웃 및 페인트  |  Articles  |  web.dev

---

요약 

렌더링 트리 생성하려면 DOM 트리와 CSSOM 트리를 결합하여 생성 (화면에 보여질 것들만 추려서, 스타일도 마찬가지)

레이아웃은 렌더링 트리에 속한 노드들이 어디에 위치할 지 결정

페인트는 렌더링 트리와 레이아웃의 값들을 이용해서 화면에 노출

 

 

렌더링 트리 

CSSOM 트리 + DOM 트리 결합하여 생성

페이지를 렌더링하는 데 필요한 노드만 포함

생성과정

 - DOM 트리 루트에서 시작하여 표시되는 노드 각각을 순찰한다.

   - 스크립트 태그, 메타 태그 등 일부 노드는 표시되지 않으며 렌더링에 제외되므로 생략한다.

   - 일부 노드는 CSS를 사용하여 숨겨지며 렌더링 트리에도 생략된다. ex) display: none

 - 표시된 각 노드에 대해 일치하는 적잘한 CSSDOM 규칙을 찾아 적용

 - 표시된 노드는 콘텐츠 및 계산된 스타일과 함께 내보낸다.

레이아웃

각 객체의 정확한 위치 및 크기를 계산

 

페인트

개별 노드를 화면에 그림