Introduce
- 웹 렌더링은 전통적으로 CPU에 의존했으나, 최근 GPU(하드웨어 가속)를 많이 활용
- GPU를 렌더링에 활용하는 하드웨어 가속을 사용하면 성능 향상의 이점
- 그러나 무별하게 사용하면 오히려 해가 될 수 있음
- 여기서는
- 하드웨어 가속의 기본적 이론
- 하드웨어 가속을 사용할 때 유의 사항
will-change CSS 명세를 이용한 하드웨어 가속
하드웨어 가속이란
- 하드웨어 가속
- Graphics Layer 단위로 렌더링 된 이미지를
- GPU가 한 장의 이미지로 합성(Composition)해 화면에 출력하는 기술
- 브라우저가 웹 페이지를 렌더링하기까지의 과정
- HTML 소스 로딩 & 파싱
- DOM Tree 구성
- 화면에 표현되는 요소와 그렇지 않은 요소로 구성됨
<head> 또는 <script> 는 화면에 표현되지 않음
- Render Object Tree 구성
- Render Layer 구성
z-index 와 같은 레이어 개념을 처리하기 위해 고안된 Layer Tree
- Graphics Layer
- Render Layer 요소 중 GPU에 업로드 될 요소
- 레이어 각각을 이미지로 출력해 하드웨어 가속에 사용
- GPU에 업로드 된 이미지는 연산을 통해 화면에 표시될 최종 이미지로 합성
- GPU에 업로드 된 이미지 = 3차원 그래픽 표면에 다양한 형태로 매핑 가능
- 이동, 변형(Transformation)과 같은 작업도 이미지를 매핑하는 형태로 진행
- GPU의 도움으로 더 적은 비용 & 다양한 선형 변환을 할 수 있게 됨
- Render Layer 요소 중 아래 조건 하나 이상에 부합되는 경우 하드웨어 가속 대상
- 가속 대상에 포함되었는지 확인할 수 있는 방법
- 최상위 레이어
<body>Hi</body> 와 같은 단순한 HTML 처리 시에도 Graphics Layer 생성- 따라서 항상 하나 이상의 Graphics Layer가 존재하게 됨
유의 사항
- 성능 향상을 기대할 수는 있으나, 모든 요소를 대상으로 적용하면 안 됨
- 무분별한 하드웨어 가속은 되려 성능 하락으로 이어짐
- 하드웨어 가속 대상이 되면 GPU에 업로드
→ 이 때 영역이 크면 깜빡이는 현상이 발생될 수 있음
- 하드웨어 가속 속성이 부여되면 Graphics Layer로 분리
→ 변경되는 내용이 없으면 GPU 메모리에 다시 업로드하지 않음
- 하드웨어 가속 대상이 된 이후 요소의 내용이 변경되면 GPU 메모리가 갱신
→ 모든 변경 이후 하드웨어 가속 속성을 부여하는 것이 좋음
- 성능이 낮은 기기에서는 부적절
- 그 외 고려 사항들
- 하드웨어 가속을 적용하는 요소의 크기는 작을수록 좋음
- 요소의 개수는 화면에서 5~6개로 구성하는 것이 좋음
- 하드웨어 가속을 결정하는 CSS 프로퍼티의 값에 따라 요소의 영역이 커질 수도 있다는 것을 유의
- 가령
text-indent 또는 left 의 값을 -9999px 같이 해버리면 콘텐츠 영역의 크기가 늘어나며 - 따라서 Graphics Layer 크기도 증가하기에 불필요하게 메모리 사용하게 됨
- 내용이 자주 변경되지 않는 영역에 하드웨어 가속을 적용
- 내용이 아닌 이동이나 크기가 자주 변경되는 영역에만 하드웨어 가속을 적용
- 내용이 변경되면 GPU 메모리가 갱신되기에 불필요하게 리소스가 낭비됨
will-change CSS 프로퍼티
- Graphics Layer 생성 비용 = 높음
translate3d() 등의 Layer-Hack을 이용해 하드웨어 가속
→ 무의미한 CSS 프로퍼티까지 하드웨어 가속에 포함되어 성능 저하 발생 가능will-change 프로퍼티를 이용해 어떤 CSS 프로퍼티가 동적으로 변할지 브라우저에게 알려줌
.some {
will-change: transform, opacity;
}
브라우저에서 지정된 CSS 프로퍼티를 변경하기 위한 작업을 사전에 최적화더 효율적으로 Graphics Layer 생성이 가능다만 브라우저는 최적화를 위해 일정 시간 동안 데이터를 캐싱
→ 더 이상 하드웨어 가속을 사용하지 않으면 해당 프로퍼티를 제거하는 것이 좋음
