javascript基础学习系列五百三十一：性能、内存与垃圾回收

DOM Level 2 规范中描述的MutationEvent 定义了一组会在各种DOM 变化时触发的事件。由于
浏览器事件的实现机制，这个接口出现了严重的性能问题。因此，DOM Level 3 规定废弃了这些事件。
MutationObserver 接口就是为替代这些事件而设计的更实用、性能更好的方案。
将变化回调委托给微任务来执行可以保证事件同步触发，同时避免随之而来的混乱。为Mutation-
Observer 而实现的记录队列，可以保证即使变化事件被爆发式地触发，也不会显著地拖慢浏览器。
无论如何，使用MutationObserver 仍然不是没有代价的。因此理解什么时候避免出现这种情况
就很重要了。

1. MutationObserver 的引用
   MutationObserver 实例与目标节点之间的引用关系是非对称的。MutationObserver 拥有对要
   观察的目标节点的弱引用。因为是弱引用，所以不会妨碍垃圾回收程序回收目标节点。
   然而，目标节点却拥有对MutationObserver 的强引用。如果目标节点从DOM 中被移除，随后
   被垃圾回收，则关联的MutationObserver 也会被垃圾回收。
   MutationRecord 的引用
   记录队列中的每个MutationRecord 实例至少包含对已有DOM 节点的一个引用。如果变化是
   childList 类型，则会包含多个节点的引用。记录队列和回调处理的默认行为是耗尽这个队列，处理
   每个MutationRecord，然后让它们超出作用域并被垃圾回收。
   有时候可能需要保存某个观察者的完整变化记录。保存这些MutationRecord 实例，也就会保存
   它们引用的节点，因而会妨碍这些节点被回收。如果需要尽快地释放内存，建议从每个MutationRecord
   中抽取出最有用的信息，然后保存到一个新对象中，最后抛弃MutationRecord。
   小结
   文档对象模型（DOM，Document Object Model）是语言中立的HTML 和XML 文档的API。DOM
   Level 1 将HTML 和XML 文档定义为一个节点的多层级结构，并暴露出JavaScript 接口以操作文档的底
   层结构和外观。
   DOM 由一系列节点类型构成，主要包括以下几种。
    Node 是基准节点类型，是文档一个部分的抽象表示，所有其他类型都继承Node。
    Document 类型表示整个文档，对应树形结构的根节点。在JavaScript 中，document 对象是
   Document 的实例，拥有查询和获取节点的很多方法。
    Element 节点表示文档中所有HTML 或XML 元素，可以用来操作它们的内容和属性。
    其他节点类型分别表示文本内容、注释、文档类型、CDATA 区块和文档片段。
   DOM 编程在多数情况下没什么问题，在涉及