IntersectionObserver, MutationObserver, ResizeObserver

🚩 IntersectionObserver

https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API

특정 요소가 뷰포트 또는 다른 특정 요소와 교차하는지를 비동기적으로 감지할 수 있게 해준다. 

 

기존에는 scroll 이벤트를 통해 두 요소 사이의 가시성을 감지했지만, IntersectionObserver는 관찰 대상 요소가 뷰포트에 들어오거나 나갈 때만 콜백 함수를 실행한다. 이 과정은 비동기적으로 이루어지므로, 메인 스레드의 작업을 방해하지 않고 필요한 경우에만 콜백 함수를 실행한다.

 

옵션 설정

const options = {
  root: document.querySelector("#scrollArea"),
  rootMargin: "0px",
  threshold: 1.0,
};

const observer = new IntersectionObserver(callback, options);

• root
  • 교차점을 감시하는데 사용되는 요소. 반드시 타겟의 상위 요소이어야 한다.
  • 기본값은 뷰포트
• rootMargin
  • root 요소의 범위를 설정
  • 기본값은 0

이미지 출처
https://wilsotobianco.hashnode.dev/a-graphical-introduction-to-the-intersection-observer-api
https://www.smashingmagazine.com/2021/07/dynamic-header-intersection-observer/

• threshold
  • 콜백이 실행되는 교차 비율
  • 기본 값은 0 (1px이라도 보이면 콜백 실행)
  • 1은 타겟 요소가 100% 보일때
  • [0, 0.25, 0.5, 1] // 0.25는 25% 보일 때, 0.5는 50% 보일 때 

🚩 MutationObserver

https://developer.mozilla.org/ko/docs/Web/API/MutationObserver

DOM 요소의 속성, 자식 노드 등의 변화를 감지하고 콜백 함수를 실행한다.

 

MutationObserver는 기존의 Mutation Event를 대체하며 비동기적으로 동작한다. 변화를 감지한 후, 콜백을 마이크로태스크큐에 추가하므로  메인 스레드의 작업을 방해하지 않는다.

 

옵션 설정

// 변경을 감지할 노드 선택
const targetNode = document.getElementById("some-id");

// 감지 옵션 (감지할 변경)
const config = { attributes: true, childList: true, subtree: true };

const observer = new MutationObserver(callback);

// 설정한 변경의 감지 시작
observer.observe(targetNode, config);

• attributes
  • 요소의 속성(attribute) 변화를 감지
• childList
  • 자식 노드의 추가 및 제거를 감지
• subtree
  • 모든 하위 노드의 추가, 제거 및 변경을 감지
• attributeOldValue
  • 속성의 이전 값을 기록
• characterData
  • 텍스트 노드의 변경을 감지
• characterDataOldValue
  • 텍스트 노드의 이전 값을 기록
• attributeFilter
  • 감지할 속성의 이름일 지정, 지정된 속성만 변화가 감지된다.
  • attribute가 true 설정된 경우만 유효
  • ['class', 'id', 'style', ...] 

 

🚩 ResizeObserver

https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

요소의 크기 변화를 감지하고 콜백 함수를 실행한다.

 

기존의 resize 이벤트는 브라우저 창 크기 변화를 감지하며 동기적으로 작동한다. 반면, ResizeObserver는 특정 요소의 크기 변화만 감지하고, 비동기적 처리하여 메인 스레드의 작업을 방해하지 않는다.

const divElem = document.querySelector("body > div");

const resizeObserver = new ResizeObserver(callback);

resizeObserver.observe(divElem);