렌더링 엔진에서DOM (Document Object Model)CSSOM (CSS Object Model) 을 생성한 후, Attachment 과정을 통해 Render Tree를 만들게 된다.

이 Render Tree는 각 요소의 레이아웃을 계산하는데 사용되며, 픽셀을 화면에 렌더링하는 페인트 프로세스에 대한 입력으로 처리 된다. 그러므로 최적화를 하려면 DOM (Document Object Model)CSSOM (CSS Object Model) 작업을 할 때 각각 최적화를 해주는 일이 매우 중요하다.

  • DOM과 CSSOM 트리는 결합되어 렌더링 트리를 생성한다.
  • 렌더링 트리에는 페이지를 렌더링하는데 필요한 노드만 포함되어 있다.
  • 레이아웃은 각 객체의 정확한 위치 및 크기를 계산한다.
  • 마지막 단계는 최종 렌더링 트리에서 수행되는 페인트이다. 픽셀을 화면에 렌더링 한다.

1. DOM 및 CSSOM 렌더링 트리 결합


DOM과 CSSOM을 렌더링 트리에 결합한다. 모든 DOM 콘텐츠와 CSSOM의 스타일 정보를 캡처한다.

  1. DOM 트리의 루트에서 시작해서, 표시되는 노드를 각각 가로지른다.
  • 일부 노드는 표시되지 않는다. (스크립트 태그, 메타 태그), 렌더링 된 출력에 반영되지 않으므로 생략된다.
  • 일부 노드는 CSS를 통해 숨겨지며 렌더링 트리에서 생략된다. 예를 들어, 위의 예시에서 span 노드는 ‘display: none’ 속성을 설정하는 명시적 규칙이 있기 때문에 렌더링 트리에서 누락된다.
  1. 표시된 각 노드에 대해 적절하게 일치하는 CSSOM 규칙을 찾아 적용한다.
  2. 표시된 노드를 콘텐츠 및 계산된 스타일과 함께 내보낸다.