MutationObserver与IntersectionObserver的区别

今天主要是分享一下MutationObserver和IntersectionObserver的区别，希望对大家有帮助!

1. MutationObserver 和 IntersectionObserver 的区别

   • MutationObserver

     • 作用：用于监听 DOM 树的变动，包括：元素的属性、子元素列表或节点文本的变化。
     • 适用场景：可以用来检测 DOM 的结构和内容变化，比如元素被插入或删除、属性被更改等。
     • 性能：由于 MutationObserver 监听的是整个 DOM 树的变化，频繁的 DOM 操作会导致性能问题，因此适用于较少变化的场景。

   • IntersectionObserver

     • 作用：用于监听目标元素与其祖先元素（或 viewport）之间的交叉状态，即是否进入或离开视口。
     • 适用场景：适合用于检测元素是否在视口中，例如：实现图片懒加载、无限滚动或曝光监测。
     • 性能：由于它的监听目标是元素的可见性，相较于 MutationObserver，更适合频繁变化的场景。

   特性	MutationObserver	IntersectionObserver
   监听对象	DOM 节点的结构、属性或文本变化	目标元素与视口或指定元素的交叉状态
   常见使用场景	检测 DOM 变化（插入、删除、修改）	图片懒加载、曝光监测、滚动加载等
   性能	频繁变化可能影响性能	更适合高频率变化的监听

2. 应用场景

   • IntersectionObserver

     在之前我分享的Vue3如何优雅地加载图片的时候，其实是使用过 IntersectionObserver 的。会使用它检测 DOM（img） 是否可见，以此来判断是否需要加载对应的图片：

     // 懒加载图片的回调函数，包含淡入效果和错误处理
     function lazyLoadImages(entries, observer) {entries.forEach(entry => {// 检查图片是否进入视口if (entry.isIntersecting) {const img = entry.target;img.src = img.dataset.src; // 将 src 替换为 src 开始加载图片// 图片加载成功后，添加 'loaded' 类触发淡入效果img.onload = () => img.classList.add('loaded'); // 图片加载失败时，显示默认占位图img.onerror = () => img.src = 'placeholder.jpg'; observer.unobserve(img); // 停止观察该图片}});
     }// 创建 IntersectionObserver 实例，用于懒加载
     const imageObserver = new IntersectionObserver(lazyLoadImages, { threshold: 0.1 });// 选取所有带有 src 属性的图片并开始观察
     document.querySelectorAll('img[src]').forEach(img => {imageObserver.observe(img);
     });
     

     除此之外，IntersectionObserver 在 性能检测 中也有应用场景。

     // 处理元素可见性变化的回调函数
     function handleIntersection(entries, observer) {entries.forEach(entry => {// 检查元素是否进入视口if (entry.isIntersecting) {console.log('元素已进入视口:', entry.target);// 调用自定义追踪事件函数，记录元素可见性trackEvent('element_visible', { elementId: entry.target.id });// 可选：停止观察该元素（仅触发一次）observer.unobserve(entry.target);}});
     }// 创建 IntersectionObserver 实例
     const observer = new IntersectionObserver(handleIntersection, {root: null,      // 使用视口作为容器threshold: 0.5   // 当元素 50% 可见时触发回调
     });// 选择需要观察的目标元素
     const targetElement = document.getElementById('target');
     observer.observe(targetElement);// 示例追踪事件函数
     function trackEvent(eventType, details) {console.log(`记录事件: ${eventType}`, details);// 在这里将追踪数据发送到服务器或分析服务
     }
     

   • MutationObserver

     MutationObserver 主要 监听 DOM 的动态变化（添加、删除 等）。在 SPA 应用中，动态加载的场景下会非常有用。

     比如，我们做一个评论提交的功能，当用户提交一条新评论时，我们希望检测到 DOM 变化并触发相关操作

     <div id="comments-section"><p>评论列表:</p><div id="comments"><p>用户1: 很棒的文章！</p></div>
     </div><button onclick="addComment()">添加评论</button><script>// 模拟添加评论function addComment() {const comment = document.createElement("p");comment.textContent = `用户${Date.now()}: 新的评论内容`;document.getElementById("comments").appendChild(comment);}// MutationObserver 实例const commentsSection = document.getElementById("comments");const observer = new MutationObserver((mutationsList) => {mutationsList.forEach((mutation) => {if (mutation.type === 'childList') {// 调用自定义追踪事件函数，记录元素可见性trackEvent('element_update', { elementId: target.target.id });}});});// 观察评论区的子节点变化observer.observe(commentsSection, {childList: true, // 监听子节点变化});
     </script>