JS Observer API

学习IntersectionObserver · 难度：高级 · +15XP

JavaScript Observer API 全家桶

浏览器提供了四种Observer API，让你监听DOM的各类变化：MutationObserver（DOM结构变化）、IntersectionObserver（元素可见性）、ResizeObserver（元素尺寸变化）、PerformanceObserver（性能指标）。

IntersectionObserver —— 懒加载

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

动手练习

1. 基础练习：用IntersectionObserver实现图片懒加载。
2. 进阶应用：用ResizeObserver监听元素尺寸，动态调整内部布局。
3. 项目实战：用MutationObserver监听DOM变化，实现一个小型DOM调试工具。