Reflow, Repaint, Composite

이전 포스팅에서 다루었던 브라우저 렌더링 과정에서 언급되었던

Reflow, Repaint 그리고 Composite에 대해서 알아보려고한다

Composite

Composite은 Paint단계 다음에 일어나는 과정으로 Render 트리에 두 개 이상의 Layer가 존재한다면

각각의 Layer를 병렬적으로 Paint한 후 Layer들을 합치는 과정이다

브라우저에 시각적 변화가 일어날 때

유저가 웹에서 상호작용을 하면서 시각적 변화가 일어날 때 브라우저는 조건에 따라 각각 다음과 같은 변화가 일어난다

Reflow

레이아웃의 높이, 너비, 그리고 위치 등에 변화 그리고 DOM이 추가되거나 삭제되면 Reflow가 일어난다

Reflow는 그림에서 보이는 부분을 모두 수행해야하며 다른 모든 노드의 위치를 다시 계산하고 영향을 받은 부분을 찾아내어 다시 Paint한다

가장 리소스를 많이 잡아먹는 과정

Repaint

Reflow에서 언급했던 것 외의 변화 배경 이미지, 텍스트 색상, 그림자 등의 변화가 일어나면 Repaint가 일어난다

이 과정은 그림처럼 Layout을 건너뛰기 때문에 Reflow보다는 리소스를 덜 잡아 먹는다

Composite

위의 두 가지 스타일의 변화를 일으키지 않는 시각적 변화는 두 단계를 건너뛰고 Composite 과정만 실행하게 된다

---

최적화를 위한 노력

글을 봤다면 알겠지만 최적화를 위해서는 Reflow가 최소한으로 발생하게끔 개발을 해야한다

내가 건드리려고 하는 스타일이 어떤 단계를 수행할지는 어림잡아서 짐작할 수도 있지만 명확하게 알기는 힘들다

모두 외울 수는 없는 노릇이니.. 해당 사이트를 참고하자

그 외에도 다음과 같은 경우들을 참고하자

• 스타일을 변경할 경우 가장 하위 노드의 클래스를 변경한다
• 인라인 스타일을 사용하지 않는다
• 애니메이션이 있는 노드는 position을 fixed 또는 absolute로 지정한다
• 퀄리티, 퍼포먼스의 타협점을 찾는다
• <table> 레이아웃을 피한다
• IE의 CSS 표현식을 사용하지 않는다
• CSS 하위 선택자를 최소화한다
• 숨겨진 노드의 스타일을 변경한다
• 클래스를 혹은 cssText 사용하여 한 번에 스타일을 변경한다
• DOM 사용을 최소화한다
• 캐시를 활용한다

참고

https://beomy.github.io/tech/browser/reflow-repaint/
https://cresumerjang.github.io/2019/06/24/critical-rendering-path/