《高性能javascript》随记 - DOM Scripting

DOM操作的代价非常昂贵，对元素节点的访问和修改、样式、布局的改变以及DOM事件的绑定都影响着网页的性能。

---

批量修改DOM

如果要对元素节点进行多次读写，那么最好的方式是：把多次操作在DOM节点树外统一处理好，然后再一次性更新DOM节点树，具体的方法大致包含下面几种。

• 先隐藏要操作的元素节点，然后对这些节点进行操作，最后再显示出来。
• 先克隆要操作的元素节点，然后对克隆出来的节点进行操作，最后覆盖原来的元素节点。
• 在文档外创建并更新一个文档片段（createDocumentFragment()），然后在附加在原始节点上。

缓存信息布局

浏览器通过队列化修改和批量运行的方法，尽量减少重排版的次数。当你查询布局信息（如偏移量、滚动条位置、风格属性）的时候，浏览器将会刷新队列并执行所有修改操作，以返回最新的数值。所以，尽量减少对布局信息的查询次数，并用局部变量参与计算。

将元素提出动画流

重排版有时只影响渲染树的一小部分，但有时候也会是一大部分，下面这些步骤可以避免对大部分页面进行重排版：

• 对动画元素使用绝对定位，使他脱离页面布局流。
• 启动元素动画。当它扩大时会覆盖部分页面。
• 当动画结束时，重新定位，从而只一次下移文档其他元素的位置。

事件托管

当一个页面存在大量的元素，并且很多元素都有一个或多个事件绑定的时候，会影响页面的性能，这个时候才用事件托管机制可以提升页面的运行性能：你只需要监听事件，看看他们是不是你感兴趣的元素发出的。这样可以最小化事件句柄数量。