批量修改DOM

当你需要对DOM元素进行一系列操作时，可以通过一下步骤来减少重绘和重排的次数：

1. 使元素脱离文档流。
2. 对其应用多重改变。
3. 把元素带回文档中。

该过程会触发两次重排---第一步和第三步。如果你忽略这两个步骤，那么在第二部所产生的人和修改都会触发一次重排。

有三种基本方法可以使DOM脱离文档：

1. 隐藏元素，应用修改，重新显示。
2. 使用文档片段（document fragment）在当前DOM之外构建一个子树，再把它拷贝回文档。
3. 将原始元素拷贝到一个脱离文档的节点中，修改副本，完成后再替换原始元素。

var data = [
   {
     "name":"name1"
     "url":"url1"
   },
   {
    "name":"name2"
     "url":"url2"
   }
], appendToElement = 要改变的节点对象;

function appendDataToElement(appendToElement, data) {
   var a, li;
   for (var i=0, max=data.length; i<max; i++ ){
     a = document.createElement("a");
     a.href = data[i].url;
     a.appendChild(document.createTextNode(data[i].name));
     li = document.createElment("li");
     li.appendChild(a);
     appendToElment.appendChild("li");
   }
}

 

// 隐藏元素，应用修改，重新显示

var ul = document.getElementById("mylist");
ul.style.display = "none";
appendDataToElment(ul, data);
ul.style.display = "block";

 

//使用文档片段（document fragment）在当前DOM之外构建一个子树，再把它拷//贝回文档。
var fragment = document.createDocumentFragment();
appendDataToElment(fragment, data);
document.getElementById("mylist").appendChild(fragment);

 

//将原始元素拷贝到一个脱离文档的节点中，修改副本，完成后再替换原始元素。
var old = document.getElementById("mylist");
var clone = old.cloneNode(true);
appendDataToElement(clone, data);
old.parentNode.relaceChild(clone, old);

  注：推荐尽可能地使用文档片断（第二个方案），因为它们所产生的DOM遍历和重排次数最少。