Intersection Observer API를 통한 이벤트 최적화

기존 Scroll 이벤트 문제

기존 Scroll 이벤트는 단시간에 많은 양이 호출될 수 있고 동기적으로 실행되기 때문에 메인 스레드(Main Thread)에 영향을 준다.

 

또한 한 페이지 내에 여러 scroll 이벤트(무한 스크롤, 광고 배너, 애니메이션 등)가 등록되어 있을 경우, 각 엘리먼트마다 이벤트가등록되어 있기 때문에 사용자가 스크롤할 때마다 이를 감지하는 이벤트가 끊임 없이 호출이 된다.(이를 해결하기 이전 포스팅에서 디바운싱_Debouncing을 통해 문제를 개선하였다)

 

그리고 특정 지점을 관찰하기 위해서는 getBoundingClientRect() 함수를 사용해야 하는데, 이 함수는 리플로우(reflow) 현상을발생시킨다는 단점이 있다.

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

 

Intersection Observer API

Intersection Oberver API(교차 관찰 API)를 사용하여 위와 같은 문제를 해결할 수 있다.비동기적으로 실행되기 때문에 메인 스레드에 영향을 주지 않으면서 변경 사항을 관찰할 수 있다.

 

또한 IntersectionObserveEntry의 속성을 활용하면 getBoundingRect()를 호출한 것과 같은 결과를 알 수 있기 때문에 리플로우 현상을 방지할 수 있다.

const fetchMoreObserver = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if(!entry.isIntersecting) {
      return;
    }
    fetchMore();
  })
});
fetchMoreObserver.observe(fetchMoreTrigger);

이전 포스팅의 무한 스크롤 예제 코드를 Intersection Observer API를 이용하여 리팩토링하였다.

스크롤의 끝 부분에 감시를 할 엘리먼트(fetchMoreTrigger)를 두고 해당 엘리먼트가 노출이 될 때마다 콘텐츠를 추가로 불러오도록 작성하였다.

const fetchMoreObserver = new IntersectionObserver(([{isIntersecting}]) => {
    if(isIntersecting) fetchMore();
});
fetchMoreObserver.observe(fetchMoreTrigger);

위와 같이 isIntersecting 프로퍼티를 디스트럭쳐링 할당하면 forEach()문을 생략할 수 있다.

이때 이중으로 디스트럭쳐링 할당을 하게 되는데, 이는 감시해야 될 엘리먼트들이 배열에 적재되기 때문이다.

해당 예제에서는 감시해야 될 대상 엘리먼트는 하나이고 그 중 필요한 프로퍼티는 isIntersecting이기 때문에 해당 사항을 적용할 수 있다.