일단 Intersection Observer란 타겟 엘리먼트와 타겟의 부모 혹은 상위 엘리먼트의 뷰포트(viewport)가 교차되는 부분을 비동기적으로 관찰하는 API이다.

여기서 뷰포트란 현재 화면에 보여지고 있는 다각형의 영역을 말한다. = 화면

한마디로 화면에 내가 지정한 엘리먼트가 보여지고 있는지를 관찰하는 API를 말한다.

장점

1. reflow를 하지 않는다.

스크롤 이벤트는 현재의 높이 값을 알기 위해 offsetTop을 사용하는데 정확한 값을 가져오기 위해 매번 렌더 트리를 다시 그린다. 이것을 reflow라고 하는데, 이 과정이 반복되면 브라우저의 성능이 저하되고, 화면의 버벅거림이 생길 수 밖에 없다.

1. 호환성

IE를 제외하면 대부분의 브라우저에서 지원된다.

참고

Intersection Observer - 요소의 가시성 관찰

Intersection Observer 간단 정리하기