MutationObserver和IntersectionObserver

这两个 API 都是浏览器提供的异步观察者模式 API（避免轮询，性能更优），但核心定位和监听对象完全不同：

• MutationObserver：监听 DOM 结构 / 属性的变化（比如元素创建 / 删除、属性修改、子节点变化）；

常见应用场景：添加水印的时候背景div监听，防止水印被删除

• IntersectionObserver：监听 元素与视口（或指定容器）的交集变化（比如元素是否进入 / 离开屏幕、可见比例多少）。

常见应用场景：图片懒加载

特点：

1. 异步特性：两者的回调都是异步执行（微任务队列），不会阻塞主线程（比 setInterval 轮询性能好得多）；

2. 内存泄漏：使用完后必须调用 disconnect() 停止观察（尤其是单页应用），否则会一直监听导致内存泄漏；

3. 触发频率：

   • MutationObserver：DOM 每一次变化都会触发（可通过防抖优化）；
   • IntersectionObserver：只有元素可见性变化时触发，频率更低。