资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/JavaScript 工作原理之十－使用 MutationObserver 监测 DOM 变化

JavaScript 工作原理之十－使用 MutationObserver 监测 DOM 变化

Richard_Gao / 1346人阅读

摘要：概述是现代浏览器提供的用来检测变化的网页接口。比如通知用户当前所在的页面所发生的一些变化。触发回调前返回最新的批量变化。在函数内部，开始必须使用代码进行检查，确保是我们所监听的动画。

原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。

本系列持续更新中，Github 地址请查阅这里。

这是 JavaScript 工作原理的第十章。

网络应用在客户端日益复杂，这是由很多因素的造成的，比如需要更加丰富的界面交互以提供更加复杂的应用功能，实时计算等等。

网络应用的日益复杂导致无法知晓其生命周期中指定时刻准确的交互界面状态。

如果你正在构建一些框架或者一个库，这会更加的困难，比如，你无法通过监测 DOM 来响应并执行一些特定的操作。

概述

MutationObserver  是现代浏览器提供的用来检测 DOM 变化的网页接口。你可以使用这个接口来监听新增或者删除节点，属性更改，或者文本节点的内容更改。

可以干点啥好呢？

你可以在以下几种情况信手拈来 MutationObserver 接口。比如：

通知用户当前所在的页面所发生的一些变化。

通过使用一些很棒的 JavaScript 框架来根据 DOM 的变化来动态加载 JavaScript 模块。

可能当你在开发一个所见即所得编辑器的时候，使用 MutationObserver 接口来收集任意时间点上的更改，从而轻松地实现撤消/重做功能。

这只是几个 MutationObserver 的使用场景。

如何使用 MutationObserver

在应用中集成 MutationObserver 是相当简单的。通过往构造函数 MutationObserver 中传入一个函数作为参数来初始化一个 MutationObserver 实例，该函数会在每次发生 DOM 发生变化的时候调用。MutationObserver 的函数的第一个参数即为单个批处理中的 DOM 变化集。每个变化包含了变化的类型和所发生的更改。

var mutationObserver = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation);
  });
});

创建的实例对象拥有三个方法：

observe－开始进行监听。接收两个参数－要观察的 DOM 节点以及一个配置对象。

disconnect－停止监听变化。

takeRecords－触发回调前返回最新的批量 DOM 变化。

以下为开始监听的代码片段：

// 开始监听页面根元素 HTML 变化。
mutationObserver.observe(document.documentElement, {
  attributes: true,
  characterData: true,
  childList: true,
  subtree: true,
  attributeOldValue: true,
  characterDataOldValue: true
});

现在，假设你写了一个简单的 div 元素：

 Simple div

可以使用 jQuery 来移除 div 的 class 属性：

$("#sample-div").removeAttr("class");

当调用 mutationObserver.observe(…) 就可以开始监听 DOM 变化。

当每次发生 DOM 变化的时候，会打印出各个 MutationRecord 日志信息：

这一变化是由移除 class 属性所引起的。

最后，如果想停止监听 DOM 变化可以使用如下方法：

// MutationObserver 停止监听 DOM 变化
mutationObserver.disconnect();

现在，MutationObserver 浏览器兼容情况很好：

替代方法

然而，之前 MutationObserver 并没有被广泛使用。那么，当没有 MutationObserver 的时候，开发者是如何解决监听 DOM 变化的呢？

有几下几种可用的方法：

轮询

MutationEvents

CSS 动画

轮询

最简单且粗糙的方法即使用轮询。使用浏览器内置的 setInterval 网页接口你可以创建一个定时任务来定时检查 DOM 的变化。当然了，这个方法会显著地减弱网络应用/网站的性能。

其实，这是可以理解为脏检查，如果有使用过 AngularJS 应该会有看过其脏检查所导致的性能问题。在我的另一个系列里面有稍微介绍了下，具体可以查看这里。

MutationEvents

早在 2000 年，就推出了 MutationEvents API 。虽然挺管用的，但是每个单一的 DOM 变化都会触发 mutation 事件，结果又会造成性能问题。现在，MutationEvents 接口已经被废弃，不久的将来，现代浏览器全都将停止支持该接口。

以下是 MutationEvents 的浏览器兼容情况：

CSS 动画

依靠 CSS 动画 是一个有点令人感到新奇的替代方案。这听起来会让人有些困惑。大体上，实现思路是这样的，创建一个动画，一旦在 DOM 中添加一个元素就会触发该动画。开始执行 CSS 动画的时候就会触发 animationstart 事件：假设为该事件添加事件监听器，就可以准确知晓 DOM 中添加元素的时机。动画的运行时间周期必须非常的短以便让用户感知不到，即体验更佳。

