[Web] 하드웨어 가속과 IntersectionObserver

 

하드웨어 가속

인터렉션이 많은 영역은 cpu에 많은 연산을 맡기므로 렌더링에 많은 시간을 사용 

gpu와 같이 연산하면 렌더링 시간 줄일 수 있음

 

하드웨어 가속 사용 방법

animation(keyframes)

다양한 케이스에 대응하기 힘듬

 

will-change

설정한 스타일의 요소가 빠르게 렌더링하기 위해 사전에 준비함

준비하는 시간이 대략 100 ~ 200ms 정도 소요. 

남발하면 초기 렌더링이 늦어짐

 

trasform: translate3d

다양한 케이스에 대응하기 쉽고, 초기 렌더링에도 크게 영향을 주지 않는 방법

will-change와 마찬가지로 브라우저에게 하드웨어 가속해야한다고 미리 알려주고 자체 레이어로 승격시키고 gpu메모리에 할당이 되어 하드웨어가 계산을 하게 됨. 이런 레이러를 승격된 레이어라고 함

 

승격된 레이어

HTML을 파싱한 트리 구조인 DOM트리는 화면에 노출되는 요소들은 다시 Render Object로 구성됨

그렇게 구성된 Render Object는 다시 Render Layer에 할당이 됨

할당된 레이어 중에 특정 조건에 부합하는 요소들은 Graphics Layer로 분리됨

Graphics Layer로 분리된 요소들을 승격된 레이어라고 부르며, GPU에 업로드되어 빠른 렌더링 처리가 가능

 

 

하드웨어 가속은 오직 transform, opacity 속성만

렌더 프레임을 구성할 때 사진 같이 5가지 과정이 있는데, 그 중 transform, opacity 속성만 변경하면 Layout, Paint 과정을 스킵할 수 있다. 이 두과정을 스킵해야 60FPS 부드러운 인터렉션 구현이 가능. width, height, left, position, margin, padding 같은 포지셔닝 스타일 속성을 변경하는 일은 적어야 한다. 왠만하면 transform, opacity만 변경하는게 바람직.

 

렌더링을 최적화하지 않고 GPU에게 계산을 대신해달라는 것은 하드웨어 가속을 사용하는 의미를 무색하게 만든다. 

 

Lazy load는 IntersectionObserver를 활용

뷰포트에 교차되는 순간을 캐치가능하고 비동기로 동작하기에 퍼포먼스 측면에서도 이점이 많은 API

 

이미지 lazy load시 scroll event와 IntersectionObserver 성능비교

스크롤 이벤트의 경우 10 ~ 60 프레임으로 불안정한 퍼포먼스를 보여주는 반면 IntersectionObserver의 경우 50~60프레임의 안정적인 퍼포먼스를 보여줌

 

perfermance with scroll event

performance with IntersectionObserver

 

 

 

CSS properties by style operation required - Google Drive

CSS properties by style operation required - Google Drive

 

카카오웹툰은 하드웨어 가속과 IntersectionObserver를 어떻게 사용했을까? | 카카오엔터테인먼트 FE 기술블로그 (kakaoent.com)

카카오웹툰은 하드웨어 가속과 IntersectionObserver를 어떻게 사용했을까? | 카카오엔터테인먼트 FE