首页 > 代码库 > 前端性能优化--为什么DOM操作慢?

前端性能优化--为什么DOM操作慢?

作为一个前端,不能不考虑性能问题。对于大多数前端来说,性能优化的方法可能包括以下这些:

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

等等……

有兴趣的同学,可以自行搜索雅虎关于前端优化的十四条规则。但这些规则当中,有多少是需要前端工程师付诸实践的?就我来说,CDN、缓存的设置,就是不需要我去关心的(作为一个苦逼外包,是没有权限去生产环境操作的)也就是说,一些优化的方法,可能只是需要前端工程师知道,说得难听点,就是应付面试,工作中遇不到。反而是一些工作中真正遇到的难题,面试中却很少被问到(纯属个人经验)。有些问题,同行们(包括我)可能稀里糊涂地用正确的方式解决了,但实际上,却并不知道自己为什么这样做。

<iframe id="iframe_0.5564985764083303" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22https://ooo.0o0.ooo/2016/04/23/571c41d7034af.png?_=5427213%22%20style=%22border:none;max-width:903px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.5564985764083303‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>

以上三本书,有幸拜读。说不上醍醐灌顶,至少是让我认识到了差距。

我打算把自己的收获记录下来,希望对大家有所帮助。文中可能出现错误,希望大家能尽量用友善的语气提出来,谢谢!(づ ̄ 3 ̄)づ

不仅要避免去操作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,‘‘)}//badbodyStyle.color=‘red‘;tmp=computed.backgroundColor;bodyStyle.color=‘green‘;tmp=computed.backgroundImage;//goodbodyStyle.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》

前端性能优化--为什么DOM操作慢?