浅谈怎么提高JavaScript中DOM的运转速度（js操作dom为什么消耗性能）-编程开发-知优网

在Web开发中，JavaScript的一个很重要的作用就是对DOM进行操作，可你知道么？对DOM的操作是非常昂贵的，因为这会导致浏览器执行回流操作，而执行了过多的回流操作，你就会发现自己的网站变得越来越慢了，我们应该尽可能的减少DOM操作。本文将给出了一些指导性原则，比如在什么时候应该对DOM可以进行什么样的操作等。

咱们都知道，DOM操作的功率是很低的，并且不是一般的慢，并且这也是引发功能问题的常见问题之一。为什么会慢呢？由于对DOM的修正为影响网页的用户界面，重绘页面是一项贵重的操作。太多的DOM操作会导致一系列的重绘操作，为了保证履行成果的准确性，一切的修正操作是按次序同步履行的。咱们称这个进程叫做回流（reflow），一起这也是最贵重的浏览器操作之一。回流操作首要会发生在几种情况下：

◆当对DOM节点履行新增或许删去操作时。

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

◆当获取一个有必要通过核算的尺度值时，比方拜访offsetWidth、clientHeight或许其他需求通过核算的CSS值（在兼容DOM的浏览器中，能够通过getComputedStyle函数获取；在IE中，能够通过currentStyle特点获取）。
解决问题的要害，便是约束通过DOM操作所引发回流的次数。大部分浏览器都不会在JavaScript的履行进程中更新DOM。相应的，这些浏览器将对对DOM的操作放进一个行列，并在JavaScript脚本履行结束今后按次序一次履行结束。也便是说，在JavaScript履行的进程中，用户不能和浏览器进行互动，直到一个回流操作被履行。（失控脚本对话框会触发回流操作，由于他履行了一个间断JavaScript履行的操作，此刻会对用户界面进行更新）

假如要削减由于DOM修正带来的回流操作，有两个根本的办法。***个便是在对当时DOM进行操作之前，尽可能多的做一些准备工作。一个经典的比如便是向document目标中增加许多DOM节点：

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

这段代码的功率是很低的，由于他在每次循环中都会修正当时DOM结构。为了进步功能，咱们需求将这个次数降到***，关于这个事例来说，***的办法是树立一个文档碎片（document fragment），作为那些已创立元素元素的暂时容器，***一次将容器的内容直接增加到父节点中：

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

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

【修改引荐】