웹 브라우저에 대해서 (3)

웹 브라우저에 대해서 (3)

한 줄 정리

내용

CSS 파싱(CSS Parsing)

HTML 파싱을 통해 DOM을 생성하는 것과 유사하게 CSS 파싱 또한 CSSOM(CSS Object Model)을 생성한다.

과정 또한 매우 유사한게, Bytes → Characters → Tokens → Nodes → CSS Object Model 순으로 진행된다.

그림 1) CSSOM

페이지 내 모든 요소들의 스타일을 적용될 때, 해당 노드의 스타일은 부모 요소로부터 상속을 받게된다.

렌더 트리(Render Tree)

렌더 트리는 DOM 트리 및 CSSOM을 결합하여 생성된다.

렌더 트리는 표시되는 레이아웃을 계산하고 사용되는 픽셀을 화면에 렌더링하는 페인트 프로세스에 대한 입력으로 처리된다. 이 때 시각적인 요소들을 화면에 나타나는 순서대로 생성한다.

그림 2) 렌더 트리

순서

HTML 구문 분석 시작 스타일 태그 생성 파서는 DOM 트리 빌드를 일시 중지하지 않고 CSSOM 빌드 프로세스 시작 DOM 트리 구축 + CSSOM 구축 브라우저가 렌더 트리 구축 시작

장점과 단점

장점

내용

단점

내용

참고자료

Web - 렌더링 트리 생성, 레이아웃 및 페인트

from http://mystudy.tistory.com/22 by ccl(A) rewrite - 2021-12-13 09:27:07