浏览器的五种Observer

1、IntersectionObserver 交叉观察器

用法

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // 替换 data-src 为真实 URL
      observer.unobserve(img);   // 加载后停止观察
    }
  });
});
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

使用场景

• 广告曝光检测
• 图片懒加载
• 滚动加载
• 虚拟列表实现

2、MutationObserver 变动观察器

用法

使用场景

3、ResizeObserver 尺寸变化观察器

用法

使用场景

4、PerformanceObserver 性能观察器

用法

1. 资源加载监控

const resourceObserver = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    if (entry.initiatorType === 'img') {
      console.log(`图片 ${entry.name} 加载耗时：${entry.duration}ms`);
    }
  });
});
resourceObserver.observe({ entryTypes: ['resource'] });  // 关注资源类型:ml-citation{ref="3,8" data="citationList"}

2. 用户交互性能分析

const longTaskObserver = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    if (entry.duration > 50) {
      reportLongTask(entry);  // 上报超过50ms的长任务:ml-citation{ref="5,7" data="citationList"}
    }
  });
});
longTaskObserver.observe({ entryTypes: ['longtask'] });

3. 核心网页指标（Web Vitals）监控

实时跟踪LCP、CLS、INP等关键性能指标，替代传统静态采集方式。

const vitalsObserver = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    switch (entry.name) {
      case 'LCP': handleLCP(entry); break;
      case 'INP': handleINP(entry); break;
    }
  });
});
vitalsObserver.observe({ type: 'layout-shift', buffered: true });  // 布局偏移指标:ml-citation{ref="7" data="citationList"}

使用场景

• 性能检测

5、ReportingObserver 报告观察期

用法

const observer = new ReportingObserver((reports, observer) => {
  reports.forEach(report => console.log(report.type, report.body));
}, {
  types: ['deprecation', 'intervention', 'crash'],  // 指定关注的报告类型
  buffered: true  // 接收创建实例前的历史报告:ml-citation{ref="7" data="citationList"}
});

使用场景

用于收集浏览器生成的各种报告信息，帮助开发者主动捕获潜在问题。常见类型如下

• deprecation：弃用api的使用
• intervention：浏览器干预行为
• csp-violation：安全策略违规