浅谈如何提升JavaScript中DOM的运行速度

我们都知道，DOM操作的效率是很低的，而且不是一般的慢，而且这也是引发性能问题的常见问题之一。为什么会慢呢？因为对DOM的修改为影响网页的用户界面，重绘页面是一项昂贵的操作。太多的DOM操作会导致一系列的重绘操作，为了确保执行结果的准确性，所有的修改操作是按顺序同步执行的。我们称这个过程叫做回流（reflow），同时这也是最昂贵的浏览器操作之一。回流操作主要会发生在几种情况下：

创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、做网站、灵川网络推广、小程序制作、灵川网络营销、灵川企业策划、灵川品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联公司为所有大学生创业者提供灵川建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com

◆当对DOM节点执行新增或者删除操作时。

◆动态设置一个样式时（比如element.style.width="10px"）。

◆当获取一个必须经过计算的尺寸值时，比如访问offsetWidth、clientHeight或者其他需要经过计算的CSS值（在兼容DOM的浏览器中，可以通过getComputedStyle函数获取；在IE中，可以通过currentStyle属性获取）。
解决问题的关键，就是限制通过DOM操作所引发回流的次数。大部分浏览器都不会在JavaScript的执行过程中更新DOM。相应的，这些浏览器将对对DOM的操作放进一个队列，并在JavaScript脚本执行完毕以后按顺序一次执行完毕。也就是说，在JavaScript执行的过程中，用户不能和浏览器进行互动，直到一个回流操作被执行。（ 失控脚本对话框 会触发回流操作，因为他执行了一个中止JavaScript执行的操作，此时会对用户界面进行更新）

如果要减少由于DOM修改带来的回流操作，有两个基本的方法。***个就是在对当前DOM进行操作之前，尽可能多的做一些准备工作。一个经典的例子就是向document对象中添加很多DOM节点：

 
 
 

  
  
  
for (var i=0; i < items.length; i++){  
  
  
  
    var item = document.createElement("li");  
  
  
  
    item.appendChild(document.createTextNode("Option " + i);  
  
  
  
    list.appendChild(item);  
  
  
  
}  
 
 
 

这段代码的效率是很低的，因为他在每次循环中都会修改当前DOM结构。为了提高性能，我们需要将这个次数降到***，对于这个案例来说，***的办法是建立一个文档碎片（document fragment），作为那些已创建元素元素的临时容器，***一次将容器的内容直接添加到父节点中：

 
 
 

  
  
  
var fragment = document.createDocumentFragment();  
  
  
  
for (var i=0; i < items.length; i++){  
  
  
  
    var item = document.createElement("li");  
  
  
  
    item.appendChild(document.createTextNode("Option " + i);  
  
  
  
    fragment.appendChild(item);  
  
  
  
}  
  
  
  
list.appendChild(fragment); 
 
 
 

经过调整的代码，只会修改一次当前DOM的结构，就在***一行，而在这之前，我们用文档碎片来保存那些中间结果。因为文档碎片没有任何可见内容，所以这类修改不会触发回流操作。实际上，文档碎片也不能被添加到DOM中，我们需要将它作为参数传给appendChild函数，而实际上添加的不是文档碎片本身，而是它下面的所有子元素。

当前题目：浅谈如何提升JavaScript中DOM的运行速度
本文URL：http://www.hantingmc.com/qtweb/news19/400669.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联