ABOUT ME

Today
Yesterday
Total
  • 렌더트리의 의미와 과정
    Web-Publishing/About Web 2021. 6. 16. 18:59

    렌더트리

     

    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

    'Web-Publishing > About Web' 카테고리의 다른 글

    DOM이란?(feat.CSSOM)  (0) 2021.06.16
    렌더링 엔진의 의미와 과정(feat.스크립트 로드)  (0) 2021.06.16
    파싱, 파서란?  (0) 2021.06.16
    브라우저의 동작 원리  (0) 2021.06.16
    웹의 기본 동작 원리 .  (0) 2021.06.16
Designed by Tistory.