브라우저 렌더링 과정

 

총 6단계

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

 

▶︎ 브라우저의 주요 기능

: 사용자가 요청한 HTML 페이지, PDF, 이미지 등을 서버에서 요청해 보여주는 것

 

▶︎ 랜더링 엔진

: 사용자가 선택한 콘텐츠를 표시해주는 소프트웨어

브라우저	렌더링 엔진
크롬	Blink
사파리	Webkit
파이어폭스	Gecko

 

▶︎ 파싱(Parsing)

• 브라우저가 코드를 이해하고 사용하기 쉬운 구조로 변환하는 것
• 문서나 HTML 등 어떤 큰 자료에서 내가 원하는 정보만 가공하고 추출해서 원할 때 불러올 수 있게 하는 것
• 파서(Parser): 파싱을 수행하는 프로그램

 

▶︎ HTML 파싱 → DOM 트리 구축

1. 브라우저는 서버에 보낸 요청을 2진수 형태로 응답받음
2. meta태그의 charset 어트리뷰트에 지정된 인코딩 방식을 기준으로 문자열 변환
3. 문법적 의미를 갖는 코드의 최소단위인 토큰으로 분해
4. 토큰들은 객체로 변환하여 노드(DOM을 구성하는 기본 요소)들을 생성
5. 노드들로 구성된 트리 자료구조인 DOM 생성

DOM 트리

 

▶︎ CSS 파싱 → CSSOM 트리 구축

1. 렌더링 엔진이 HTML을 파싱하다가 link 태그 또는 sytle태그를 만나면 DOM 생성을 일시 중단
2. 어트리뷰트에 지정된 css파일을 서버에 요청
3. HTML파싱과 동일한 파싱과정을 거쳐 CSSOM 생성 (2진수 -> 문자 -> 토큰 -> 노드 -> CSSOM )
4. HTML 파싱이 중단된 지점부터 다시 HTML 파싱

CSSOM 트리

 

▶︎ JavaScript 실행

HTML 파일에서 <script> 태그를 만나면 중간에 JS가 실행된다.

HTML 파싱 로직

 

▶︎ 렌더트리

DOM + CSSOM => Render Tree

 

▶︎ Layout 단계 - 레이아웃 생성

뷰포트(viewport) 크기에 맞게 레이아웃이 결정된다.

뷰포트: display상의 표시 영역. 브라우저 display에 맞게 레이아웃이 결정됨.

 

 

▶︎ Paint 단계

• 눈에 보이는 내용을 픽셀로 변환해서 브라우저에 표시.
• 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하는 단계.
• 이 단계를 '페인팅' 또는 '래스터화'라고 함.

 

 

 

 

참고

medium.com/@pac11.dev

Code ON 코드온

github.com/Esoolgnah