✏️ 브라우저 렌더링 과정(Critical Render Path)

Critical Render Path 

브라우저에 해당 HTML을 받아오면 HTML에 있는 CSS,JS를 받아오고, 각각의 그릴 준비를 한다.

 

 

이미지로 한눈에 보면 편한데

HTML을 파싱해서 DOM트리를 만들고, CSS를 파싱해서 CSSOM을 만든다.

이후에 두개의 트리를 합치고 레이아웃 계산, 페인팅 단계로 넘어간다.

 

 

위치 그리기 = 레이아웃 = 리플로우

색칠하기 = 페인트 = 리페인트

 

 

레이아웃과 페인트는 크롬에서 이렇게 부르고

리플로우와 리페인트는 다른 브라우저에서 이렇게도 불린다.

 

색칠과정을 끝내고 합성(Composite)단계가 있는데

이것은 각각의 레이어들을 쌓고 쌓아서 합성을 한다.

 

 

 

더 오래 걸리는 작업은 결국 Reflow !

화면이 바뀌거나 레이어가 이동할 때 리플로우로 다시 그리고 색칠을 해야하기 때문에 리플로우 과정이 더 오래걸릴 수 있어 성능 최적화 문제가 있을 수 있다.

 

 

리플로우 현상을 줄여야하고, 레이아웃 시프트 현상이 일어나는데 시프트 현상을 줄여야한다.

깜빡이는 현상을 Shift현상이라고 한다!