高性能 JavaScript —— 天生就慢的DOM操作

天生就慢

文档对象模型（DOM）是一个独立语言的，用于操作 XML 和 HTML 文档的程序接口（API）。在浏览器中，主要用于和 HTML 文档打交道，同样也用在 Web 程序中获取 XML 文档，并使用 DOM API 来访问文档中的数据。
浏览器通常会将 DOM 和 JavaScript 独立实现，比如在 IE 中，JavaScript 的实现名为 JScript，位于 jscript.cll 文件中，DOM 的实现则存在于一个名为 mshtml.dll（内部称为 Trident）中，这个分离允许其他技术和语言，比如 VBscript，能共享使用 DOM 以及 Trident 提供的渲染函数。
这对于性能意味着，两个相互独立的功能只要通过接口彼此相连，就会产生消耗。

DOM访问与修改

访问DOM元素会调用 DOM 的 API，但是修改元素的代价更为昂贵，因为它会导致浏览器重新计算页面的几何变化（该部分会在重绘和重排中介绍）

HTML集合

HTML集合是包含了DOM节点引用的类数组对象。以下方法返回的就是一个集合：

document.getElementsByName()
document.getElementsByClassName()
document.getElementsByTagName()

下面的属性同样返回 HTML 集合：

document.images
document.links
document.forms

HTML 集合对象是一个类似数组的列表，并不是真正的数组（因为没有 Array 对象上的 push() 等方法），但是提供了一个类似数组的 length 的属性并且还能以数字索引的方式访问列表中的元素。
HTML集合以一种“假定时状态”实时存在，这意味着当底层文档对象更新时，它也会自动更新。事实上，HTML 集合一直与文档保持连接，每次需要最新的文档信息时，都会重复执行查询的过程，哪怕只是获取集合里的元素个数（即访问 length 属性）。这正是低效之源！

访问集合元素时使用局部变量

一般来说，对于任何类型的 DOM 访问，需要多次访问同一个 DOM 属性或方法需要多次访问时，最好使用一个局部变量缓存此成员。
当遍历一个集合时，第一优化原则是把集合存储在局部变量中，并把 length 属性缓存在循环之外。