피드로 돌아가기
Dev.toFrontend
원문 읽기
Main-thread 부하 제거를 통한 Viewport 감지 최적화
Intersection Observer API : Understand in 3 Minutes
AI 요약
Context
Scroll event 리스너와 getBoundingClientRect() 기반의 수동 위치 계산으로 인한 성능 저하 발생. 잦은 메인 스레드 점유로 인해 모바일 기기의 배터리 소모 증가 및 UI Jank 현상 초래.
Technical Solution
- Browser-native API 활용을 통한 스크롤 이벤트 핸들링 제거
- 별도의 최적화 스레드에서 인터섹션 연산을 처리하는 비동기 구조 채택
- Threshold 설정을 통한 가시성 임계치 기반의 선택적 콜백 트리거 설계
- RootMargin 도입으로 뷰포트 진입 전 사전 로딩을 위한 버퍼 존 형성
- Observer 인스턴스와 Target 요소를 분리하여 다수 요소의 효율적 추적 관리
- IntersectionObserverEntry 객체를 통한 상태 변경 중심의 선언적 데이터 처리
실천 포인트
- 이미지 및 iframe의 Lazy-loading 적용 시 RootMargin을 통한 사전 로딩 최적화 검토 - 무한 스크롤 구현 시 하단 Sentinel 요소를 배치하여 추가 데이터 페칭 트리거로 활용 - 픽셀 단위의 정밀한 좌표 계산이 필요한 Parallax 효과에는 getBoundingClientRect() 유지 - 가시성 상태 변경 시에만 동작하는 콜백 구조로 CPU 오버헤드 최소화