브라우저의 렌더링 원리
브라우저의 렌더링 원리
브라우저가 화면에 나타나는 요소를 렌더링 할 때, 렌더링 엔진을 사용.
렌더링 엔진
브라우저 마다 상이한, 렌더링을 수행하는 렌더링 엔진이 있음.
- 크롬: 블링크(Blink)
- 사파리: 웹킷(Webkit)
- 파이어폭스: 게코(Gecko)
이 때, 렌더링 엔진이 HTML, CSS, JavaScript로 렌더링 시 크리티컬 렌더링 패스(CRP)라는 과정을 거친다.
CRP, 크리티컬 렌더링 패스
CRP는 Critical Rendering Path, 중요 렌더링 경로라고도 말함.
브라우저가 HTML, CSS, JavaScript를 화면에 픽셀로 변화하는 일련의 단계라 설명.
CRP는 Document Object Model (DOM), CSS Object Model (CSSOM), 렌더 트리, 레이아웃을 포함.
HTML + CSS + JS 렌더링 방식
- HTML를 파싱 후, Document Object Model (DOM)을 구성.
- CSS를 파싱 후, CSS Object Model (CSSOM)을 구성.
- 만약, HTML 중간에 스크립트가 있다면 HTML 파싱이 중단되고 JavaScript 실행.
- DOM과 CSSOM이 합쳐진 렌더 트리를 구축.
display: none과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더 트리 구축 X.
- 렌더 트리는 각 HTML 요소가 가지는 정확한 위치와 크기를 계산. (Layout 단계)
- 계산한 위치와 크기를 기반으로 화면을 그림. (Paint 단계)
용어 보충
파싱
하나의 프로그램을 런타임 환경이 실제로 실행할 수 있는 형식으로 변환하는 것을 의미.
즉, 문서의 내용을 토큰(token)으로 분석하고,
문법적 의미와 구조를 반영한 파스 트리(parse tree)를 생성하는 과정.
DOM
DOM(Document Object Model), 웹 페이지를 이루는 태그들을 브라우저가 트리구조로 만든 객체 모델을 의미.
여기서 문서 객체는 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 객체를 의미.
DOM은 HTML과 스크립팅 언어(JavaScript)를 서로 이어주는 역할을 함.
CSSOM
CSSOM(CSS Object Model), CSS 내용을 파싱하여 자료를 구조화 한 것을 말함.
즉, DOM처럼 CSS의 내용을 해석하고 노드를 만들어 트리 구조로 만든 것을 의미.
렌더트리
렌더 트리는 CSSOM과 DOM 트리의 결합으로 만들어짐.
렌더 트리는 웹 페이지에 나타낼 각 요소들의 위치를 계산하는데 사용됨.
이 때, 픽셀을 화면에 렌더링하는 (Paint 단계) => 즉, 화면에 요소들을 표현하는 프로세스를 위해 존재.
Layout
뷰포트 내에서 노드의 정확한 위치와 크기를 계산.
경우에 따라 Reflow 라고도 함.
Paint
노드와 해당 노드의 계산된 스타일 및 기하학적 형태에 대해 파악.
렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하는 마지막 단계에 이러한 정보 전달.