js 几个observer的特点

总结

1. ResizeObserver

• 用途：监听元素尺寸变化

• 主要场景：响应式布局、自适应组件

• 特点：性能好，专门针对尺寸变化优化

2. MutationObserver

• 用途：监听 DOM 变化

• 主要场景：DOM 结构变化、属性变化、内容变化

• 特点：可以监听多种类型的 DOM 变化

3. IntersectionObserver

• 用途：监听元素是否进入视口

• 主要场景：图片懒加载、无限滚动、元素可见性检测

• 特点：可以设置触发阈值，性能好

4. PerformanceObserver

• 用途：监听性能指标

• 主要场景：性能监控、性能指标收集

• 特点：可以收集各种性能数据

5. ReportingObserver

• 用途：监听浏览器报告

• 主要场景：安全监控、兼容性检查

• 特点：可以捕获浏览器警告和错误

使用方式

1. ResizeObserver

// 创建观察者
const observer = new ResizeObserver(entries => {
  entries.forEach(entry => {
    console.log('元素尺寸：', entry.contentRect);
  });
});

// 开始观察
observer.observe(element);

// 停止观察
observer.disconnect();

2.MutationObserver

// 创建观察者
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    console.log('变化类型：', mutation.type);
  });
});

// 开始观察（带配置）
observer.observe(element, {
  attributes: true,    // 监听属性变化
  childList: true,     // 监听子节点变化
  subtree: true        // 监听所有后代节点
});

// 停止观察
observer.disconnect();

3. IntersectionObserver

// 创建观察者（带配置）
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('元素进入视口');
    }
  });
}, {
  threshold: 0.5,      // 触发阈值
  rootMargin: '0px'    // 根元素外边距
});

// 开始观察
observer.observe(element);

// 停止观察
observer.disconnect();

4. PerformanceObserver

// 创建观察者
const observer = new PerformanceObserver(list => {
  list.getEntries().forEach(entry => {
    console.log('性能指标：', entry);
  });
});

// 开始观察
observer.observe({ entryTypes: ['measure'] });

// 停止观察
observer.disconnect();

5. ReportingObserver

// 创建观察者
const observer = new ReportingObserver(reports => {
  reports.forEach(report => {
    console.log('报告：', report);
  });
});

// 开始观察
observer.observe();

// 停止观察
observer.disconnect();

通用使用模式

• 创建实例：new Observer(callback)
• 配置选项：大多数 API 支持配置对象
• 开始观察：observe(target)
• 停止观察：disconnect()