https://heropy.blog/2019/10/27/intersection-observer/
http://blog.hyeyoonjung.com/2019/01/09/intersectionobserver-tutorial/
https://simian114.gitbook.io/blog/undefined/javascript/intersectionobserver
Intersection Observer API의 사용 이유
scroll 이벤트는 스크롤시 짧은 시간 내에 수백, 수 천개의 이벤트가 동기적으로 실행될 수 있다.
페이지 내에 각 요소가 각기의 목적(광고, 레이지 로딩, 무한 스크롤 등)의 이유로 scroll 이벤트를 리스닝하기 때문에 이에 상용하는 콜백이 무수히 실행될 수 있다.
이는 메인 스레드에 큰 부하를 줄 수 있다.
getBoundingClientRect은 reflow를 발생시킬 수 있다.
브라우저는 최적화를 위해 필요한 여러 작업을 묶어 큐에 쌓아 대기하다가 한 번의 reflow로 처리하지만 getBoundingClientRect 호출시 값을 정확히 읽어들이기 위해 큐를 flush하고 스타일을 적용함으로써 다수의 reflow를 발생시킬 수 있다.
Intersection Observer API (https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)는 루트 요소와 타겟 요소의 교차점을 관찰한다.
scroll 이벤트와 다르게 교차시 비동기적으로 실행되면 가시성 구분시 reflow를 발생시키지 않는다.
polyfill
https://github.com/w3c/IntersectionObserver
사용 불가한 상황
Intersection Observer API 는 스크롤 속도에 상관없이 교차가 이루어지는 상황을 판단하기에 유효한 광고 노출을 체크하지 못한다.
스크롤 방향 확인
https://stackoverflow.com/questions/46478202/how-do-i-know-the-intersectionobserver-scroll-direction
이미지 지연 로딩
이미지 영역 크기 지정 필요
http://yoonbumtae.com/?p=2847
