Skip to content

Latest commit

 

History

History
92 lines (67 loc) · 5.09 KB

하드웨어_가속화.md

File metadata and controls

92 lines (67 loc) · 5.09 KB
Raw

하드웨어 가속화

하드웨어 가속화란 웹 성능을 높이기 위해서 사용하는 방법의 하나다.

참고 브라우저_내부_살펴보기

예전 브라우저에서는 하나의 웹페이지에 접속하면 해당 페이지를 CPU만 사용해서 렌더링했다.

기술이 발전하게 되면서 이제는 스마트기기에도 GPU가 탑재되었고, 브라우저 Vendor들은 아까운 GPU를 브라우저 렌더링하는 데 사용하게 되었다. 실제로는 우리도 모르는 사이에 브라우저 렌더링에 GPU를 사용하고 있다.

우리가 생각하기에 GPU를 사용한다고 하면 3D 그래픽 작업, 애니메이션에서만 사용하겠지 생각하지만, 브라우저에서도 화면을 그리는 작업 등에 적용되어있다.

graphicLayer

우리 눈에는 보이지 않지만 실제로는 많은 Tree가 만들어지고 사용되고 있다. 위 그림의 간단한 설명을 하자면,

  • DOM Tree : HTML 코드를 파싱한 Tree로, HTML 문서의 각 Element를 쉽게 처리(추가, 삭제 등)하기 위하여 브라우저 엔진에서 사용하는 Tree이다.
  • RenderObject Tree : DOM Tree로부터 만들어지는 Tree로, DOM Tree 노드 중 실제로 화면에 표현되는 노드만으로 구성된 Tree이다.
  • RenderLayer : 브라우저 엔진이 하드웨어 가속 등을 처리하기 위해 사용하는 논리적인 레이어로, 각 RenderObject(화면을 구성하는 데 쓰이는 정보를 가진) 속성에 따라 RenderLayer에 할당한다.
  • GraphicsLayer : 하드웨어 가속 처리를 위한 물리적인 레이어로, 레이어별 RenderObject를 GraphicsLayer단위로 렌더링한 뒤 최종적으로 GPU를 통해 합성(Composite 단계)

하드웨어 가속은 웹 페이지의 일부 Element가 아닌 모든 Element를 GPU를 통해 합성하는데, 최상위 레이어(root layer) 개념이 있어서 <body> Hi </body> 같은 단순한 HTML을 처리할 때도 GraphicsLayer가 생성되며 GPU 텍스처(texture)로 업로드되어 합성한 후 화면에 출력된다.

텍스처 : 메인 메모리(예: RAM)에서 비디오 메모리(예: GPU VRAM)로 이동되는 비트맵 이미지라고 생각하면 된다.

하드웨어 가속

하드웨어 가속은 GraphicLayer 단위로 렌더링된 이미지를 GPU를 이용해 한 장의 이미지로 합성(Composition)해서 화면에 출력하는 기술이다.

  1. HTML 코드를 통해 DOM Tree를 구성하고, 화면에 표현되는 Element는 RenderObject Tree로 구성(필요한 경우 RenderLayer로 매핑)한다.
  2. RenderLayer Element 가운데 GPU에 업로드되는 Element는 다시 GraphicsLayer로 분리되며, 레이어 각각을 독립적인 소프트웨어 비트맵으로 출력한다.
  3. GPU에 텍스처로 올린다.
  4. 다양한 레이어를 화면에 표시할 최종 이미지로 함께 합성한다(Composite).

가속 대상

RenderLayer에 포함되는 Element 가운데 다음의 조건 중 한 가지에 부합하면 GraphicsLayer 로 설정된다.

  • CSS 3D Transform(translate3d, preserve-3d 등) 또는 perspective 속성이 적용된 경우.
  • <video> 또는 <canvas> 인 경우.
  • CSS3 애니메이션 함수나 CSS 필터 함수를 사용하는 경우.
  • 자식 Element가 레이어로 구성된 경우.
  • z-index 값이 낮은 형제 Element가 레이어로 구성된 경우. 레이어로 구성된 Element의 위에 위치하면 해당 Element도 레이어로 구성된다.
  • will-change이 추가된 경우.

주의 사항

  • 무분별한 하드웨어 가속은 오히려 브라우저를 느리게 한다.
  • Element에 하드웨어 가속 속성이 부여되면 즉시 대상 영역이 GPU에 업로드되며, 이때 업로드되는 영역이 크면 화면이 깜빡이는 현상이 발생될 수 있다.
  • Element에 하드웨어 가속 속성이 부여되면 레이어로 분리되며, 레이어는 변경되는 내용이 없는 한 Element를 GPU 메모리에 다시 업로드하지 않는다.
  • 하드웨어 가속 속성을 사용한 Element의 내용이 변경되면 GPU 메모리가 갱신되므로 Element의 내용을 미리 변경한 다음 하드웨어 가속 속성을 부여한다.
  • 성능이 낮은 기기에서 하드웨어 가속을 사용하면 오히려 성능 저하를 가져올 수 있다.

예시

<style>
#a, #b {
  position: absolute;
}
#a {
  left: 10px;
  top: 10px;
  z-index: 2;
  animation: move 1s linear;
}
#b {
  left: 50px;
  top: 50px;
  z-index: 1;
}
@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(70px); }
}
</style>

<div id="a">A</div>
<div id="b">B</div>

Transform과 will-change이란?

Reference