浏览器API MutationObserver、IntersectionObserver和ResizeObserver

以下是 MutationObserver、IntersectionObserver 和 ResizeObserver 的核心区别及适用场景的总结：

---

1. MutationObserver

作用

监听 DOM 树的变化（如节点增删、属性修改、文本内容变化等）。

关键特性

• 观察类型：

  • 子节点变动（childList）
  • 属性变动（attributes）
  • 文本内容变动（characterData）
  • 子树变动（subtree，递归监听子节点）
• 触发时机：DOM 变化后异步触发回调。

• 性能优化：通过批量处理减少频繁回调。

  典型场景

• 动态内容加载（如无限滚动时监听新元素插入）。
• 表单输入实时校验（监听输入框内容变化）。
• 第三方脚本入侵检测（如广告屏蔽）。

示例代码

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    console.log("DOM 发生变化:", mutation.type);
  });
});

observer.observe(document.body, {
  childList: true,
  attributes: true,
  subtree: true
});

---

2. IntersectionObserver

作用

监听 元素与视口（viewport）的交叉状态（如元素是否进入/离开可视区域）。

关键特性

• 观察类型：

  • 元素与视口的交叉比例（threshold）。
  • 元素的可见性变化。
• 触发时机：当交叉状态达到阈值时触发回调。

• 性能优化：专为视口检测设计，比传统滚动事件监听更高效。

  典型场景

• 图片懒加载（当图片进入视口时加载）。
• 广告曝光统计（记录元素是否被用户看到）。
• 无限滚动加载（检测滚动到底部）。

示例代码

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log("元素进入视口:", entry.target);
    }
  });
}, {
  threshold: 0.5 // 交叉比例达到 50% 时触发
});

observer.observe(document.querySelector(".lazy-image"));

---

3. ResizeObserver

作用

监听 元素尺寸变化（如宽高、边框、内边距等）。

关键特性

• 观察类型：

  • 元素的 contentRect（包含宽高、位置等）。
• 触发时机：元素尺寸变化后异步触发回调。

• 性能优化：避免通过 window.resize 监听全局尺寸变化造成的性能问题。

  典型场景

• 响应式布局调整（元素尺寸变化时重新计算布局）。
• 图表自适应（画布尺寸变化时重绘图表）。
• 浮动元素位置修正（防止元素溢出容器）。

示例代码

const observer = new ResizeObserver((entries) => {
  entries.forEach(entry => {
    const { width, height } = entry.contentRect;
    console.log("元素尺寸变化:", width, height);
  });
});

observer.observe(document.querySelector(".resizable-element"));

---

对比总结

特性	MutationObserver	IntersectionObserver	ResizeObserver
监听目标	DOM 结构或属性变化	元素与视口的交叉状态	元素尺寸变化
触发条件	DOM 增删改	交叉比例达到阈值	元素尺寸变化
性能影响	高（监听范围广）	低（专为视口优化）	中（仅监听尺寸）
异步回调	✔️	✔️	✔️
典型应用	动态内容监控	懒加载、曝光统计	响应式布局、自适应组件
兼容性	IE11+	IE 不支持，主流浏览器支持	IE 不支持，主流浏览器支持

---

选择建议

1. 需要监听 DOM 变化 → MutationObserver
2. 需要检测元素可见性 → IntersectionObserver
3. 需要响应元素尺寸变化 → ResizeObserver