记录一下前端性能优化-为何操作DOM会变慢？
对于大多数前端来说，性能优化的方法可能包括以下这些：
- 减少HTTP请求（合并css、js，雪碧图/base64图片）
- 压缩（css、js、图片皆可压缩）
- 样式表放头部，脚本放底部
- 使用CDN（这部分，不少前端都不用考虑，负责发布的兄弟可能会负责搞好）
- 缓存……
不仅要避免去操作DOM，还要减少去访问DOM的次数。
在浏览器中，DOM和JS的实现，用的并不是同一个“东西”。比如说，我们最熟悉的chrome，JS引擎是V8，而DOM和渲染，靠的是WebCore库。也就是说，DOM和JS是两个独立的个体。
把DOM和JavaScript各自想象成一个岛屿，它们之间用收费桥梁连接。
--《高性能JavaScript》
1.添加页面元素，innerHTML vs DOM方法。
document.getElementById('test').innerHTML='<div>test</div>';
var t=document.createElement('div');
t.appendChild(document.createTextNode('test'));
document.getElementById('test').appendChild(t);
以上分别使用两种方法，向id='test'的元素中添加一个div。之前，大家可能一直被灌输的思想是innerHTML更快一些，真的是这样么？
还真是，至少在IE中是这样，但在基于webkit的新版浏览器中，使用DOM方法会稍快一些。所以，到底使用哪一种方法，还是应该有点争议的。我个人是喜欢innerHTML，因为用起来更简单。
此外，当需要添加大量相同的元素时，cloneNode比直接创建元素，稍微快一点。
2.访问元素的正确方法。
2.1 遍历集合vs遍历数组
当我们使用document.getElementsByName、document.getElementsByTagName、document.getElementsByClassName、docuemnt.images等方式来获取DOM元素时，我们得到的是一个HTML集合，这个集合始终与底层文档保持连接，每次去获取集合的信息时，都会重复执行一次查询。
var divs=document.getElementByTagName('div'); for(var i=0;i<divs.length;i++){ document.body.append(document.createElement('div')) }
如果不去运行，我们可能以为上面的代码会新添加几个div元素在页面中，但实际上，因为每次添加完一个div后，divs.length都会被更新（加一），所以，这个循环永远不会停止。解决办法非常简单
var divs=document.getElementByTagName('div'); for(var i=0,len=divs.length;i<len;i++){ document.body.append(document.createElement('div')) }
另外，HTML集合并不是一个数组，如果我们需要对这个集合进行遍历，可以先把它拷贝进一个数组，这样再遍历的时候，效率更高。
function toArray(coll){ for(var i=0,a=[],len=coll.length;i<len;i++){ a[i]=coll[i] } return a; }
2.2访问元素属性
当遍历一个集合时，length属性应被缓存在循环外部，能够避免2.1中的逻辑错误；集合存储在局部变量中，也能够提高效率。此外，当对同一个DOM元素的属性进行访问时，把这个DOM缓存成一个局部变量，是更好的选择。
//只是做演示，真实情况中，当然没有这样的需求 //最差的方式 function fo1(){ var name=''; for(var i=0;i<document.getElementsByTagName('div');i++){ name=document.getElementsByTagName('div').nodeName; name=document.getElementsByTagName('div').nodeType; } return name; } //好一点的方式 function fo2(){ var name=''; var coll=document.getElementsByTagName('div'); for(var i=0,len=coll.length;i<len;i++){ name=coll[i].nodeName; name=coll[i].nodeType; } return name; } //更好的方式 function fo3(){ var name=''; var coll=document.getElementsByTagName('div'); var ele=null; for(var i=0,len=coll.length;i<len;i++){ el=coll[i]; name=el.nodeName; name=el.nodeType; } }
3.选择器
前面已经提到，document.getElementsByName、document.getElementsByTagName、document.getElementsByClassName、docuemnt.images等方式，获取到的是HTML集合，效率低下；而querySelector以及querySelectorAll与之相比，得到的是一个NodeList，它是一个类数组对象，不会带来HTML集合的问题。而且，这个API在获取元素时，更加方便。唯一的问题，是要考虑目标浏览器是否提供支持。
4.重绘和重排
4.1何时重绘、重排？
重绘并不一定导致重排，比如修改某个元素的颜色，只会导致重绘；而重排之后，浏览器需要重新绘制受重排影响的部分。导致重排的原因有：
- 添加或删除DOM元素
- 元素位置、大小、内容改变
- 浏览器窗口大小改变
- 滚动条出现
因为重排和重绘的操作十分昂贵，浏览器会通过队列化修改并批量执行的方式，来进行优化（我的理解是，浏览器通过队列化和批量执行的方式，减少了重绘的次数）。比如：
//这段代码，并不会去重绘三次 var bodyStyle=document.body.style; bodyStyle.color='red'; bodyStyle.color='black'; bodyStyle.color='green';
获取布局的操作，会导致队列刷新，浏览器的优化效果也就没有了。要避免在布局信息改变时，获取下列属性：
- offsetTop,offsetLeft,offsetWidth,offsetHeight;
- scrollTop,scrollLeft,scrollWidth,scrollHeight;
- clientTop,clientLeft,clientWidth,clientHeight;
- getComputedStyle()/currentStyle
4.2 最小化重排、重绘的建议
建议：不要再修改布局信息的时候，去查询布局信息
var computed; var tmp=''; var bodyStyle=document.body.style; if(document.body.currentStyle){ computed=document.body.currentStyle }else{ computed=document.defaultView.getComputedStyle(document.body,'') } //bad bodyStyle.color='red'; tmp=computed.backgroundColor; bodyStyle.color='green'; tmp=computed.backgroundImage; //good bodyStyle.color='red'; bodyStyle.color='green'; tmp=computed.backgroundColor; tmp=computed.backgroundImage;
修改一个元素的多个style时，一次性修改，而不是多次（虽然多次修改，经过现代浏览器的优化，也只会导致一次重排，但在老旧的浏览器中，仍然会导致多次）。建议：能用css的class解决的，就尽量不用内联样式。
:hover会降低响应速度，在处理很大的列表时，避免使用。
5事件委托
每绑定一个事件处理器，都是有代价的。如果有大量的元素需要绑定时间，尝试使用事件委托。分三步
- 判断事件来源
- 根据不同来源，进行不同操作
- 取消冒泡，阻止默认行为(可选)
document.querySelector('#nav').onclick=function (e) {
if (e.target.nodeName=='A'){
foo();
}else{
foo2()
}
}
总结：
- 减少DOM访问次数
- 多次访问同一DOM，应该用局部变量缓存该DOM
- 尽可能使用querySelector，而不是使用获取HTML集合的API
- 注意重排和重绘
- 使用事件委托，减少绑定事件的数量
- 更多内容，可以阅读《高性能JavaScript》
