브라우저 렌더링

브라우저 렌더링 과정

1. DOM 및 CSSOM 트리 생성
2. Render Tree 생성
3. Layout
4. Paint
   개별 노드를 화면에 페인트 (화면의 픽셀로 변환)

DOM 및 CSSOM 트리 생성

• 바이트 → 문자 → 토큰 → 노드 → 객체 모델
• HTML 마크업 👉 DOM(Document Object Model)
• CSS 마크업 👉 CSSOM(CSS Object Model)
  (추가) CSS가 트리 구조인 이유? CSS는 하향식으로 적용하므로!

Render Tree 생성

• DOM 트리와 CSSOM 트리를 결합하여 렌더링 트리를 형성
• 렌더링 트리는 각 요소의 레이아웃을 계산하는데 사용되고 픽셀을 화면에 렌더링하는 페인트 프로세스에 대한 입력으로 처리.
• 화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보를 모두 포함

렌더링 차단🚫 리소스

CSS는 렌더링 차단 리소스로 취급되는데 CSSOM이 생성될 때까지 브라우저는 처리되는 모든 콘텐츠를 렌더링 하지 않아요. 왜? CSS가 적용되지 않은 페이지는 사용성이 떨어지므로.
(특정 상황에서만 사용되는 CSS 스타일이 있다면 '미디어 유형'과 '미디어 쿼리'를 사용해서 차단을 해제할 수 있다. ➡ 성능 개선)

자바스크립트로 상호작용 추가

• 자바스크립트는 DOM 및 CSSOM을 수정할 수 있다.
• 자바스크립트 실행은 CSSOM을 차단
• 브라우저가 스크립트 태그를 만나면 이 스크립트가 실행 종료될 때까지 DOM 생성이 일시 중지 ➡ 비동기로 선언

렌더링 최적화

최초 렌더링 시 최대한 빠르게 렌더링 하려면? 다음 세 가지 변수를 최소화

• 주요 리소스의 수
• 주요 경로 길이
• 주요 바이트의 수

Layout

• 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산
• 문서가 클수록, 스타일이 많을수록 시간⬆

Paint🎨

• 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환

Reference

📗 브라우저 렌더링 과정
📗 주요 렌더링 경로