카카오웹툰 개발의 하드웨어 가속과 IntersectionObserver 활용

이 게시물은 카카오웹툰의 프론트 개발에서 하드웨어 가속과 IntersectionObserver를 어떻게 사용했는지 설명합니다.

하드웨어 가속의 필요성

• GPU를 이용한 렌더링 성능 개선
• transform, opacity 속성 변경을 통한 최적화
• 렌더링 최적화를 위한 최소한의 스타일 변경 권장

IntersectionObserver 사용

웹에서 lazy load 구현을 위해 IntersectionObserver를 사용하여 뷰포트에 진입할 때 이미지를 로드하도록 하였습니다. 퍼포먼스 테스트 결과, IntersectionObserver가 스크롤 이벤트보다 안정적인 성능을 보였다고 합니다.