DOM编程中，提升程序运行速度须要注意的一些点

前言

由于浏览器中一般会将DOM和javascript独立实现，两个相互独立的功能须要经过接口彼此连接，就会产生新能上的消耗。访问DOM就会产生消耗，修改DOM的影响更大。所以，减小对DOM的操做，把运算多留在ECMAScript中处理是理想的选择。

DOM元素和方法

在操做DOM元素的方法中，有返回html集合的方法，也有返回Nodelist（一个对元素的引用列表）的方法。

返回html集合的方法（html集合与文档保持链接，文档更新，集合就会随之更新，所以使用html进行一些遍历操做或者别的操做，会很是低效）：

document.getElementsByName()
document.getElementsByClassName()
document.getElementsByTagName()
复制代码

返回Nodelist的方法（包含返回节点的类数组对象）：

document.querySelectorAll('css selector')
document.querySelector('css selector')
复制代码

重绘和重排

浏览器在下载完页面中的资源后（JS,CSS,HTML,图片），会解析生成两个内部的数据结构——DOM树（表示页面结构）和渲染树（表示DOM节点如何显示）。

当修改DOM的几何属性以后，浏览器会使渲染树中受到改变和影响的部分失效，从新构造对应的渲染树，这个过程称做“重排”。完成重拍后，浏览器将从新绘制受影响的部分到屏幕中，这个过程称为“重绘”。

什么时候会发生重排：

一、添加、删除可见的DOM元素
二、改变DOM元素的大小，边距等。
三、改变DOM元素的位置。
四、DOM元素的内容发生改变，文本或者图片等。
五、页面渲染初始化和浏览器窗口的改变。
复制代码

因为每次重排都会产生性能消耗，浏览器会经过队列化批量执行的方式来优化重排过程。可是，在一些对DOM的操做中，会无心间刷新队列当即执行重排：

一、offsetTop。。。
二、scrollTop。。。
三、clientTop。。。
四、getComputedStyle()
复制代码

以上操做须要获取实时的布局信息，所以不等不让浏览器强制刷新队列以返回正确值。

批量修改DOM下降重排重绘的频率以提高性能

基本思路是，将须要批量修改的DOM从文档流中摘出来（也能够是复制出来），而后对其一顿操做，再把操做后的部分放回去。

有集中方法能够使DOM脱离文档流：

一、隐藏DOM元素
二、建立一个文档片断（document fragment）
三、将原始的DOM元素拷贝出来，修改后替换原文档
复制代码