하드웨어 가속 - ChoDragon9/posts GitHub Wiki

원리

  1. HTML => DOM
  2. DOM => RenderObject: 실제로 브라우저에 노출할 노드
  3. RenderObject => RenderLayer: 필요에 따라 할당된다
  4. RenderLayer => GraphicsLayer: GPU 렌더링 진행할 것

방법

  • CSS 3D Transform
  • <video>, <canvas>
  • CSS3 애니메이션
  • 자식 요소가 레이어로 구성된 경우
  • z-index값이 낮은 형제 요소가 레이어로 구성된 경우.

확인 사항

  1. border-radius와 SVG에도 하드웨어 가속화를 하는가?
    • border-radius와 SVG 자체는 하드웨어 가속화하지 않음
  2. border-radius와 SVG를 레이어로 띄었을때 어떻게 보이는가?
    • 레이어로 띄어도 문제 없음

단점

측정 방법

  • Chrome > Layer 탭: GPU 렌더링한 요소를 찾을 수 있음
  • Chrome > Rendering 탭 > Frame Rendering Stats: GPU 사용율을 확인할 수 있음
⚠️ **GitHub.com Fallback** ⚠️