Critical-Rendering-Path

프로그램의 작동 원리를 알기 위해서 꼭 알고 있어야 하는 개념이다.

먼저 요약하자면,

DOM과 CSSOM trees는 Render tree형태로 결합되어 있다.
렌더트리는 오직 렌더트리 페이지에 요청된 해당 노드들만 포함한다.
레이아웃은 각각의 Object들의 정확한 크기와 위치를 계산 한다.
최종 단계는, 렌더링 트리를 가져와서 스크린에 렌더링 한다.

먼저 브라우저는 DOM과 CSSOM을 ‘Render Tree’ 안으로 결합시킨다. 결합 시키는 것은 모든 눈에 보이는 DOM 콘텐츠를 Capture한다. 각 노드에 CSSOM 스타일 정보들 또한 브라우저에 의해서 캡쳐 된다.

각각의 DOM과 CSSOM Render Tree에 대해서 알아보자.

구조를 이해 하기 위해 계층(**hierarchy)**을 이해 해보자

브라우저에서 가장 상위에 존재하는 <HTML> 가 있고, 그 아래 자식 요소들로 Head, Body 가 있을 것이다. 그리고 Head와 Body 안에는 (head의 경우 : meta, link / body의 경우 : p, span, div…) 또 다른 여러 자식 요소들이 있을 것이다.

이번엔 스타일시트인 CSS의 구조를 알아보자.

DOM요소 안에 있는 여러 태그들을 마찬가지로 적용 할 것이다. 가령 ‘*’을 통해 전체적으로 스타일을 규정할 수 있고 , body 자체 , body의 자식요소인 p, span, div 등등에 대해 스타일을 부여할 것이다.

마지막으로 렌더트리에서는 어떤 계층을 갖고 있을지 알아보자.