• 목차

DOM

• HTML 웹 페이지에 대한 인터페이스
• 여러 언어들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공
• 뷰 포트에 어떤 내용을 렌더링할지 결정하기 위해 사용
• 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 등의 언어에 의해 수정되기 위해 사용
• HTML 문서의 요소를 제어하기 위해 웹 브라우저에서 처음 지원

DOM 구성

• Document 노드
• Element(요소) 노드
• Text 노드
• Attribute(속성) 노드
• Comment(주석) 노드

웹 페이지의 생성 과정

• Critical Rendering Path (CRP)
  1. 서버에서 페이지에 대한 HTML 응답
  2. 웹 브라우저가 원본 HTML 문서를 읽어 들인다.
  3. 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시한다.
• CRP의 과정
  1. 브라우저는 읽어 들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링할 지 결정
     1. DOM 트리 구축 → CSSOM 트리 구축 → JavaScript 실행
  2. 렌더 트리 구축
  3. 브라우저는 해당 렌더링을 수행
     1. 레이아웃 생성 → 페인팅
• 렌더 트리
  • 웹 페이지에 표시될 HTML 요소들과 이외 관련된 스타일 요소들로 구성
  • 렌더 트리를 생성하는 과정에서 DOM 모델과 CSSOM 모델 필요

DOM 생성 (어떻게 보여질까)?