记录一下前端性能优化-为什么操做DOM会变慢？

对于大多数前端来讲，性能优化的方法可能包括如下这些：

1. 减小HTTP请求（合并css、js，雪碧图/base64图片）
2. 压缩（css、js、图片皆可压缩）
3. 样式表放头部，脚本放底部
4. 使用CDN（这部分，很多前端都不用考虑，负责发布的兄弟可能会负责搞好）
5. 缓存……

　　

不只要避免去操做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》