reflow & repaint

Critical Rendering Path (Pixel Pipeline)

Flow

DOM Tree + CSSOM Tree -> Render Tree -> Layout -> Paint -> Composit

DOM Tree

HTML을 parsing해서 요소들간에 관계들을 파악하고 Tree를 만든다.

CSSOM Tree

link 태그를 만나 CSS파일을 읽을 때, 각요소에 대해 스타일을 파악하고 Tree를 만든다

Render Tree

DOM + CSS 조합해서 Tree 만든다.

Layout

위치, 크기 계산

Paint

색을 채워 넣는다.

Composite

각 Layer를 합친다.

Reflow

일부 스타일이 변한다면? (width, height 변경)

처음부터 다시 돌아가서 수행. 즉 DOM + CSSOM 부터 시작

Repaint

color 변경

처음부터 다시 하되, Layout은 생략한다. 굳이 할필요가 없음
DOM + CSS > Render Tree -> Paint > Composite

Reflow, Repaint 피하기

GPU 도움을 받으면 가능

ex) transform, opacity

Reference

https://velog.io/@young_pallete/Reflow-Repaint%EC%9D%84-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90