JavaScript是如何工做的:使用 MutationObserver 跟踪 DOM 的变化

时间 2019-11-05 标签 javascript 如何使用 mutationobserver 跟踪 dom 变化

这是专门探索 JavaScript 及其所构建的组件的系列文章的第10篇。javascript

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！css

若是你错过了前面的章节，能够在这里找到它们：前端

Web 应用程序在客户端变得愈来愈重，缘由不少，例如须要更丰富的 UI 来容纳更复杂的应用程序提供的内容，实时计算等等。复杂性的增长使得在 Web 应用程序生命周期的每一个给定时刻都很难知道 UI 的确切状态。java

而当你在搭建某些框架或者库的时候，甚至会更加困难，例如，前者须要根据 DOM 来做出反应并执行特定的动做。node

概述

Mutation Observer API 用来监视 DOM 变更。DOM 的任何变更，好比节点的增减、属性的变更、文本内容的变更，这个 API 均可以获得通知。css3

概念上，它很接近事件，能够理解为 DOM 发生变更就会触发 Mutation Observer 事件。可是，它与事件有一个本质不一样：事件是同步触发，也就是说，DOM 的变更马上会触发相应的事件；Mutation Observer 则是异步触发，DOM 的变更并不会立刻触发，而是要等到当前全部 DOM 操做都结束才触发。git

这样设计是为了应付 DOM 变更频繁的特色。举例来讲，若是文档中连续插入1000个 <li>元素，就会连续触发1000个插入事件，执行每一个事件的回调函数，这极可能形成浏览器的卡顿；而 Mutation Observer 彻底不一样，只在 1000 个段落都插入结束后才会触发，并且只触发一次。github

Mutation Observer有如下特色：web

它等待全部脚本任务完成后，才会运行，即采用异步方式
它把 DOM 变更记录封装成一个数组进行处理，而不是一条条地个别处理 DOM 变更
它便可以观察发生在 DOM 节点的全部变更，也能够观察某一类变更

为何要要监听 DOM？编程

在不少状况下，MutationObserver API 均可以派上用场。例如:

你但愿通知 Web 应用程序访问者，他当前所在的页面发生了一些更改。
你正在开发一个新的 JavaScript 框架，须要根据 DOM 的变化动态加载 JavaScript 模块。
也许你正在开发一个所见即所得(WYSIWYG) 编辑器，试图实现撤消/重作功能。经过利用 MutationObserver API，你能够知道在任何给定的点上进行了哪些更改，所以能够轻松地撤消这些更改。

这些只是 MutationObserver 能够提供帮助的几个例子。

MutationObserver 用法

在应用程序中实现 MutationObserver 至关简单。你须要经过传入一个函数来建立一个 MutationObserver 实例，每当有变化发生，这个函数将会被调用。函数的第一个参数是变更数组，每一个变化都会提供它的类型和已经发生的变化的信息。

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

这个被建立的对象有三个方法：

observe — 启动监听
disconnect — 用来中止观察
takeRecords — 返用来清除变更记录，即再也不处理未处理的变更。

observe()

observe 方法用来启动监听，它接受两个参数。

第一个参数：所要观察的 DOM 节点
第二个参数：一个配置对象，指定所要观察的特定变

下面的片断展现了如何开始启动监听(observe ):

// 开始侦听页面的根 HTML 元素中的更改。
mutationObserver.observe(document.documentElement, {
  attributes: true,
  characterData: true,
  childList: true,
  subtree: true,
  attributeOldValue: true,
  characterDataOldValue: true
});

如今，假设 DOM 中有一些很是简单的 div:

<div id="sample-div" class="test"> Simple div </div>

使用 JQuery 来移除这个 div 上的 class:

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

正如咱们已经开始观察到的，在调用 mutationObserver.observe(…) 以后，将在控制台中看到相应 MutationRecord 的日志:

这个是由移除 class 属性致使的变化。

MutationRecord 对象包含了DOM的相关信息，有以下属性：

type：观察的变更类型（attribute、characterData或者childList）
target：发生变更的 DOM 节点
addedNodes：新增的 DOM 节点
removedNodes：删除的 DOM 节点
previousSibling：前一个同级节点，若是没有则返回 null
nextSibling：下一个同级节点，若是没有则返回 null
attributeName：发生变更的属性。若是设置了attributeFilter，则只返回预先指定的属性。
oldValue：变更前的值。这个属性只对 attribute 和 characterData 变更有效，若是发生 childList 变更，则返回 null

最后，为了在任务完成后中止观察 DOM，能够执行如下操做:

mutationObserver.disconnect();

如今，MutationObserver 已经被普遍支持：

备择方案

MutationObserver 在以前尚未的，那么在 MutationObserver 还没出现以前，开发者采用什么方案呢？

这是几个可用的其余选项：

轮询（Polling）
MutationEvents
CSS animations

轮询（Polling）

最简单和最简单的方法是轮询。使用浏览器 setInterval 方法，能够设置一个任务，按期检查是否发生了任何更改。固然，这种方法会显著下降web 应用程序/网站的性能。

MutationEvents

在2000年，MutationEvents API 被引入。虽然颇有用，但在 DOM中的每一次更改都会触发改变事件，这一样会致使性能问题。如今 MutationEvents API 已经被弃用，很快现代浏览器将彻底中止支持它。

CSS animations

另外一个有点奇怪的选择是依赖 CSS 动画。这听起来可能有点使人困惑。基本上，咱们的想法是建立一个动画，一旦元素被添加到 DOM 中，动画就会被触发。动画开始的那一刻，animationstart 事件将被触发:若是已经将事件处理程序附加到该事件，那么你将确切地知道元素什么时候被添加到 DOM 中。动画的执行时间周期应该很小，用户几乎看不到它。

首先，须要一个父级元素，咱们在它的内部监听节点的插入：

<div id=”container-element”></div>

为了获得节点插入的处理器，须要设置一系列的 keyframe 动画，当节点插入的时候，动画将会开始。

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

建立 keyfram 后，还须要把它放入你想监听的元素上，注意应设置很小的 duration 值 —— 它们将会减弱动画在浏览器上留下的痕迹。

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

这会将动画添加到 container-element 的全部子节点。动画结束时，将触发插入事件。

咱们须要一个 JavaScript 函数做为事件监听器。在函数中，必须进行初始的 event.animationName 检查以确保它是咱们想要的动画。

var insertionListener = function(event) {
  // Making sure that this is the animation we want.
  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 中可能发生的每个更改，而且在批量触发更改时，它的优化程度更高。最重要的是，全部主要的现代浏览器都支持 MutationObserver，还有一些使用引擎下 MutationEvents 的 polyfill。

原文：

https://blog.sessionstack.com...

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

你的点赞是我持续分享好东西的动力，欢迎点赞！