首先，需要一个父级元素，在里面监听节点添加事件：

为了处理节点的添加，需要创建关键帧序列动画，该序动画在添加节点的时候启动：

@keyframes nodeInserted { 
 from { opacity: 0.99; }
 to { opacity: 1; } 
}

创建好关键帧之后，在需要监听的元素上应用动画。注意到那个短暂的持续时间-在浏览器端动画痕迹会非常平滑（即用户会感觉不到有动画发生）：

#container-element * {
 animation-duration: 0.001s;
 animation-name: nodeInserted;
}

这样会为 container-element 的所有后代节点添加动画。当动画结束，触发 insertion 事件。

我们需要创建一个函数作为事件监听器。在函数内部，开始必须使用 event.animationName 代码进行检查，确保是我们所监听的动画。

var insertionListener = function(event) {
  // 确保是所监听的动画
  if (event.animationName === "nodeInserted") {
    console.log("Node has been inserted: " + event.target);
  }
}

为父元素绑定事件监听器：

document.addEventListener(“animationstart”, insertionListener, false); // standard + firefox
document.addEventListener(“MSAnimationStart”, insertionListener, false); // IE
document.addEventListener(“webkitAnimationStart”, insertionListener, false); // Chrome + Safari

这里采用了事件委托。

CSS 动画浏览器支持情况：

相比以上几种替代方案 MutationObserver 有几点优势。本质上，它会监听 DOM 可能发生的每个变化并且性能更优，因其会批量 DOM 变化之后才触发回调事件。总之，MutationObserver 的兼容性很好，并且还有一些垫片，这些垫片底层是基于 MutationEvents 的。

本系列持续更新中，Github 地址请查阅这里。

GPU云服务器 云服务器 使用Javascript和DOM js监测数据变化 javascript dom 工作原理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52497.html

相关文章

  • JavaScript 工作原理之十－使用 MutationObserver 监测 DOM 变化

    摘要：概述是现代浏览器提供的用来检测变化的网页接口。比如通知用户当前所在的页面所发生的一些变化。触发回调前返回最新的批量变化。在函数内部，开始必须使用代码进行检查，确保是我们所监听的动画。 原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。 本系列持续更新中，Github 地址请查阅这里。 这是 JavaScript 工作原理的第十章。 网络应用...

    bbbbbb 评论0 收藏0

  • JavaScript 工作原理之十－使用 MutationObserver 监测 DOM 变化

    摘要：概述是现代浏览器提供的用来检测变化的网页接口。比如通知用户当前所在的页面所发生的一些变化。触发回调前返回最新的批量变化。在函数内部，开始必须使用代码进行检查，确保是我们所监听的动画。 原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。 本系列持续更新中，Github 地址请查阅这里。 这是 JavaScript 工作原理的第十章。 网络应用...

    zone 评论0 收藏0

  • JavaScript工作原理（九）：使用MutationObserver跟踪DOM的改变

    摘要：概观是现代浏览器提供的，用于检测中的变化。您可能正在使用所见即所得的编辑器，试图实现撤销重做功能。函数的第一个参数是在一个批次中发生的所有改变的集合。虽然有用，但中的每一次更改都会触发突变事件，这又会导致性能问题。 showImg(https://segmentfault.com/img/bV9Z7q?w=1016&h=252);Web应用程序在客户端越来越重要，原因很多，比如需要更丰...

    1fe1se 评论0 收藏0

  • js mutationobserver简要介绍

    摘要：观察者模式介绍观察者设计模式定义了对象间的一种一对多的依赖关系，以便一个对象的状态发生变化时，所有依赖于它的对象都得到通知并自动刷新。 观察者模式介绍 观察者设计模式定义了对象间的一种一对多的依赖关系，以便一个对象的状态发生变化时， 所有依赖于它的对象都得到通知并自动刷新。 一些好的文章观察者模式与委托模式的区别深入理解JavaScript系列（32）：设计模式之观察者模式【Ja...

    leone 评论0 收藏0

  • MutationObserver 监听 DOM 树变化

    摘要：是用于代替作为观察树结构发生变化时，做出相应处理的。触发回调前返回最新的批量变化。发生相应变动时，不再调用回调函数。其中数组也会作为，观察者初始化时的回调函数的第一个参数。如果为，则表示需要记录变动前的属性值。 MutationObserver 是用于代替 MutationEvents 作为观察 DOM 树结构发生变化时，做出相应处理的 API 。为什么要使用 MutationObse...

    psychola 评论0 收藏0

发表评论

登陆后可评论

0条评论

Richard_Gao

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<