Intersection Observer API

지니씨·2022년 12월 4일
0

프론트엔드

목록 보기
48/87

https://heropy.blog/2019/10/27/intersection-observer/

https://velog.io/@elrion018/%EC%8B%A4%EB%AC%B4%EC%97%90%EC%84%9C-%EB%8A%90%EB%82%80-%EC%A0%90%EC%9D%84-%EA%B3%81%EB%93%A4%EC%9D%B8-Intersection-Observer-API-%EC%A0%95%EB%A6%AC

http://blog.hyeyoonjung.com/2019/01/09/intersectionobserver-tutorial/

https://simian114.gitbook.io/blog/undefined/javascript/intersectionobserver

Intersection Observer API의 사용 이유

scroll 이벤트는 스크롤시 짧은 시간 내에 수백, 수 천개의 이벤트가 동기적으로 실행될 수 있다.
페이지 내에 각 요소가 각기의 목적(광고, 레이지 로딩, 무한 스크롤 등)의 이유로 scroll 이벤트를 리스닝하기 때문에 이에 상용하는 콜백이 무수히 실행될 수 있다.
이는 메인 스레드에 큰 부하를 줄 수 있다.

getBoundingClientRectreflow를 발생시킬 수 있다.
브라우저는 최적화를 위해 필요한 여러 작업을 묶어 큐에 쌓아 대기하다가 한 번의 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

profile
하루 모아 평생 🧚🏻

0개의 댓글