高性能 JS-DOM
用脚本进行 DOM 操作的代价很昂贵，是富 web 应用中常见的性能瓶颈。主要有以下三种问题：
- 访问和修改 DOM 元素
- 修改 DOM 元素的样式导致 repaint 和 reflow
- 通过 DOM 事件处理与用户进行交互
本文主要参考 高性能JS-DOM - 最骚的就是你 - 博客园
浏览器中的 DOM
DOM，天生就慢
因为浏览器把实现页面渲染的部分和解析 JS 的部分分开来实现，既然是分开的，一旦两者需要产生连接，就要付出代价。
三个例子：
- 小明和小红是两个不同学校的学生，两个人家里经济条件都不太好，买不起手机，所以只能通过写信来互相交流，这样的过程肯定比他俩面对面交谈时所需要花费的代价大（额外的事件、写信的成本等）。
- 第一个例子是原作者举的例子，个人觉得还是没能将问题的本质说清楚，因此我将其略微修改了一下： 小明和小红是两个不同国家的学生，并且两人都不懂对方的语言，因此他俩只能通过翻译进行交流。例如小红想表达你好，她需要先查询翻译设备，然后将翻译后的内容给小明看。但如果小明和小红都是同一个国家的学生，就不存在语言交流上的问题。
- 官方例子：把 DOM 和 JS（ECMAScript）各自想象为一座岛屿，它们之间通过一座桥梁连接，桥头有一个收费站。ECMAScript 每次访问 DOM，都要途径这座桥，并缴纳“过桥费”。访问 DOM 的次数越多，费用也就越高。
【推荐】：尽可能减少过桥的次数，努力待在 ECMAScript 岛上。
DOM 的访问与修改
访问 DOM 需要交纳“过桥费”，而修改 DOM 元素则代价更为昂贵，因为它会导致浏览器重新计算页面的几何变化。
function innerHTMLLoop() {
var loop = 0;
for(loop = 0; loop < 15000; loop++) {
document.getElementById("text").innerHTML += "dom";
}
}
这段代码，每次循环都会访问两次特定的元素：第一次读取这个元素的 innerHTML 属性，第二次重写它。
function innerHTMLLoop2() {
var content = "",
loop = 0;
for(loop = 0; loop < 15000; loop++) {
content += "dom";
}
document.getElementById("text").innerHTML += content;
}
用一个局部变量存储每次更新后的内容，等待循环结束后，一次性地写入页面（尽可能多的把工作交给 JS 来完成）。
昂贵的集合
var alldivs = document.getElementsByTagName("div"),
loop = 0, length = 0;
for(loop = 0; loop < alldivs.length; loop++) {
document.body.appendChild(document.createElement("div"));
}
这段代码的原目的只是单纯地把页面中的 div 数量翻倍：遍历所有的 div，每次创建一个新的 div 并添加到 body 中。
但事实上，这是一个死循环：因为循环的退出条件 alldivs.length 在每一次循环结束后都会增加，因为这个 HTML 元素集合反映的是底层文档元素的实时状态。
解决这个问题最简单的方式：将 length 提到赋初值那一步：
for(loop = 0, length = alldivs.length; loop < length; loop++) {
document.body.appendChild(document.createElement("div"));
}
不管 HTML 元素集合是否更新，length 变量保存的只是当初赋值时 HTML 元素集合的长度。
HTML 元素集合
HTML 元素集合是包含了 DOM 节点引用的类数组对象。可以用以下方法或属性得到一个 HTML 元素集合：
- document.getElementsByName()
- document.getElementsByTagName()
- document.getElementsByClassName()
- document.images 页面中所有 img 元素
- document.links 页面中所有 a 元素
- document.forms 页面中所有表单元素
- document.forms[0].elements 页面中第一个表单的所有字段
HTML 元素集合处于一种“实时的状态”，这意味着底层文档对象更新时，它也会自动更新，也就是说，HTML 元素集合与底层的文档对象之间保持连接。正因如此，每当你想从 HTML 元素集合中获取一些信息时，都会产生一次查询操作，这正是低效之源。
选择器 API
querySelectorAll() 原生 DOM 方法，比使用 JS 和 getElementById 之类的方法遍历元素要快的多，并且返回的是一个包含匹配节点的类数组对象，而非 HTML 元素集合。因此，返回的节点不会对应实时的文档结构，也避免了之前由于 HTML 集合引起的性能问题。
重绘与重排（Repaints & Reflows）
浏览器用来显示页面的所有“组件”，有：HTML 标签、JS、CSS、图片——之后会解析并生成两个内部的数据结构：
- DOM 树（表示页面结构）
- 渲染树（表示 DOM 节点应该如何表示）
DOM 树中的每一个需要显示的节点在渲染树中至少存在一个对应的节点。
渲染树中的节点被称为“帧（frames）”或“盒（boxes）”，符合 CSS 盒模型的定义，将页面元素理解为一个具有 padding、margin、border 和 position 的盒子。
绘制：一旦渲染树构建完成，浏览器就开始显示页面元素。
重排：当 DOM 的变化影响了元素的几何属性（宽、高）—— 比如改变了边框的宽度或者给一个段落增加一些文字导致其行数的增加——浏览器就需要重新计算元素的几何属性。同样，页面中其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分消失，重新构建渲染树。
重绘：重排完成后，浏览器会重新将受到影响的部分绘制到浏览器中。
如果改变的不是元素的几何属性，如：改变元素的背景颜色，不会发生重排，只会发生一次重绘，因为元素的布局并没有改变。
【建议】：不管是重绘还是重排，都是代价昂贵的操作，它们会导致 web 应用程序的 UI 反应迟钝，应当尽可能的减少这类过程的发生。
重排发生的情境：
- 添加或删除可见的 DOM 元素
- 元素位置的改变
- 元素尺寸的改变（padding、margin、border、height、width）
- 内容改变（文本改变或图片尺寸改变）
- 页面渲染器初始化
- 浏览器窗口尺寸改变
- 滚动条的出现
最小化重绘和重排
改变样式：
示例：
var el = document.getElementById("myDiv");
el.style.borderLeft = "1px";
el.style.borderRight = "2px";
el.style.padding = "5px";
示例中，元素的三个样式被改变，而且每一个都会影响元素的几何结构。在最糟糕的情况下，这段代码会触发三次重排（大部分现代浏览器为此做了优化，只会触发一次重排）。
【推荐】：合并所有样式修改，一次性处理。
var el = document.getElementById("myDiv");
el.style.cssText = "border-left: 1px; border-right: 2px; padding: 5px;";
批量修改 DOM：
当你需要对 DOM 元素进行一系列操作的时候，不妨按照如下步骤：
- 使元素脱离文档流
- 对其应用多重改变
- 把元素带回文档中
【优点】：只有第一步和第三部会分别触发一次重排。但如果不使用这种方式，第二步可能会产生更多次重排。
【方法】：DOM 元素脱离文档流：
- 隐藏元素（display: none）
- 使用文档片段（document fragment）在当前 DOM 之外构建一个子树，再把它拷贝回文档。
- 将原始元素拷贝到一个脱离文档的节点中，修改副本，完成后再替换原始元素。
让动画元素脱离文档流：
一般情况下，重排只影响渲染树中的一小部分，但也可能影响很大的一部分，甚至是整个渲染树。浏览器所需的重排次数越少，应用程序的响应速度也就越快。
【方法】：
- 动画展示阶段：使用绝对定位让页面上的动画脱离文档流。
- 动画结束时，将元素恢复定位。
IE 的 :hover
从 IE7 开始，IE 允许在任何元素上使用 :hover 这个 CSS 选择器。然而，有大量元素使用 :hover，会导致浏览器运行变慢。
事件委托（Event Delegation）
这一个优化手段也是在前端求职面试中的高频题目。
当页面中有大量的元素，并且这些元素都需要绑定事件处理器。每绑定一个事件处理器都是有代价的，要么加重了页面负担，要么增加了运行期的执行时间。
- 事件绑定会占用处理时间，而且浏览器需要跟踪每个事件处理器，这也会占用更多的内存。
- 当这些工作结束时，这些事件处理器中的绝大多数都是不再需要的（并不是 100% 的按钮与链接都会被用户点击），因此有很多工作是没有必要的。
【原理】：事件逐层冒泡并能被父级元素捕获，只需要给外层元素绑定一个处理器，就可以处理在其子元素上触发的所有事件。
【注意】：
- 访问事件对象，判断事件源。
- 按需取消文档树中的冒泡。
- 按需阻止默认动作。
网友评论