🎯 HTML 페이지 렌더링 단계:
- DOM의 구성
- CSSOM 구축
- 렌더 트리의 구성
- 레이아웃 단계
- 페인팅 단계
🎯 DOM 구축
- 브라우저 binary stream format는 기본적으로 응답 헤더가 있는 텍스트 파일인 의 서버로부터 HTML 문서를 받습니다 Content-Type = text/html; charset=UTF-8.
- 브라우저는 HTML 문서를 읽을 때 HTML 요소를 만날 때마다 Node 라는 JS 객체를 생성합니다 . 결국 모든 html 요소는 Node 로 변환됩니다 .
- 브라우저가 HTML 문서에서 노드를 만든 후에는 이러한 노드 개체의 "나무와 같은" 구조를 만들어야 합니다.
Document Object Model 은 웹 페이지를 효율적으로 렌더링하고 개발자가 다양한 목적을 위해 DOM 요소를 동적으로 조작할 수 있도록 공개적으로 노출하기 위해 브라우저에서 제공하는 고급 웹 API입니다.
🎯 CSSOM 구축
- DOM을 구성한 후 브라우저는 모든 소스에서 CSS를 읽고 나무와 같은 구조인 CSSOM(CSS Object Model)을 구성합니다.
- 이 트리의 각 노드에는 대상 DOM 요소에 복사될 CSS 스타일 정보가 포함되어 있습니다.
- 대부분의 브라우저에는 사용자 에이전트 스타일시트 라고 하는 고유한 스타일시트가 함께 제공됩니다 . 웹 브라우저에서 사용하는 기본 스타일시트입니다. CSS가 적용되지 않은 경우 브라우저는 여전히 콘텐츠를 어떻게든 렌더링해야 하며 브라우저는 이를 위해 사용자 에이전트 스타일시트를 사용합니다.
🎯 렌더 트리 구성
- DOM과 CSSOM은 함께 결합되어 페이지에 표시되어야 하는 노드를 포함하는 렌더 트리를 형성합니다.
- DOM 트리의 루트에서 표시되는 각 노드가 탐색되고 해당 CSSOM 규칙이 적용됩니다. 마지막으로 콘텐츠와 스타일이 있는 가시적 노드를 포함하는 렌더 트리를 제공합니다 .
- 이는 결국 화면에 인쇄될 내용에 대한 저수준 표현이며 픽셀 매트릭스의 영역(예: head, meta, link태그)을 보유하지 않는 노드는 포함하지 않습니다 .
위에서 알 수 있듯이 display: noneCSS 속성 을 포함하는 노드 는 렌더 트리의 일부가 아닙니다.
🎯 레이아웃 단계
- 이 단계는 노드의 기하학을 계산 하는 기하학 단계 라고 할 수 있습니다 .
- 레이아웃 단계에서 브라우저의 뷰포트에 해당하는 노드의 정확한 위치와 크기가 계산됩니다. 이러한 방식으로 정확한 위치와 크기를 알고 있는 상자 모델 이 생성됩니다. 이 프로세스는 레이아웃 또는 리플로우 라고도 합니다.
- 레이아웃 단계에서 생성된 상자 모델:
🎯 페인팅 단계
- 보이는 노드, 스타일 및 지오메트리를 알고 있듯이 이제 이 모든 정보는 렌더 트리에서 화면의 실제 픽셀로 노드를 렌더링하는 데 사용됩니다. 이 과정을 페인팅이라고 합니다. UI 백엔드 레이어를 사용합니다.
