批量批改DOM

批量修改DOM

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

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

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

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

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

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遍历和重排次数最少。

?

?

?

?