Intersection Observer API란?

브라우저에서 요소의 가시성 혹은 관련된 두 요소 사이의 상대적 가시성을 감지하는 것은 해결책을 신뢰할 수 없고 브라우저와 사용자가 접근하는 사이트를 느리게 만드는 어려운 작업이었음

Web이 성숙해짐에 따라, 이러한 종류의 정보의 요구가 늘어났음

• 페이지가 스크롤 될 때 이미지 또는 다른 컨텐츠의 lazy loading
• 스크롤을 통해 데이터를 불러오는 무한 스크롤 기능
• 광고 수익 산정을 위해 광고 가시성 보고 등등

Intersection Observer API가 탄생하기 전에는 이벤트 핸들러에 Element.getBoundingClientRect() 와 같은 메서드를 호출하는 루프를 포함하였음

모든 코드가 메인 스레드에서 실행되기 때문에 성능 문제를 일으킬 수 있었고 테스트와 함께 사이트가 로드될 때 UI가 깨질 수 있었음

무한 스크롤을 사용하는 웹 페이지에서 주기적으로 페이지에 배치되는 광고를 관리하기 위해 공급업체가 제공하는 라이브러리를 사용하고, 여기저기에 애니메이션 그래픽이 있으며, 공지 박스 같은 것들을 그리는 사용자 정의 라이브러리도 사용한다고 가정해봅시다

이 각각에는 요소의 가시성을 감지하는 루틴이 있고 모두 메인 스레드에서 실행됩니다. 웹 사이트 제작자는 라이브러리의 내부 동작을 깊게 알지 못하기 때문에 어떤 일이 일어나는지 알지 못할 것입니다.

이러한 요소 가시성 감지 로직은 스크롤 처리 코드가 실행되는 동안 지속적으로 발생하여 사용자가 브라우저, 웹사이트, 컴퓨터에 불편을 느끼게 함

이때 Intersection Observer API는 특정 요소가 다른 요소(또는 viewport)와의 교차점에 들어가거나 나갈 때 또는 두 요소 간의 교차점이 지정된 양만큼 변화될 대 실행되는 콜백 함수를 코드에 등록할 수 있음

이 방식으로, 브라우저는 더이상 요소의 가시성을 감시하기 위해 메인 스레드에서 아무것도 할 필요가 없어짐

하지만 Intersection Observer API가는 겹치는 픽셀의 정확한 수나 구체적으로 어떤 픽셀이 겹치는 지에 대해서는 알려주지 않음. 이 API는 약 n%가 겹친다면 어떤 작업을 수행해야 하는지 알려줌

Intersection Observer API의 개념

Intersection Observer API는 다음과 같은 상황이 발생했을 때 호출되는 콜백 함수를 구성할 수 있음

• 관찰 대상 요소가 뷰포트 또는 특정 요소와 교차함. 특정 요소는 Intersection Observer API의 목적에 따라 루트 요소 또는 루트라고 불림

Intersection Observer API 사용하기

Intersection Observer 생성

const options = {
	root : document.querySelector("#scrollArea"),
	rootMargin : "0px",
	threshold: 1.0,
}

const observer = new IntersectionObserver(callback, options)