这几天分享一下我看《高性能 JavaScript》的学习笔记，希望能对大家有所帮助。
如果说前面两章日常工作中不太关注，那么 DOM 优化确实我们必知必会的知识点了。
天生就慢
首先，DOM 天生就是非常慢的。为什么呢？因为 DOM 和 JavaScript 运行环境是两个环境，所以两者通信只能通过接口连接。就像是 DOM 和 JavaScript 运行时是两个岛屿，中间只能通过一艘小船来往。
所以，DOM 优化的核心就是尽量将更多的处理停留在 JavaScript 运行时这座小岛上，减少使用小船来往的次数。或者说尽量在 JavaScript 端处理逻辑，只在必要时访问 DOM。
DOM 的修改
- 由于 API 交互特性，访问 DOM 的次数越多，代码运行的速度必然越慢。
- 修改 DOM 元素有两种方式：element.innerHTML 和 document.createElement() 。两者的性能在新版本浏览器上差不多，而在老版本浏览器中 innerHTML 会更好。（个人觉得 innerHTML 写法也更加清晰）
- 另外一种修改 DOM 的方式是通过 element.cloneNodes() 来克隆元素节点，修改克隆的元素然后替换 DOM 中的元素。
HTML 集合
我们使用一些 API 能够获取 HTML 集合，HTML 集合是一个带有 length 属性酷似数组的对象。它有一个很重要的特性就是 HTML 集合会随着 DOM 元素的变化而变化。
- HTML 集合的 length 是会随着 DOM 元素数量变化的，所以不要直接使用 length 属性。
- 遍历数组要比遍历 HTML 集合的速度快。
- 如果要使用 HTML 集合的 length，可以先将 length 保存为局部变量。
- 多使用局部变量保存和引用 HTML 集合的信息，减少访问 DOM 的次数。
以下 DOM API 能够获取 HTML 集合。
- document.getElementByName()
- document.getElementByTagName()
- document.getElementByClass()
- element.childNodes 是通过某个元素获取他的子元素的，获取的也是 HTML 集合。
更快的 API
对于获取元素节点的 DOM 方法，有只获取元素节点和获取所有节点两类。性能上显然前者的性能会更高。
| 只获取元素节点 | 获取所有节点 |
|---|---|
| children | childNodes |
| childElementCount | childNodes.length |
| firstElementChild | firstChild |
| lastElementChild | lastChild |
| nextElementSibling | nextSibling |
| previousElementSibling | previousSibling |
在遍历 DOM 节点上，很多 DOM 方法可以做到。
- document.getElementByName()
- document.getElementByTagName()
- document.getElementByClass()
- document.querySelectorAll()
- ……
其中 document.querySelectorAll() 使用了 CSS 选择器来获取 NodeList 数组对象。这种写法不仅方便，而且性能上也优于其他方法。
所以，如果浏览器支持，尽量使用上述的这些方法，因为这些 API 更快！
DOM 绘制过程
对于 DOM 性能而言，重绘和重排是最重要的知识点了。下面先复习一下浏览器工作原理：
- 浏览器解析 HTML 获取 DOM 树。
- 浏览器解析 CSS 获取 CSSOM 规则树。
- 将 CSS 规则树应用到 DOM 树上构成渲染树。
- 使用渲染树上的样式计算尺寸和位置，解析排版。
- 更具渲染树属性生成位图，即绘制。
- 最后使用浏览器 API 呈现这些有排版的位图。
- 如果页面元素尺寸有变化，进行重新排版和绘制。
- 如果页面无尺寸变化，而是像背景颜色这样的变化，则会进行重新绘制。
重排何时发生？
- 添加或删除可见的 DOM 元素
- 元素位置改变
- 元素尺寸改变（包括：margin、padding、border-width、width、height 等属性）
- 内容改变，如：文本改变、图片尺寸改变。
- 页面渲染器初始化
- 浏览器创建尺寸改变
立即重排
其实，在浏览器中重排是有优化机制的。浏览器会队列化修改并批量执行重排行为。但是使用了一些 API 后会立即进行重排行为。主要是一些查询当前布局信息的 API 方法：
- offsetTop, offsetLeft, offsetWidth, offsetHeight
- scrollTop, scrollLeft, scrollWidth, scrollHeight
- clientTop, clientLeft, clientWidth, clientHeight
- getComputedStyle() （IE 中的当前样式）
优化方案是不在布局信息改变时查询布局信息。
最小化重绘和重排
最小化重绘和重排的方式是尽量减少修改 DOM 的次数。
// bad
var el = document.getElementById('mydiv')
el.style.borderLeft = '1px'
el.syle.borderRight = '1px'
el.style.padding = '5px'
// good
el.style.cssText = 'border-left: 1px; border-right: 1px; padding: 5px;'
// good
el.className = 'active'
批量修改 DOM 方案很好的减少了修改 DOM 的次数。大致方案如下：
- 将需要修改的元素节点脱离文档流。
- 修改脱离文档流的元素节点。
- 将元素带入文档流。
具体的方案有三种：
- 将需要修改的 DOM 隐藏（display: none）后对节点进行修改，最后再将隐藏的节点显示出来。
var ul = document.getElementById('list')
ul.style.display = 'none'
appendDataToElement(ul, data)
ul.style.display = 'block'
- 使用 document.createDocumentFragment() 方法创建文档片段，在文档片段中定义修改的 DOM，最后将文档片段应用到 DOM 中。
var fragment = document.createDocumentFragment()
appendDataToElement(fragment, data)
document.getElementById('list').appendChild(fragment)
- 使用 document.cloneNode() 克隆元素节点，修改后用克隆节点替换原有节点。
var old = document.getElementById('list')
var clone = old.cloneNode(true)
appendDataToElement(clone, data)
old.parentNode.replaceChild(clone, old)
在基于现有元素尺寸修改尺寸时，最好使用局部变量缓存布局信息，这样可以减少访问 DOM 的次数。
事件委托
事件监听绑定也有一定的性能开销，可以使用事件委托方法来减少嵌套组件的重复事件绑定，具体可以看下 JavaScript 事件委托一文。
小结
DOM 非常慢，非常消耗性能。所以 DOM 性能优化是前端优化非常重要的一环。下面是主要内容：
- 最小化 DOM 的访问次数，尽量将工作交给 JavaScript 去完成。
- 小心 HTML 集合与数组的差别 —— HTML 集合会根据 DOM 的改变而发生改变。数组的性能优于 HTML 集合。
- 使用批量修改的方式减少重排和重绘次数。
- 使用事件委托减少事件绑定数量。
最后
由于书中内容太多，讲的比较笼统。不过还是希望能够对大家有所帮助吧。如果有什么问题欢迎留言和我沟通。
最后我有个疑问，既然说改变布局会产生重排，那么像 transform + translate 这种变形动画改变了大小的情况，重排的频率如何，是否特别消耗性能。相比于不断的修改 top、left、width 和 height 的性能如何（想必是更高的）？
这个问题之后有空我会做个调研写篇文章分享一下~
