Intersection Observer API가 스크롤 기반 감지의 성능 문제를 해결하고 이미지 지연 로딩과 무한 스크롤을 구현하는 방법을 소개한다

Context

getBoundingClientRect()와 scroll 이벤트 리스너 조합은 페이지 레이아웃을 반복 재계산하여 성능 저하를 야기한다. 모바일 환경에서 jank 현상과用户体验 악화가 특히 두드러진다.

Technical Solution

• IntersectionObserver 인스턴스 생성 시 콜백 함수와 options 객체 전달
• options.root에 null 설정 시 브라우저 뷰포트를 기준 엘리먼트로 사용
• rootMargin 속성으로 뷰포트 경계 확장 가능 (예: '0px 0px 100px 0px'로 100px 앞서 로딩)
• threshold를 0.0~1.0 사이 값으로 설정하여 가시율 기준 정의
• entry.isIntersecting 플래그로 엘리먼트 진입/이탈 상태 감지
• observer.unobserve() 호출로 일회성 관찰 중지

Impact

레이아웃 재계산 빈도가 감소하여 메인 스레드阻塞 현상이 해소되고, LCP 및 CLS 등 Core Web Vitals 지표 개선에 기여

Key Takeaway

Intersection Observer는 브라우저 최적화 비동기 메커니즘에 감시 작업을 위임하여 레이아웃 스래싱을 원천 차단하는 선언적 API이다