용어 사전 coding 용어 페이지

IntersectionObserver

타겟이 특정 가시성 임계값을 넘을 때 콜백을 실행해 주는 관찰자 API

intersection-observer #performance#javascript

English version

다른 이름

인터섹션 옵저버

관련 개념

지연 로딩 requestAnimationFrame 부분 갱신 DocumentFragment

핵심 아이디어

IntersectionObserver는 스크롤 이벤트를 직접 다루지 않고도 요소의 진입·이탈을 감지합니다. 원하는 임계값을 걸어 한 번만 호출하거나, 가시성 비율에 따라 다른 동작을 수행할 수 있습니다.

이 블로그에서의 역할

Mathbong의 지연 로딩 실습은 이 API를 통해 지연 로딩을 깔끔하게 구현하는 방법을 보여 줍니다. 불필요한 스크롤 계산을 없애고, 렌더 함수가 다루는 데이터가 커져도 성능을 유지하게 해 줍니다.

이 개념을 다루는 글

[JavaScript 시리즈 17편] 퍼포먼스 기초: 페인트·리플로와 지연 로딩 렌더링 단계, layout thrashing 방지, 이미지 지연 로딩, 관찰자 API로 성능을 지키는 방법을 다룹니다.[JavaScript Series 17] Performance Basics: Paint, Reflow, and Lazy Loading Understand how the browser draws web pages, learn how to prevent common layout slowdowns, and apply lazy loading with easy-to-follow code.[JavaScript 시리즈 4편] DOM 선택과 이벤트로 화면 움직이기 querySelector, classList, addEventListener를 사용해 버튼, 입력 폼, 리스트를 조작하는 실전 DOM 패턴을 정리합니다.