MutationObserver与IntersectionObserver的区别
今天主要是分享一下MutationObserver和IntersectionObserver的区别,希望对大家有帮助!
-
MutationObserver
和IntersectionObserver
的区别-
MutationObserver
- 作用:用于监听 DOM 树的变动,包括:元素的属性、子元素列表或节点文本的变化。
- 适用场景:可以用来检测 DOM 的结构和内容变化,比如元素被插入或删除、属性被更改等。
- 性能:由于
MutationObserver
监听的是整个 DOM 树的变化,频繁的 DOM 操作会导致性能问题,因此适用于较少变化的场景。
-
IntersectionObserver
- 作用:用于监听目标元素与其祖先元素(或 viewport)之间的交叉状态,即是否进入或离开视口。
- 适用场景:适合用于检测元素是否在视口中,例如:实现图片懒加载、无限滚动或曝光监测。
- 性能:由于它的监听目标是元素的可见性,相较于
MutationObserver
,更适合频繁变化的场景。
特性 MutationObserver IntersectionObserver 监听对象 DOM 节点的结构、属性或文本变化 目标元素与视口或指定元素的交叉状态 常见使用场景 检测 DOM 变化(插入、删除、修改) 图片懒加载、曝光监测、滚动加载等 性能 频繁变化可能影响性能 更适合高频率变化的监听 -
-
应用场景
-
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>
-