브라우저 렌더링 원리

오늘은 브라우저 렌더링에 대해 알아보고자 한다.

 

1. HTML 파싱 후 DOM 트리 구축
2. CSS 파싱 후 CSSOM 트리 구축
3. JavaScript 실행
4. DOM과 CSSOM를 조합하여 렌더트리 구축
5. 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산 (Layout 단계)
6. 계산한 위치 및 크기를 기반으로 화면에 그림 (Paint 단계)

 

위에 과정을 통해 브라우저가 렌더링된다고 한다.

하지만 나는 아직 완벽하게 이해하지 못했기 때문에 하나씩 차근 차근 알아보고자 한다.

 

브라우저란?

동기적으로 HTML, CSS, JS 언어를 해석하여 내용을 화면에 보여주는 프로그램

 

CSSOM (CSS Object Model)

CSS 내용을 파싱하여 자료를 구조화 한 것 

즉, CSS 내용을 해석하고 노드를 만들어 트리 구조로 만든 것 (DOM 처럼!)

 

렌더트리 (Rander Tree)

웹 페이지에 나타낼 각 요소들의 위치를 계산하는데 사용되고, 픽셀을 화면에 렌더링하는 페인트를 위해 존재하는 것

 

뷰포트 (Viewport)

웹 페이지를 표시하는 화면 영역

 

Paint

렌더트리의 각 노드를 화면에 실제 픽셀로 변환하는 마지막 단계에 정보를 전달