《高性能javascript》学习笔记三

三、dom操作的性能问题

1、为什么dom操作普遍较慢？

dom（文档对象模型）和js独立实现。我们通过js去控制、修改dom，用的办法就是api。因为js和dom在浏览器内部独立实现，所以通过js操作dom就会带来性能消耗。

2、优化dom操作的方式

（1）优化dom操作最直接也最简单的方式，就是减少对dom访问与操作的次数。尽量优先处理数据，然后统一操作dom。

（2）值得一提的是，某个dom元素内插入其他dom对象时，用innerHTML插入字符串的方法，比documen,createElement()方法要更快一些。

（3）另外，克隆已有dom元素也比创建新dom元素更快一些（虽然不明显）。

（4）用js内置的api（firstElementChild、document.querySelectorAll()等）而非引入插件或者其他旧的api(firstChild等)。

（5）减少重绘和回流

3、减少重绘与回流（又称重排）

浏览器在下载完页面上的组件（html标记、js、css、图片等资源），会解析生成两个数据结构：dom树和render树。dom树上的每一个需要显示的节点在render树上至少存在一个对应的节点（display:none的元素没有，但是visibility:hidden的节点有）。dom树和render树构建完成，则绘制页面。

当页面元素的非几何尺寸的属性（颜色、背景颜色、字体等）发生变化时，就会发生重绘（repaint）。即render树发生变化，页面会重新绘制。

当页面上的元素的几何尺寸发生变化造成页面布局发生改变时，页面会计算相关元素的几何属性，然后重新绘制页面元素，这就是回流。一次回流可能会造成多次重绘。

常见的造成回流的操作包括：

添加或删除可见的dom元素；

元素位置改变；

元素尺寸改变（包括宽高、边距、边框厚度）；

内容改变（更改文本内容、图片替换）；

页面渲染器初始化；

浏览器窗口尺寸改变；

（滚动条出现时，会造成当前这个元素及子元素的重排。页面出现滚动条时，会造成整个页面的重排）。

 

大多数浏览器会批量执行队列优化重排过程。

但是有些操作会强制刷新队列并要求当前任务立刻执行，包括以下方法：

offsetTop,offsetBottom,offsetLeft,offsetRight,

clientTop,clientLeft,clientWidth,clientHeigth

scrollTop,scrollLeft,scrollWidth,scrollHeight

getComputedStyle()

因为以上的方法需要返回最新的布局信息，因此浏览器不得不执行渲染队列中的待处理变化，触发重排，以返回正确的值。

还有一个技巧，是在改变属性中间不要强制触发重排。先全部处理完dom操作，再使用那些强制触发重排的方法。

如：

还可以一次性改写dom属性

注意cssText会覆盖行内样式。

4、批量修改dom

当需要对dom进行一系列操作造成多次回流和重绘时，可通过以下步骤减少回流和重绘的次数

（1）时元素脱离文档流；

（2）修改dom；

（3）把元素带回文档中。

以上三个步骤只会造成两次回流。

使元素脱离文档流的方法：

（1）隐藏元素

（2）使用文档片段（fragment）

（3）将原始元素拷贝到一个脱离文档的节点中，修改副本，然后替换原始元素。

文档片段，可用document.createDocumentFragment()创建，然后进行操作。

拷贝元素的方法如下：

推荐使用文档片段的方法（个人喜好第一种，操作最简单，也最直接）。

4、缓存布局信息

持续操作dom属性时，使用局部变量接收，操作数据然后操作dom，而非不断的获取并更新dom属性

5、使元素脱离动画流

动画过程中，需要不断的更新布局信息。可以让动画的元素使用绝对或者固定定位，因此动画过程中不会造成整个页面的重绘或者回流。动画结束时恢复定位。这样只会造成两次重排。

6、事件委托

每绑定一个事件处理器都是有代价的。要么增加了页面的负担，要么增加了运行期的执行时间。在页面初始化时，事件绑定也占用了处理时间。因此，使用事件委托的方式，可以减少事件处理器的绑定，节约性能。

事件委托的具体操作在此不做赘述。