페인트와 합성과정에서의 최적화

(이 글은 아래의 영상 시리즈 속 내용을 바탕으로 제작되었습니다.)

www.youtube.com/watch?v=yJo9lZAEqb0&list=PLAwxTw4SYaPl09X4Rljhy7dZinRCzbHz6

 

 

페인트 성능 추적 방법

 

*페인트 성능을 추적하기 위해, performance 탭 뿐만 아니라 개발자 도구의 'Show pain rectangle' 기능을 활용할 수도 있습니다. 이를 사용하면 단순히 paint 가 일어나고 있다는 것 뿐만 아니라 일어나지 않아야할 영역에서 일어나고 있는 것은 아닌지도 체크해볼 수 있습니다.

 

*페인트 프로파일링은 퍼포먼스 탭에서 Enable Advanced Paint Instrumentation 을 체크하면 수행할 수 있습니다. 체크가 된 상태라면 녹색 페인트 flame 을 클릭했을 때 Summary 가 위치한 하단 탭에서 Paint Profiler 를 볼수 있습니다.

 

 

 

레이어를 활용한 합성의 장점

 

화면을 레이어 단위로 분할해서 보여주지 않았다면 화면상에 어떤 그래픽 변화가 생기더라도 페인트가 실행되어야 할 것입니다. 그러나 따로 그래픽 요소 자체가 변한게 아니라면 단순히 레이어의 위치를 바꾸거나 순서를 바꾸는 것만으로, 그리고 특정 레이어에만 페인트를 수행하는 것만으로 많은 그래픽 동작을 구현할 수 있게 됩니다.

 

 

 

Update Layer Tree

 

스타일과 레이아웃 과정이 끝난 후, 바로 페인트로 넘어가는 것이 아니라, 크롬에서는 'Update Layer Tree' 라는 과정을 거칩니다. 이 과정을 통해 각 레이어안의 요소들의 순서가 어떻게 되어야 하며 얼마나 많은 레이어가 필요한지를 계산합니다. 이 과정이 끝나서야 'Composite Layers' 가 트리거되면서 합성이 수행됩니다. 더 많은 레이어가 있을 수록, 합성에 걸리는 시간도 많아집니다. 즉, 어떻게 보면 레이어를 늘리는 것이 더 많은 처리시간을 필요로 하는 것처럼 보이지만, 페인트 시간을 크게 줄일 수 있는 이점을 얻을 수 있습니다.

 

 

 

레이어 관리하기

 

크롬 개발자 도구에서 ctrl + shift + p 를 누르고 'show layers' 를 누르면 레이어 구성 전체를 볼 수 있는 패널로 넘어갑니다. 또한, 하단 패널의 rendering 탭에서 'Layer Borders' 를 클릭하면 레이어들을 나누는 테두리들을 볼 수 있습니다. 아마 가장 기본이 되는 레이어가 여러 파란색 테두리의 격자로 나뉜 것을 볼 수 있을텐데, 이는 브라우저가 사용하는 렌더링 단위가 이러한 격자들이기 때문입니다. 우리가 제어할 수 있는 것은 아니니 일단 신경 꺼도 괜찮습니다. 주목할 부분은 주황색 테두리로 덮인 부분입니다. 그 부분이 개별 레이어들임을 우리는 알 수가 있습니다.

 

레이어의 분리는 css 속성을 바탕으로 쉽게 할 수 있습니다. will-change : transform 을 입력하면 브라우저가 해당 요소에 대한 transform 작업을 준비하게 함으로써 이 요소를 개별 레이어로서 뺄수가 있지만, 이 속성을 지원 안하는 브라우저가 있을 수 있으니 transform: translateZ(0) 를 수행하는 것도 하나의 방법입니다(참고로 translateZ 와 같은 3D 속성이 레이어 분리에 사용되는 것입니다. 단순히 x, y 위치를 바꾸기만 해서는 분리가 일어나지 않습니다). 둘 다 일단 집어넣고 브라우저가 이 중 하나를 사용하도록 만드는 것이 가장 일반적인 방법입니다.

 

*투명도, 요소의 위치 변경 등만이 필요한 애니메이션은 이렇게 레이어를 분리하여 이들을 합성하는 과정만 다시 거치도록 만드는 것이 중요합니다.

 

*레이어를 많이 분리하는 것은 대체로 좋은 선택이지만, 60fps 를 유지하기 위해서는 update layer tree 과정과 합성 과정이 2ms 이하로 걸릴 수 있도록 레이어 수를 조절해야 합니다.

 

 

 

레이어 생성시 주의사항

 

만일 레이어로 분리하기로 결정한 요소와 조금이라도 겹치는 부분이 존재하는 다른 요소가 있다면, 브라우저는 요소들이 그려지는 순서를 유지하기 위해서라도 그 겹침이 발생한 요소까지 같이 개별 레이어로 분리시켜 버립니다. position 속성과 top, left 등을 조작해서 요소를 이동시켰을 때 이들이 개별 레이어가 되어버리는 이유이기도 합니다.

 

하나의 요소를 개별 레이어로 만들고자 할때는, 그 요소와 겹치는 다른 요소까지 개별 레이어로 만들어비릴 위험에 항상 주의하십시오. 레이어가 많아지면 성능이 무조건 올라갈 것이라고 생각해서는 안됩니다. 왜냐하면 그렇게 하면 메모리를 너무 많이 잡아먹게 되며 레이어를 합성하는 시간이 너무 길어져서 성능에 오히려 악영향이 갈 수 있기 때문입니다. 이는 특히 모바일 환경에서 치명적입니다.