Critical Rendering Path

Critical Rendering Path

construction part. , operation part.

request/response -> loading -> scripting -> rendering -> layout-> painting -> composition

operation part.

 

 

 

 

construction part.

request/response -> loading -> scripting -> rendering ->

request/response :
브라우저가 서버에게 html  파일 요청 시 
1. html 먼저 요청 후

서버는 응답

2. 그 파일안에서 링크된 필요한 파일들 resources (css/image) 받아온다.

 

loading :
html 파일을 서버에서 받아서 로딩.

scripting :
html을 한줄 한줄 파싱하면서  DOM 요소로 변환 1.DOM 트리 생성,
CSS 파일을 읽고 2.CSSOM 트리 생성

 

rendering :
DOM 트리 + CSSOM 트리 → 브라우저에 표기될 요소들인 Render Tree 생성

 

 

 

operation part.

-> layout-> painting -> composition

layout : 
Render Tree 각 요소들의 위치와 크기 계산 (width,height,x,y)

 

paint:
레이어별로 나눠서  준비만해두는 단계

ex) z-index , opacity 등등

composition:
준비한 레이어를  순서대로 브라우저 위에 보여줌.

 

geekyants.com/blog/flutter-for-web---under-the-hood

Flutter For Web - Under The Hood