Web Rendering Pipeline

Creator

Creator

Created

Created

2023 Mar 13 2:22

Editor

Editor

Edited

Edited

2023 Mar 13 2:22

Refs

Refs

요청한 html 파일 받아오면 렌더링 시작 (request/response)

받은 파일 로딩 (loading)

html 파싱해서
DOM 생성 (scripting)

link 태그를 만나 css를 파싱하여

CSSOM 트리를 생성 (scripting)

DOM과 CSSOM으로 렌더트리를 생성 (rendering)

불필요한 태그나 콘텐츠가 있는지 확인

Operation Part

Render Tree를 이용해 구조 형성 및 배치 계산을 하여 화면의 픽셀로 변환합니다

각 노드의 위치 및 크기 계산 (layout)

화면의 픽셀로 변환 (painting)

paint가 자주 일어나지않도록 만드는 것이 중요

layout transition이 재발생될 경우는 최악의 성능

The pixel pipeline

The pixel pipeline

CSS properties and their initial step in the pixel pipeline

CSS properties and their initial step in the pixel pipeline

Recommendations

////////