摘要： 掌握MutationObserver。
这是专门探索 JavaScript 及其所构建的组件的系列文章的第10篇。
如果你错过了前面的章节，可以在这里找到它们：
JavaScript 是如何工作的：引擎，运行时和调用堆栈的概述！
JavaScript 是如何工作的：深入V8引擎&编写优化代码的5个技巧！
JavaScript 是如何工作的：内存管理+如何处理4个常见的内存泄漏 !
JavaScript 是如何工作的：事件循环和异步编程的崛起+ 5种使用 async/await 更好地编码方式！
JavaScript 是如何工作的：深入探索 websocket 和HTTP/2与SSE +如何选择正确的路径！
JavaScript 是如何工作的：与 WebAssembly比较 及其使用场景 !
JavaScript 是如何工作的：Web Workers的构建块+ 5个使用他们的场景!
JavaScript 是如何工作的：Service Worker 的生命周期及使用场景!
Web 应用程序在客户端变得越来越重，原因很多，例如需要更丰富的 UI 来容纳更复杂的应用程序提供的内容，实时计算等等。复杂性的增加使得在 Web 应用程序生命周期的每个给定时刻都很难知道 UI 的确切状态。
而当你在搭建某些框架或者库的时候，甚至会更加困难，例如，前者需要根据 DOM 来作出反应并执行特定的动作。
概述Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。
概念上，它很接近事件，可以理解为 DOM 发生变动就会触发 Mutation Observer 事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说，DOM 的变动立刻会触发相应的事件；Mutation Observer 则是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。
这样设计是为了应付 DOM 变动频繁的特点。举例来说，如果文档中连续插入1000个 <li>元素，就会连续触发1000个插入事件，执行每个事件的回调函数，这很可能造成浏览器的卡顿；而 Mutation Observer 完全不同，只在 1000 个段落都插入结束后才会触发，而且只触发一次。
Mutation Observer有以下特点：
它等待所有脚本任务完成后，才会运行，即采用异步方式
它把 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> Simple div </div>使用 JQuery 来移除这个 div 上的 class:
$("#sample-div").removeAttr("class");正如我们已经开始观察到的，在调用 mutationObserver.observe(…) 之后，将在控制台中看到相应 MutationRecord 的日志:
这个是由移除 class 属性导致的变化。
MutationRecord 对象包含了DOM的相关信息，有如下属性：