Observer

IntersectionObserver

IntersectionObserver 用于异步监听目标元素与祖先元素或视口（viewport）的交叉状态（intersection）变化。常用于实现懒加载图片、无限滚动、广告曝光率统计、动画触发等场景。

基本概念

• 目标元素（target）：你希望观察是否进入/离开视口或其他容器的 DOM 元素。

• 根元素（root）：用于检查交叉的容器，默认是浏览器（即 null）。

• 交叉比例（intersection ratio）：目标元素与根元素相交占目标元素的比例（0 到 1 之间）。

• 阈值（threshold）：指定在什么交叉比例下出发回调。可以是一个数值或数组。

使用方法

const observer = new IntersectionObserver(callback, options);

参数说明：

• callback(entries, observer)：当目标元素的交叉状态发生变化时调用。

  • entries：一个IntersectionObserverEntry对象数组，每个对象描述一个被观察元素的状态。

  • observer：当前的IntersectionObserver实例。

• options（可选）

  • root：指定根元素（默认为 null， 即视口）。

  • rootMargin：类似 CSS margin，用于扩展或缩小跟元素的有效区域（如：'0px 0px -100px 0px'）。

  • threshold: 触发回调的交叉比例阈值（如 0.5 表示当 50% 可见时触发；也可以是 [0, 0.25, 0.5, 0.75, 1]）。

const observer = new IntersectionObserver(callback, options);
// 开始观察目标元素
observer.observe(document.querySelect("#my-element"));
// 停止观察
observer.unobserve(element);  // 停止单个元素
observer.disconnect();  // 停止所有观察并释放资源

IntersectionObserverEntry 主要属性：

{
  time: 123456,               // 时间戳（从页面加载开始算起）
  target: <div>,              // 被观察的元素
  rootBounds: DOMRectReadOnly,// 根元素的边界矩形
  boundingClientRect: DOMRectReadOnly, // 目标元素的边界矩形
  intersectionRect: DOMRectReadOnly,  // 交叉区域的矩形
  isIntersecting: true,       // 是否正在交叉（布尔值）
  intersectionRatio: 0.6      // 交叉比例（0~1）
}

应用场景

图片懒加载

<img data-src="image.jpg" class="lazy"/>

<script>
    const images = document.querySelector(".lazy");
    const imageObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                img.classList.remove('lazy');
                observer.unobserve(img);  // 加载后不再观察
            }
        })
    })
</script>

触发动画

const animateObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add("animate")
        }
    })
}, {threshold: 0.1})
document.querySelectorAll(".fade-in").forEach(el => {
    animateObserver.observe(el)
})

无限滚动

const sentinel = document.querySelector('#sentinel');
const scrollObserver = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadMoreData(); // 加载更多内容
    }
  });
}, { rootMargin: '100px' }); // 提前 100px 触发

scrollObserver.observe(sentinel);

MutationObserver

监听页面 DOM 结构或属性的变化。监听目标元素及其子树的增删改（节点、属性、文本等）。

应用场景：

• 动态内容监控（如评论区新增消息）。

• 防止水印被删除（检测并自动恢复）。

• 自定义 Web 组件响应内部结构变化。

const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        if (mutation.type === "childList") console.log("子节点变化")
        if (mutation.type === "attributes") console.log(`属性 ${mutation.attributes} 被修改`)
    })
})

observer.observe(document.body, {
    childList: true,
    attributes: true,
    subtree: true  // 监听所有后代
})

ResizeObserver

监听元素尺寸变化。当元素的 content box 尺寸发生变化时触发回调（如窗口缩放、内容动态加载、CSS改变等）。

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log('新尺寸:', entry.contentRect);
  }
});
resizeObserver.observe(document.querySelector('#myDiv'));

PerformanceObserver

监听性能指标事件。异步收集浏览器性能数据，如资源加载、长任务、首次内容绘制（FCP）、最大内容绘制（LCP）等。

const perfObserver = new PerformanceObserver(list => {
  list.getEntries().forEach(entry => {
    if (entry.entryType === 'longtask') {
      console.log('发现长任务，耗时:', entry.duration);
    }
  });
});
perfObserver.observe({ entryTypes: ['longtask', 'measure', 'navigation'] });

ReportiongObserver

监听浏览器生成的报告（非错误类）。用于捕获浏览器主动发出的“报告”，如废弃 API 使用、CSP 违规、广告拦截干预等。日常业务代码较少使用，多用于 SDK 或监控系统。

const reportObserver = new ReportingObserver((reports, observer) => {
  reports.forEach(report => {
    console.log('浏览器报告:', report.type, report.body);
  });
});
reportObserver.observe();