transform 애니메이션이 성능이 더 좋은 이유

브라우저의 렌더링 과정
2021.06.04 - [개발/WEB] - TIL #28 브라우저는 어떻게 작동하는가

TIL #28 브라우저는 어떻게 작동하는가

 
먼저 브라우저의 렌더링은 간단하게 style - layout - paint- composite의 단계로 나눠지게 되는데, 
 
style의 단계에서 HTML을 통한 DOM트리 생성, CSS를 통한 CSSOM트리 생성과 Javascript 엔진에 의한 javascript 코드 해석이 일어나게 되고 해당 결과물들을 통해 render tree를 만들게 됩니다.
 
layout 단계에서는 reder tree를 기반으로 tree의 각 노드들의 크기와 위치를 계산하게 됩니다.
 
paint의 단계에서는 노드를 실제로 화면에 그리는 작업이 일어나게 되는데 이때 특정 htm태그(video, canvas)와 css속성(opacity, transform, will-change 등...)에 따라 GPU에게 일임하는 그래픽 레이어를 별도로 생성하게 됩니다.
 
composite의 단계는 그려진 paint의 레이어를 합치는 작업을 하게 됩니다.

---

transform 애니메이션의 장점 

reflow : 생성된 DOM 노드의 레이아웃(너비, 높이 등) 변경 시 영향받는 모든 노드(자식, 부모)의 수치를 다시 계산하여 렌더 트리를 재생성하는 작업입니다.

 
CSS의 transform 속성은 CPU가 아닌 GPU에서 처리됩니다.
 
GPU는 반복되는 작업의 병렬처리에 최적화되어있는 장치이고 CPU의 메인 쓰레드와는 별개로 작동합니다.
이러한 특징 때문에 transform 속성을 사용해 애니메이션을 구현할 경우 CPU의 부하를 덜고 더 나은 하드웨어의 성능을 기대할 수 있게 됩니다.
 
transform 속성은 애니메이션이 일어날 경우 위에서 언급한 paint 단계에서 그래픽 레이어로 구분되기 때문에 reflow가 일어나지 않게 되고 이후 composite 단계의 작업만 발생하게 되기 때문에 훨씬 효율적인 렌더링이 가능해집니다.

---

참고

https://mong-blog.tistory.com/entry/CSS-%EC%99%9C-transform-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EC%84%B1%EB%8A%A5%EC%9D%B4-%EC%A2%8B%EC%9D%84%EA%B9%8C-with-GPU-Reflow

[CSS] 왜 transform 애니메이션 성능이 좋을까? (with. GPU, Reflow)

https://ssocoit.tistory.com/258

[CSS] Blink엔진에서 transform 속성은 Reflow와 Repaint가 발생하지 않는다

---