렌더트리의 의미와 과정

렌더트리

 

DOM + CSSOM이 더해저 Render Tree가 완성이 됩니다.

최종적으로 브라우저에 표기 될 것들만 렌더 트리에 선별이 되서 생성되고,

렌더트리를 이용해 각 요소의 레이아웃계산, 픽셀을 화면에 렌더링 하는 페인트 프로세스에 대한 입력으로 처리가 됩니다.

 

 

 

visibility : hidden 속성은 렌더 트리에 포함되지만 display : none 속성은 렌더 트리에서 요소를 제거

조금 더 자세히 순서를 보면,

 

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

    1-1 메타태그, 스크립트 태그 등의 노드는 표시되지않습니다

     (사용자에게 보여주지 않아도 되는 내용은 출력에 반영이 되지 않습니다)

 

    1-2 일부 노드는 CSS를 통해 숨겨지며 렌더트리에서도 생략이 됩니다.

     (display:none;속성이 들어가면 렌더트리에서 누락이 됩니다.)

     (visibility:hidden은 레이아웃의 공간을 가지고 있고 내용만 안보이는 특성이므로 비어있는 상자로 렌더링 됩니다 )

 

2. 표시된 각각의 노드에 대해 적절하게 일치하는 CSSOM 규칙을 적용합니다.

3. 표시된 노드를 콘텐츠 및 계산된 스타일과 함께 내보냅니다

 

최종적으로,

렌더 트리는 화면에 보이는 모든 노드와 콘텐츠, 스타일 정보를 병합한 최종 출력에 해당됩니다

 

출저:

https://onlydev.tistory.com/9