[web] 브라우저 랜더링 원리

SINGING BIRD·2024년 4월 16일

1. html 파싱

브라우저는 서버로부터 html 문서를 수신받고, html 문서를 분석합니다.
html 문서의 구조를 파악한 브라우저는
DOM (document object model) 트리를 생성합니다.

2. CSS 파싱

브라우저는 CSS 코드를 파싱하여 CSSOM (CSS object model) 트리를 생성합니다.

3. 랜더 트리 구축

DOM 트리와 CSSOM 트리를 결헙하여 랜더 트리를 구축합니다.
랜더 트리는 페이지를 랜더링할 때 필요한 모든 요소들을 포함합니다.

4. 레이아웃 단계

구축된 랜더 트리를 기반으로 각 요소들의 정확한 위치와 크기를 계산합니다.

5. 페인팅 단계

레이아웃 단계에서 계산된 값에 따라 각 요소를 화면에 그립니다.


profile
good things take time

0개의 댓글