MutationObserver

js에는 총 5개의 Observer Interface가 있다.

MutationObserver, ResizeObserver, IntersectionObserver, PerformanceObserver, ReportingObserver.

그중 MutationObserver에 대해서 가볍게 알아보았다.
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
MutationObserver는 특정 dom 요소의 구조 변경을 감지한다. 주로 3가지 요소

• 속성 변화
• 텍스트 콘텐츠의 변화
• 자식 노드나 하위 노드에 대해 위 2가지 속성들과 추가 및 제거
  를 감지한다.

생성자와 3가지 메소드도 보유하고 있다.

• observer(target, option) : target 감시 시작
• disconnect() : 감시 해제
• takeRecords() : 관련된 콜백 함수 스택 초기화

작동원리 및 사용법은 다음과 같다.
0) MutationObserver 생성자에 등록할 콜백 함수를 만든다.
1) 콜백 함수를 인자로 Observer 객체를 만든다.
2) Observer 객체를 변화 감지를 원하는 DOM 요소에 붙인다.(observe 메소드)
3) 변화를 감지한다. (콜백 함수 실행됨)

Js의 이벤트 처리는 Call Stack, Microtask queue, Macrotask queue로 구성되어 있다.
모든 작업은 Call Stack을 통해 처리되지만, 어떤 작업은 Microtask queue에, 어떤 작업은 Macrotask queue에 쌓인 뒤 Call Stack이 비어있다면 Microtask, Macrotask순으로 작업을 Call Stack으로 가져가 처리한다. 이때 Microtask이 비기 전까지 Macrotask에 있는 작업을 가져가지 않는다.
MutationObserver은 microtask queue를 사용하지만, 나머지 4개는 macrotask를 사용한다.
때문에 효율적인 비동기 처리와 사용자의 반응성을 높일 수 있다.