웹최적화 - Reflow 와 Repaint

 

Reflow ? Repaint ? 브라우저 렌더링 과정을 공부할 때 나왔던 단어들이다.

그 전까지는 그렇게 깊이 생각해본 적은 없었지만, 최적화를 공부하면서 이들의 존재감에 대해서 깨닫게 되었다.

이들은 무엇이고 왜 존재감이 생겼을까?

 

브라우저 렌더링의 과정을 간단히 알아보면 

dom + cssom  트리를 각각 만들어서 → 렌더 트리를 만들어내고  → 각 요소들의 사이즈를 계산해 자리를 배치하는 레이아웃을 거친 뒤

 → 그 레이아웃 요소들에 페인트하는 페인트 단계를 거친다  → 그 모든 걸 조합하는 컴포짓해서 화면에 내보낸다

 

---

 

웹최적화 - Reflow 와 Repaint

여기서 css 요소가 변경이 되면 Reflow 와 Repaint 를 거친다.

 

Reflow는 이모든  단계를 다시 거치는 것이고

DOM + CSSOM → 렌더트리 → 레이아웃  → 페인트  → Composite

 

Repaint는 렌더 단계에서 레이아웃을 생략하는 것이다. 페인트 단계만 재실행(Repaint)된다.

DOM + CSSOM → 렌더트리 → 레이아웃  → 페인트  → Composite

 

언제 Reflow 을 할까?

레이아웃에 영향을 미치는 width, margin 등의 속성이 변화하면

레이아웃을 다시 계산하고 페인트의 과정을 다시 실행한다.

 

언제 Repaint 를 할까?

요소의 스타일을 결정하는 color, border-radius, outline 등의 속성이 변경되면

레이아웃은 그대로이므로 브라우저에서는 페인트의 과정만 다시 실행한다.

 

어떻게 Reflow 와 Repaint 를 생략할까? 

transform 과 opacity 속성은 두과정이 생략된다. 레이아웃이나, 페인트 시에 변경되는게 아니라 GPU가 직접 관여하기 때문이다.

 

 

Reflow, Repaint, GPU 에 영향을 미치는 CSS

reflow 는 주로 레이아웃에 영향을 주는 속성에 대한 css (사이즈 관련),

repaint 는 주로 내부요소의 스타일을 변경시키는 css (스타일 관련),

GPU 는 transform  과 opacity 속성에 영향을 받는다.

Reflow	Repaint	GPU(Reflow, Repaint 생략)
position width height, min-height, max-height top, left, right, bottom margin padding border, border-witdh display float overlfow font-family, font-size, font-weight line-height text-align vertical-align ...	background background-image background-position background-repeat background-size border-radius, border-style box-shadow color line-style text-decolation outline, outline-color, outline-style ...	transform opacity