티스토리 뷰
이전포스팅에서 브라우저의 렌더링 과정과 Reflow, Repaint를 어떻게 최적화 할 수 있는지 대략적으로 알아보았습니다. 그중 Repaint가 일어나지 않는 CSS 속성이 있다고 간단히 언급을 했는데요, Repaint가 일어나지 않는 CSS 속성과 그 원리에 대해 알아보도록 하겠습니다.
Composite
우선 Repaint가 일어나지 않는 속성들에 대해 알아보기 전에 Composite 단계부터 짚고 넘어가야 합니다. 아래 그림은 초기 렌더링이 완료된 이후에 애니메이션이나 요소에 변화를 주어 발생하는 렌더링 흐름 입니다.
요소의 스타일을 변경하기 위해 JavaScript가 실행되고 Style변경, 계산이 다시일어납니다. 그 후 Reflow(Layout) 와 Repaint(Paint) 단계를 거치게 됩니다. Style 계산, Layout, Paint 단계에 대해서는 이전포스팅에서 자세하게 알아봤습니다. 그러면 Composite 단계는 뭘까요?
이전 포스팅에서 다루지 않았던 내용은 Paint 단계에서 여러 Layer로 나눠 픽셀을 채워넣는다는 사실 입니다. Paint 단계에서는 전체 Render Tree를 한번에 처리하여 것이 아니라 특수한 알고리즘에 따라 Layer를 나눠서 처리합니다.
이렇게 Layer를 분리함으로써 특정 요소가 수정되어 다시 Paint를 해야하는 일이 발생했을 때 변경된 Layer 만 다시 그려주면 되는 이점을 얻을 수 있습니다.
이렇게 여러 Layer로 나눠진 Raster 픽셀들을 우리가 실제로 보는 화면처럼 합성해주는 단계가 Composite 단계입니다. Paint 단계에서 그려진 여러개의 Layer를 정확한 순서에 따라 합성하여 디스플레이에 출력되는 최종 결과물을 만들어냅니다.
Reflow / Repaint
다시 본론으로 돌아와서 모든 변경사항에 있어서 모든 JavaScript > Style > Layout > Paint > Composite 모든 과정을 거칠 필요는 없다고고 이전에 소개했습니다. background-color, color, shadow등 레이아웃 크기나 위치에 영향이 가지 않는 'Paint Only' 속성을 사용하면 Layout 과정을 건너뛰고 바로 Paint 과정으로 넘어가게 됩니다.
Layout 단계를 건너뛰면 연산하는 양이 줄어들기 때문에 렌더링 속도가 개선됩니다. 따라서 Layout을 발생시키는 속성을 Paint만 발생시키는 속성으로 대체하며 렌더링 성능을 개선하는 방법이 있습니다.
Reflow가 일어나는 대표적인 속성
| position | width | height | left | top |
| right | bottom | margin | padding | border |
| border-width | clear | display | float | font-family |
| font-size | font-weight | line-height | min-height | overflow |
| text-align | vertical-align | white-space | .... |
Repaint만 일어나는 대표적인 속성
| background | background-image | background-position | background-repeat | background-size |
| border-radius | border-style | box-shadow | color | line-style |
| outline | outline-color | outline-style | outline-width | text-decoration |
| visibility | .... |
No Layout / No Paint
그런데 Layout 과 Paint 둘 다 거치지 않는 속성들이 있습니다. 현재(2019년 7월)를 기준으로는 transform, opacitiy, cursor, orphans, perspective 등이 해당됩니다.
Reflow와 Repaint를 모두 건너뛰게 되면 연산이 절대적으로 줄어들기 때문에 'Paint Only' 속성보다도 렌더링 속도가 더 빠르다고 할 수 있습니다.
위 영상은 left, top 속성을 통해 구현한 애니메이션(좌측) 과 transform: translate 를 통해 구현한 애니메이션(우측)의 프레임 비교입니다. 확연하게 transform을 통해 구현한 애니메이션이 부드럽게 보여지는 것을 확인할 수 있습니다.
transform 은 Repaint, Reflow가 일어나지 않기 때문에 높은 성능의 애니메이션을 구현할 수 있습니다. 따라서 가능한 Repaint, Reflow가 일어나지 않는 속성을 사용하는게 가장 바람직하다고 할 수 있습니다.
CSS Triggers 페이지를 통해 브라우저 엔진에 따라 각 css 속성을 처리할 때 Layout, Paint 를 실행하는지 여부를 확인할 수 있습니다. CSS의 각 속성이 Repaint를 일으키는지, Paint만 일으키는지, 아니면 둘다 일어나지 않는지를 다 외운다면 가장 좋겠지만 사실상 불가능 하다고 생각합니다. 따라서 해당 페이지를 찾아보며 구현하는 것을 추천드립니다.
마치며
이번 포스팅을 준비하며 어떻게 Paint 과정 없이 Composite 단계만으로 애니메이션이 출력되는건지 정확한 원리를 정리하려 했으나 제대로 명시된 문서를 찾을 수 없어 아쉽게도 정리하지는 못했습니다. 혹시 이에 대한 지식이나 해당 포스팅에 대한 의견이 있으시다면 댓글로 알려주시면 감사하겠습니다.
참고 자료
렌더링 성능 | Web | Google Developers
사이트와 앱이 제대로 실행되지 않으면 사용자의 주의를 끌게 되므로 렌더링 성능 최적화는 중요합니다!
developers.google.com
High Performance Animations - HTML5 Rocks
A deep dive into getting faster animations in your projects. We'll discover why modern browsers can animate these four properties cheaply: position, scale, rotation and opacity.
www.html5rocks.com