웹 애니메이션 GPU가속
왜 GPU 인가?
메모리를 GPU 메모리에 복사하는것은 굉장히 빠르다. 수 많은 코어들이 동시에 픽셀 컬러를 계산한다. 순식간에 텍스쳐를 합성하고 동시에 다른 일을 할 수 있다.
GPU 가속
브라우저는 대상 요소를 GPU 메모리에 올려서 저장하고 CSS3 transform 3D 속성을 주게 되면 가속화를 사용한다. GPU의 메모리를 활용하기 때문에 애니메이션의 품질과 성능이 향상된다.
가속 대상
- CSS3 3D Transform
— translate3d, preserve-3d, translateZ, backface-visibility 등 - CSS Animation, CSS Filter
- video, canvas
- 자식 엘리먼트가 레이어로 구성된 요소
- z-index가 낮은 형제 엘리먼트가 레이어로 구성된 레이어
주의 사항
- 가속 속성이 부여되면 레이어로 분리되고, 레이어는 변경되는 내용이 없는 한 요소를 다시 GPU에 업로드 하지 않는다.
- 가속 속성을 사용한 요소의 내용이 변경되면 GPU 메모리가 갱신된다.
- GPU 가속을 하게되면 GPU의 할당된 VRAM을 활용한다.
— VRAM은 상당히 제한적이므로 대용량 이미지에는 사용을 지양한다.
GPU 가속 조건
- Layout (reflow)이 일어나지 않아야 한다.
— Layout: 생성된 Dom node 의 레이아웃 수치( position-top, -left, -right, -bottom, width, height ..) 를 다시 계산하여 렌더 트리를 재생성하는 과정.
Tips
— GPU 가속을 받는 대상은 GPU메모리를 할당받고 있어 GPU 가속의 필요가 종료된 시점에서 visibility: hidden 혹은 display: none 처리를 한다.
- visibility: hidden; — 엘리먼트의 텍스쳐를 지운다.
- display: none; — 자료구조(Render Object)를 지움으로 당연히 메모리를 할당받지 않는다.
