하드웨어 가속화
이 글은 naver D2의 글을 참고하여 작성하였습니다.
예전 브라우저는 웹 페이지 콘텐츠의 렌더링을 대부분 CPU에 의존했다.
하지만 최근에는 GPU가 기본으로 포함되고 비디오나 3D 그래픽과 같은 콘텐츠의 사용이 늘면서 GPU를 활용해 웹 페이지의 콘텐츠를 렌더링하는 방법을 고민하게 됐다.
GPU를 렌더링에 활용하는 하드웨어 가속을 사용하면 성능 향상이라는 이점을 얻을 수 있지만 무분별하게 사용하면 오히려 해가 될 수도 있다.
하드웨어 가속은 GPU를 활용하기 때문에 GPU 가속이라고도 부른다. 먼저 하드웨어 가속의 기본 이론을 살펴보고 하드웨어 가속을 사용하는 방법을 설명하겠다.
웹페이지 렌더링 과정
HTML파일을 응답받고 파싱되면 브라우저는 태그들을 가지고 DOM 트리로 구성한다.
브라우저는 화면에 표현되는 요소를 RenderObject 트리로 구성한다.
head, script와 같은 화면에 표시되지 않는 태그들은 renderObject가 아닌 것이다.
RenderObject 트리의 노드는 z-index 속성이나 중첩 등을 처리하기 버거웠다.
그렇게 이러한 문제를 처리하기 고안된 RenderLayer에 대응된다.
RenderLayer 가운데 실제 화면에 출력돼야 하는 노드는 다시 GraphicsLayer를 생성한다. 최상위(root) 노드나 canvas, video 등이 GraphicsLayer를 생성하는 RenderLayer다.
하드웨어 가속은 GraphicsLayer 단위로 렌더링된 이미지를 GPU를 이용해 한 장의 이미지로 합성해서 화면에 출력하는 기술이다.
하드웨어 가속 대상
- CSS 3D Transform(translate3d, preserve-3d 등)이나 perspective 속성이 적용된 경우
- <video> 또는 <canvas> 요소
- CSS3 애니메이션함수나 CSS 필터 함수를 사용하는 경우
- 자식 요소가 레이어로 구성된 경우
- z-index 값이 낮은 형제 요소가 레이어로 구성된 경우. 레이어로 구성된 요소의 위에 위치하면 해당 요소도 레이어로 구성된다.
하드웨어 가속 적용 시키기
<div class="gpu" style="transform:translateZ(0);">...</div> 이 코드는 tag에 css transform을 적용시키므로써 하드웨어 가속을 적용 시킨 코드이다.
