YooBlog

Critical Rendering Path

2023-10-26
post-thumbnail
 
 

DOM

Document Object Model
 
💡
HTML를 브라우저가 이해할 수 있는 객체로 변환한 것
 
  • 페이지 구조를 나타내는 트리 구조
  • javascript를 이용하여 문서의 구조, 스타일, 내용을 조작할 수 있습니다.
 
 
notion image
 
(이미지 출처)
 
  • Document
    • DOM의 최상위 노드로, 웹 페이지 전체를 나타내는 인터페이스
    • 메서드
      • document.getElementById(), document.createElement(), document.querySelector()
  • Node
    • DOM의 기본적인 인터페이스
    • 모든 DOM 노드는 Node 인터페이스를 상속받아서 공통적인 메서드와 프로퍼티를 공유합니다.
    • parentNode, childNodes, appendChild()
  • Element
    • DOM에서 특정한 요소를 나타내는 인터페이스
    • ex: html 요소, <div>, <p>, <a> ...
    • Element 인터페이스는 Node를 상속받기 때문에 Node의 메서드와 프로퍼티뿐만 아니라, Element(요소)와 관련된 추가적인 메서드와 프로퍼티들도 가지고 있습니다.
      • getAttribute(), setAttribute(), innerHTML …
 
 
 

CSSOM

CSS Object Model
 
💡
CSS 규칙을 브라우저가 이해할 수 있는 객체로 변환한 것
  • 각 요소에 어떤 스타일이 적용되어야 하는지 계산합니다.
  • JavaScript를 사용하여 동적으로 스타일을 변경하거나 추가할 수 있습니다.
 
 
notion image
이미지출처
 
 

RenderTree

💡
실제로 화면에 표시되는 요소들로 이루어진 트리 구조
  • DOM 트리와 CSSOM을 결합하여 생성
  • DOM과 CSSOM은 각각 HTML 문서와 그 문서의 스타일 정보를 나타내는 두 가지 다른 객체 모델입니다. DOM은 HTML 문서의 요소와 구조를 표현하고, CSSOM은 이러한 요소들의 스타일을 나타냅니다.
  • 보이지 않는 것들, meta 태그나 display:none 요소는 제외됨
 
 

Critical Rendering Path

💡
HTML, CSS, Javascript를 브라우저가 이해할 수 있도록 변환하고 최종 화면을 생성하기 까지의 일련의 단계
  • 이를 최적화하는 것은 렌더링 성능을 향상시킵니다.
 
  1. 주소를 입력하면 페이지에 필요한 파일(html, css, javscript …)들을 서버에 요청합니다.
  1. HTML을 읽고 파싱하여 페이지의 구조를 나타내는 DOM을 생성합니다.
  1. CSS을 읽고 파싱하여 스타일 규칙을 담은 CSSOM을 생성합니다.
  1. HTML와 CSS를 결합하여 실제 화면에 보여질 요소들로 짜여진 Renter Tree를 생성합니다.
  1. 브라우저는 렌더 트리를 기반으로 각 노드의 크기, 위치 등을 계산하는 레이아웃(Layout) 단계를 거칩니다.
  1. 레이아웃이 완료되면 브라우저는 화면을 그리는 페인팅(Paint) 단계로 넘어갑니다.
  1. 마지막 합성(Compositing) 단계에서 각 요소를 별도의 레이어로 관리하고, 이러한 레이어를 조합하여 최종 화면을 생성합니다. 이를 통해 변화가 일어난 부분만을 다시 그리게 되어 성능을 향상시킵니다.
 

유현지

안녕하세요

홈으로