Render Tree

Creator

Creator

Created

Created

2021 Apr 21 8:24

Editor

Editor

Edited

Edited

2023 Mar 13 2:22

Refs

Refs

notion image

독립적인 개체인

DOM 과

CSSOM 을 합한 후 최종적으로 브라우저에 표기될 것들만 렌더 트리에 선별 되어 생성

(삭제 또는 추가(

CSS pseudo elements )가 일어날수 있다)

렌더 트리는 표시되는 각 요소의 레이아웃을 계산하는 데 사용되고 픽셀을 화면에 렌더링하는 페인트 프로세스에 대한 입력으로 처리

notion image

notion image

DOM 트리의 루트에서 시작해서 노드 각각을 읽으며 표시

렌더 트리(Render Tree), CRP(Critical Rendering Path)

DOM과 CSSOM은 독립적인 개체입니다. 하나는 콘텐츠를, 다른 하나는 문서의 스타일 규칙을 설명합니다. 브라우저가 이 두가지를 병합하여 화면에 픽셀을 렌더링 하기 위한 마지막 단계, 최종 보스인 렌더 트리(render tree)에 대해 알아보겠습니다. 렌더 트리는 DOM과 CSSOM을 합한 후 최종적으로 브라우저에 표기될 것들만 렌더 트리에 선별 되어 생성이 됩니다.

렌더 트리(Render Tree), CRP(Critical Rendering Path)

https://onlydev.tistory.com/9

렌더 트리(Render Tree), CRP(Critical Rendering Path)

Recommendations

////////