Intersection Observer API

2016년 4월 구글 개발자 페이즈 통해 소개, MDN에서 Intersection Observer의 필요성을 아래와 같은 예를 들어 설명

• 페이지 스크롤 시 이미지를 지연 로딩 할 때
• infinite scrolling을 통해 스크롤할 때 새로운 콘텐츠를 불러올 때
• 광고의 수익을 계산하기 위해 광고의 가시성을 참고할 때
• 사용자가 결과를 볼 것인지에 따라 애니메이션 동작 여부를 결정할 때

웹사이트를 개발할 때 특정 위치에 도달했을 때 어떤 액션을 취해야 한다면 보통 addEventListener()의 scroll 이벤트가 먼저 떠오른다. document에 스크롤 이벤트를 등록하고, 특정 지점 관찰하며 엘리먼트가 위치에 도달했을 때 실행할 콜백함수를 등록 하지만,
scroll 이벤트는 단시간에 수백번, 수천번 호출될 수 있고 동기적으로 실행되기 때문 메인스레드에 영향을 준다. 또한 한페이지내에 여러 scroll 이벤트가 등록되어 있을 경우, 각 엘리먼트마다 이벤트가 등록되어 있기 때문에 사용자가 스크롤 할 때마다 이를 감지하는 이벤트가 끊임없이 호출된다. 그리고 특정 지점을 관찰하기 위해서는 getBoundingClientRect 함수를 사용해야 하는데, 이 함수는 리플로우 현상이 발생할 수 있다. 본래 브라우저는 최적을 위해 필요한 여러 작업을 묶어 큐에 쌓아 대기하다가 한번의 reflow로 처리하고자 한다. 그러나 getBoundingClientRect 호출 시 값을 정확히 읽어들이기 위해 큐를 flush하고 스타일을 적용함으로써 다 수의 reflow를 발생시킬 수 있다.
Intersection Observer API 는 루트 요소와 타겟 요소의 교차점을 관찰. 그리고 타겟 요소가 루트 요소와 교차하는지 아닌지를 구별하는 기능을 제공하고 있다. scroll 이벤트와 다르게 교차 시 비동기적으로 실행되며 가시성 구분 시 reflow 를 발생시키지 않습니다. 여러모로 성능 상 유리.

• 리플로우: 브라우저가 웹페이지의 일부 또는 전체를 다시 그려야하는 경우

Intersection Observer 인스턴스 생성

let observer = new IntersectionObserver(callback, options);

new 키워드를 통해 인스턴스를 생성 callback, options 2개의 파라미터를 받는다.

Parameters

callback

• callback: 타켓 엘리먼트가 교차되었을 때 실행할 함수

1. entries: IntersectionObserverEntry 객체의 리스트. 배열 형식으로 반환하기 때문에 forEach를 사용해서 처리를 하거나, 단일 타겟의 경우 배열인 점을 고려해서 코드를 작성
2. observer: 콜백함수가 호출되는 IntersectionObserver

options

• root
  default : null, 브라우저의 viewport
  교차 영역의 기준이 될 root 엘리먼트. observe의 대상으로 등록할 엘리먼트는 반드시 root의 하위 엘리먼트여야 한다. 즉, root는 observe의 조상요소 이어야 한다.
• rootMargin
  default: 0px 0px 0px 0px
  root 엘리먼트의 마진값. css에 margin을 사용하는 방법으로 선언할 수 있고 축약도 가능. px과 %로 표현할 수 있음. rootMargin 값에 따라 교차 영역이 확장 또는 축소
• threshold
  defalut: 0
  0.0 부터 1.0사이의 숫자 혹은 이 숫자들로 이루어진 배열로, 타켓 엘리먼트에 대한 교차 영역 비율을 의미 0.0의 경우 타켓 엘리먼트가 교차영역에 진입했을 시점에 observer를 실행하는 것을 의미 1.0의 경우 타켓 엘리먼트 전체가 교차영역에 들어왔을 때 observer를 실행하는 것을 의미

Methods

1. IntersectionObserver.observe(targetElement)
   타켓 엘리먼트에 대한 IntersectionObserver를 등록할 때(관찰을 시작할 때) 사용.
2. IntersectionObserver.unobserve(targetElement)
   타켓 엘리먼트에 대한 관찰을 멈추고 싶을 때 사용. 예시) 지연로딩 후 관찰 멈춘다. 이 경우에는 처리를 한 후 해당 엘리먼트에 대해 unobserve을 실행하면 이 엘리먼트에 대한 관찰마 멈출 수 있다.
3. IntersectionObserver.disconnect()
   다수의 엘리먼트를 관찰 이에 대한 모든 관찰을 멈추고 싶을 때 사용.
4. IntersectionObserver.takerecords()
   IntersectionObserverEntry 객체의 배열을 리턴합니다.

IntersectionObserverEntry 객체

IntersectionObserver에서 반환하는 callback은 IntersectionObserverEntry 객체의 배열을 반환.
forEach를 쓰거나 단일 타겟의 경우 배열 알맞게 사용해 IntersectionObserverEntry 객체를 알맞게 사용
IntersectionObserver를 사용할 때 반환되는 이 객체의 정보는 어떤 동작을 등록하거나 할 때 유용하게 사용할 수 있음.
1. IntersectionObserverEntry.boundingClientRect: 타켓 엘리먼트의 정보를 반환
2. IntersectionObserverEntry.rootBounds: root 엘리먼트의 정보를 반환 root를 선언하지 않았을 경우 null을 반환
3. IntersectionObserverEntry.intersectionRect: 교차된 영역의 정보를 반환.
4.intersectionRatio: IntersectionObserver 생성자의 options의 threshold와 비슷, 교차 영역에 타겟 엘리먼트가 얼마나 교차되어 있는지(비율)에 대한 정보를 반환. threshold와 같이 0.0부터 1.0 사이의 값을 반환.
5. IntersectionObserverEntry.isIntersecting: 타겟 엘리먼트가 교차 영역에 있는 동안 true를 반환하고, 그 외의 경우 false를 반환.
6. IntersectionObserverEntry.target: 타겟 엘리먼트를 반환.
7. IntersectionObserverEntry.time: 교차가 기록된 시간을 반환.

IntersectionObserver 공식 사이트
IntersectionObserver 참고사이트 1
IntersectionObserver 참고사이트 2