IntersectionObservers는 관찰된 요소가 브라우저의 표시 영역에 진입하거나 빠져나가는 때를 알려줍니다.
DOM의 요소가 표시되는 표시 영역에 들어가는 시점을 추적하려 한다고 가정해 보겠습니다. 제때에 이미지를 지연 로드하거나 사용자가 실제로 특정 광고 배너를 보고 있는지 알아야 하는 경우 이 방법을 사용할 수 있습니다. 스크롤 이벤트를 연결하거나 주기적 타이머를 사용하고 그 요소에서 getBoundingClientRect()를 호출하면 됩니다.
그러나 이 접근 방식은 getBoundingClientRect()를 호출할 때마다 브라우저가 전체 페이지의 레이아웃을 다시 지정해야 하므로 웹사이트에 상당한 버벅거림이 발생하므로 고통스러울 수 있습니다. 사이트가 iframe 내에서 로드되고 있다는 것을 알고 있으며 사용자가 언제 요소를 볼 수 있는지 알고자 하면 법적 사안이 거의 불가능해집니다. 단일 출처 모델과 브라우저를 사용하면 iframe이 포함된 웹페이지의 데이터에 액세스할 수 없습니다. 이는 iframe을 사용하여 자주 로드되는 광고 등에서 흔히 발생하는 문제입니다.
이 공개 상태 테스트를 더 효율적으로 만들기 위해 IntersectionObserver는 설계되었으며 모든 최신 브라우저에 제공됩니다. IntersectionObserver를 사용하면 관찰된 요소가 브라우저의 표시 영역에 진입하거나 이탈하는 시점을 알 수 있습니다.
IntersectionObserver을 만드는 방법
이 API는 비교적 작으며, 다음 예를 사용하여 설명하는 것이 가장 좋습니다.
const io = new IntersectionObserver(entries => {
console.log(entries);
}, {
/* Using default options. Details below */
});
// Start observing an element
io.observe(element);
// Stop observing an element
// io.unobserve(element);
// Disable entire IntersectionObserver
// io.disconnect();
IntersectionObserver의 기본 옵션을 사용하면 요소가 부분적으로 뷰에 들어올 때와 표시 영역을 완전히 벗어날 때 모두 콜백이 호출됩니다.
여러 요소를 관찰해야 하는 경우 observe()를 여러 번 호출하여 동일한 IntersectionObserver 인스턴스를 사용하여 여러 요소를 관찰하는 것이 좋습니다.
entries 매개변수는 IntersectionObserverEntry 객체의 배열인 콜백에 전달됩니다. 이러한 각 객체에는 관찰된 요소 중 하나에 대해 업데이트된 교차로 데이터가 포함됩니다.
🔽[IntersectionObserverEntry]
time: 3893.92
🔽rootBounds: ClientRect
bottom: 920
height: 1024
left: 0
right: 1024
top: 0
width: 920
🔽boundingClientRect: ClientRect
// ...
🔽intersectionRect: ClientRect
// ...
intersectionRatio: 0.54
🔽target: div#observee
// ...
rootBounds는 기본적으로 표시 영역인 루트 요소에서 getBoundingClientRect()를 호출한 결과입니다. boundingClientRect는 관찰된 요소에서 호출된 getBoundingClientRect()의 결과입니다. intersectionRect는 이 두 직사각형의 교집합이며 관찰된 요소의 어떤 부분이 표시되는지 효과적으로 알려줍니다. intersectionRatio는 밀접하게 관련되어 있으며 요소가 얼마나 보이는지 알려줍니다. 이 정보를 원하는 대로 활용하면 애셋이 화면에 표시되기 전에 적시 로드와 같은 기능을 구현할 수 있습니다. 효율적으로
IntersectionObserver는 데이터를 비동기식으로 전달하며 콜백 코드는 기본 스레드에서 실행됩니다. 또한 사양에는 실제로 IntersectionObserver 구현이 requestIdleCallback()를 사용해야 한다고 나와 있습니다. 즉, 제공된 콜백에 대한 호출은 우선순위가 낮으며 유휴 시간에 브라우저에서 호출됩니다. 이는 신중한 설계 결정입니다.
스크롤 div
요소 안에서 스크롤하는 것을 좋아하지는 않지만, 판단하기 위해 그렇게 할 필요는 없으며, IntersectionObserver도 마찬가지입니다. options 객체는 표시 영역의 대안을 루트로 정의할 수 있는 root 옵션을 사용합니다. root는 관찰된 모든 요소의 상위 항목이어야 합니다.
모든 것을 교차시킵니다.
아니요 개발자님! 사용자의 CPU 사이클 사용에 신경쓰지 않는 것입니다. 무한 스크롤러를 예로 생각해 보겠습니다. 이 시나리오에서는 DOM에 센티널을 추가하고 이를 관찰하고 재활용하는 것이 좋습니다. 무한 스크롤러의 마지막 항목 근처에 센티널을 추가해야 합니다. 이 센티널이 표시되면 콜백을 사용하여 데이터를 로드하고, 다음 항목을 만들고, DOM에 연결하고, 적절하게 센티널 위치를 변경할 수 있습니다. 센티널을 올바르게 재활용하면 observe()를 추가로 호출할 필요가 없습니다. IntersectionObserver는 계속 작동합니다.
소식을 더 많이 전해 주세요
앞서 언급했듯이 콜백은 관찰된 요소가 부분적으로 시야에 들어올 때 한 번, 그리고 표시 영역을 벗어날 때 또 한 번 트리거됩니다. 이렇게 하면 IntersectionObserver에서 '요소 X가 시야에 있나요?'란 질문에 대한 답을 얻을 수 있습니다. 그러나 일부 사용 사례에서는 이것만으로는 충분하지 않을 수 있습니다.
이러한 경우 threshold 옵션이 사용됩니다. 이를 통해 intersectionRatio 기준점의 배열을 정의할 수 있습니다. intersectionRatio가 이러한 값 중 하나를 넘을 때마다 콜백이 호출됩니다. threshold의 기본값은 [0]이며 기본 동작을 설명합니다. threshold를 [0, 0.25, 0.5, 0.75, 1]로 변경하면 요소의 4분의 1이 추가로 표시될 때마다 알림이 전송됩니다.
다른 옵션은 없나요?
현재 위에 나열된 옵션 외에 한 가지 추가 옵션만 제공됩니다. rootMargin를 사용하면 루트의 여백을 지정하여 교차로에 사용되는 영역을 효과적으로 늘리거나 줄일 수 있습니다. 이러한 여백은 CSS 스타일 문자열 á la "10px 20px 30px 40px"를 사용하여 지정되며 각각 상단, 오른쪽, 하단 및 왼쪽 여백을 지정합니다. 요약하면 IntersectionObserver 옵션 구조는 다음과 같은 옵션을 제공합니다.
new IntersectionObserver(entries => {/* … */}, {
// The root to use for intersection.
// If not provided, use the top-level document's viewport.
root: null,
// Same as margin, can be 1, 2, 3 or 4 components, possibly negative lengths.
// If an explicit root element is specified, components may be percentages of the
// root element size. If no explicit root element is specified, using a
// percentage is an error.
rootMargin: "0px",
// Threshold(s) at which to trigger callback, specified as a ratio, or list of
// ratios, of (visible area / total area) of the observed element (hence all
// entries must be in the range [0, 1]). Callback will be invoked when the
// visible ratio of the observed element crosses a threshold in the list.
threshold: [0],
});
<iframe> 매직
IntersectionObserver은(는) 광고 서비스와 소셜 네트워크 위젯을 염두에 두고 특별히 설계되었으며, 이러한 위젯은 <iframe> 요소를 자주 사용하며 현재 화면에 보이는지 여부를 파악하면 도움이 됩니다. <iframe>가 요소 중 하나를 관찰하면 <iframe>를 스크롤하거나 <iframe>가 포함된 창을 스크롤하면 적절한 시점에 콜백을 트리거합니다. 그러나 후자의 경우 출처 간 데이터 유출을 방지하기 위해 rootBounds가 null로 설정됩니다.
IntersectionObserver 무엇을하지 않습니까?
IntersectionObserver는 의도적으로 픽셀이 완벽하거나 짧은 지연 시간이 아니라는 점에 유의해야 합니다. 스크롤에 종속된 애니메이션과 같은 작업을 구현하는 데 사용하면 실패할 수 있습니다. 엄밀히 말하면 데이터를 사용할 시점에는 데이터가 오래되기 때문입니다. 설명서에서 IntersectionObserver의 원래 사용 사례에 관한 자세한 내용을 확인할 수 있습니다.
콜백으로 얼마나 많은 작업을 할 수 있나요?
Short 'n Sweet: 콜백에 너무 많은 시간을 소비하면 앱이 지연됩니다. 모든 일반적인 관행이 적용됩니다.
여러 요소로 이동하여 교차합니다.
IntersectionObserver는 모든 최신 브라우저에서 사용할 수 있으므로 제대로 지원됩니다. 필요한 경우 이전 브라우저에서도 폴리필을 사용할 수 있으며 WICG 저장소에서 사용할 수 있습니다. 당연히 네이티브 구현에서 제공하는 폴리필을 사용하면 성능상의 이점을 얻을 수 없습니다.
지금 바로 IntersectionObserver을(를) 사용할 수 있습니다. 생각한 내용을 알려주세요.