目录
深入理解 JavaScript 中的 MutationObserver:原理与实战案例
一、MutationObserver 简介
二、MutationObserver 的工作原理
1、基本用法
2、observe 方法的配置项
三、实战案例
案例 1:监控动态内容加载
案例 2:监控属性变化
案例 3:防止 DOM 劫持
案例 4:优化页面性能
四、总结
作者:watermelo37
涉及领域:Vue、SpingBoot、Docker、LLM、python等
---------------------------------------------------------------------
温柔地对待温柔的人,包容的三观就是最大的温柔。
---------------------------------------------------------------------
深入理解 JavaScript 中的 MutationObserver:原理与实战案例
在前端基于Vue的开发中,我们会用watch来监听数据的变化,甚至还可以通过deep属性的配置项来监听对象内部的变化(侦听器watch用法详解,vue2与vue3中watch的变化与差异),我们也知道在 Vue2 中 watch 的底层是通过 Vue 中的一个叫做 hasChange 的函数来判断参数是否变化,而深层监听则是添加了遍历的操作,在 Vue3 中由于使用 proxy 替代了defineProperty ,便利程度大大提高。可是如果我们想监听的不只是数据的变化,而涉及到DOM的变化呢?
JavaScript 提供了多种 API 来操作 DOM 结构。而在操作 DOM 时,我们经常需要监测 DOM 的变化,这时候,MutationObserver 就显得格外有用。在这篇博客中,我们将详细介绍 MutationObserver 的工作原理,并通过几个实战案例帮助你全面掌握如何在实际项目中使用 MutationObserver。
同时mutationObserver在事件循环中会放入微队列,拥有最高优先级的执行顺序,什么是事件循环?JS实现异步的基础是什么?具体内容详见:最细最有条理解析:事件循环(消息循环)是什么?为什么JS需要异步
一、MutationObserver 简介
MutationObserver 是 HTML5 引入的一种用于监听 DOM 树变化的接口。它可以在 DOM 树发生以下变化时执行回调函数:
元素的子树发生变化(子节点的添加、删除或重排序)。元素的属性发生变化。元素的文本内容发生变化。与传统的 DOM 事件(如 DOMSubtreeModified、DOMNodeInserted、DOMNodeRemoved 等)相比,MutationObserver 提供了更高效和更灵活的 API。
二、MutationObserver 的工作原理
MutationObserver 通过异步方式监测 DOM 变化,这意味着当 DOM 变化发生时,MutationObserver 不会立即执行回调函数,而是将这些变化存入一个队列中,并在本轮 JavaScript 执行完之后,才批量处理这些变化。这种异步批量处理的机制,使得 MutationObserver 更加高效。
1、基本用法
使用 MutationObserver 的基本步骤如下:
创建一个 MutationObserver 实例,传入一个回调函数。使用 observe 方法开始监听目标节点及其相关的变化。当不再需要监听时,使用 disconnect 方法停止观察。// 1. 创建一个 MutationObserver 实例,并传入回调函数const observer = new MutationObserver((mutationsList, observer) => { for (let mutation of mutationsList) { if (mutation.type === 'childList') { console.log('A child node has been added or removed.'); } else if (mutation.type === 'attributes') { console.log('The ' + mutation.attributeName + ' attribute was modified.'); } }});// 2. 开始监听目标节点const targetNode = document.getElementById('myElement');const config = { attributes: true, childList: true, subtree: true };observer.observe(targetNode, config);// 3. 停止监听// observer.disconnect();
2、observe 方法的配置项
observe 方法接受两个参数:目标节点和一个配置对象。配置对象用于指定要观察哪些类型的变化。常用配置项包括:
attributes: 当元素的属性变化时触发回调(默认为 false)。childList: 当目标节点的子节点被添加或删除时触发回调(默认为 false)。subtree: 当设置为true
时,监视目标节点及其所有后代节点的变化(默认为 false)。characterData: 当节点的文本内容变化时触发回调(默认为 false)。attributeOldValue: 当属性变化时,记录变化前的属性值(默认为 false)。characterDataOldValue: 当文本节点变化时,记录变化前的文本内容(默认为 false)。attributeFilter: 一个属性名称的数组,指定监听的属性变化(如果不设置,则监听所有属性)。 三、实战案例
通过以下几个案例,我们来探讨 MutationObserver 的实际应用场景和优势。
案例 1:监控动态内容加载
在一些 SPA(单页应用)中,内容是通过 AJAX 动态加载到页面上的。我们可以使用 MutationObserver 监控这些动态内容的加载,并在加载完成后进行一些操作(如绑定事件、修改样式等)
// 动态内容加载容器const contentContainer = document.getElementById('content');// 创建观察者实例const observer = new MutationObserver((mutationsList) => { for (let mutation of mutationsList) { if (mutation.type === 'childList') { console.log('New content has been loaded:', mutation.addedNodes); // 对新增的节点进行一些操作 mutation.addedNodes.forEach(node => { if (node.nodeType === Node.ELEMENT_NODE) { // 绑定事件,或执行其他逻辑 node.addEventListener('click', () => console.log('New element clicked!')); } }); } }});// 配置选项const config = { childList: true, subtree: true };// 开始监控observer.observe(contentContainer, config);
在这个案例中,我们监控一个动态内容加载容器,当新的子节点被添加到容器中时,我们对新增的节点绑定点击事件。
案例 2:监控属性变化
假设我们有一个需求,需要在某个元素的 data-status 属性发生变化时做出响应。MutationObserver 可以轻松实现这一需求。
// 目标节点const statusElement = document.getElementById('status');// 创建观察者实例const observer = new MutationObserver((mutationsList) => { for (let mutation of mutationsList) { if (mutation.type === 'attributes' && mutation.attributeName === 'data-status') { console.log('Status changed to:', statusElement.getAttribute('data-status')); } }});// 配置选项const config = { attributes: true, attributeFilter: ['data-status'] };// 开始监控observer.observe(statusElement, config);
案例 3:防止 DOM 劫持
在一些恶意脚本或第三方插件注入的情况下,DOM 结构可能会被劫持。我们可以使用 MutationObserver 检测 DOM 结构的异常变化,从而做出防护措施。
// 目标节点const body = document.body;// 创建观察者实例const observer = new MutationObserver((mutationsList) => { for (let mutation of mutationsList) { if (mutation.type === 'childList') { mutation.addedNodes.forEach(node => { if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'SCRIPT') { console.warn('Potentially malicious script detected!'); // 移除恶意脚本 node.parentNode.removeChild(node); } }); } }});// 配置选项const config = { childList: true, subtree: true };// 开始监控observer.observe(body, config);
案例 4:优化页面性能
有时候我们可能需要对大量 DOM 操作进行批量处理,而不是每次操作都立即反应。MutationObserver 可以用来检测批量 DOM 变化并集中处理,从而优化页面性能。
在这个例子中,我们批量向容器中添加了 1000 个子节点,而 MutationObserver 会统一处理这些 DOM 变化,有效减少了重绘和重排操作。
// 目标节点const container = document.getElementById('container');// 创建观察者实例const observer = new MutationObserver((mutationsList) => { mutationsList.forEach(mutation => { if (mutation.type === 'childList') { // 批量处理逻辑 console.log('Batch processing DOM changes'); } });});// 配置选项const config = { childList: true, subtree: true };// 开始监控observer.observe(container, config);// 批量修改 DOMconst fragment = document.createDocumentFragment();for (let i = 0; i < 1000; i++) { const newDiv = document.createElement('div'); newDiv.textContent = `Item ${i}`; fragment.appendChild(newDiv);}container.appendChild(fragment);
四、总结
MutationObserver 是一个非常强大的 API,提供了一种高效、灵活的方式来监听和响应 DOM 变化。它解决了传统 DOM 事件监听器的诸多局限性,通过异步、批量的方式处理 DOM 变化,大大提高了性能和效率。在实际开发中,合理使用 MutationObserver 可以帮助我们更好地控制 DOM 操作,提高代码的健壮性和可维护性。
只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
更多优质内容,请关注:
你真的会使用Vue3的onMounted钩子函数吗?Vue3中onMounted的用法详解
通过array.filter()实现数组的数据筛选、数据清洗和链式调用
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
el-table实现动态数据的实时排序,一篇文章讲清楚elementui的表格排序功能
干货含源码!如何用Java后端操作Docker(命令行篇)
JavaScript中闭包详解+举例,闭包的各种实践场景:高级技巧与实用指南
PDF预览:利用vue3-pdf-app实现前端PDF在线展示
Docker 入门全攻略:安装、操作与常用命令指南
shpfile转GeoJSON且控制转化精度;如何获取GeoJSON?GeoJson结构详解
巧用Array.forEach:简化循环与增强代码可读性
通过array.reduce()实现数据汇总、条件筛选和映射、对象属性的扁平化、转换数据格式等
Mapbox添加行政区矢量图层、分级设色图层、自定义鼠标悬浮框、添加天地图底图等