批量修改DOM的性能改进

来源：互联网发布：挖财记账理财软件编辑：程序博客网时间：2024/05/22 14:20

批量修改DOM通过这些步骤来减少重绘和重排的次数1、使元素脱离文档流2、对其应用多重改变3、把元素带回文档这个过程只有第一、三会触发重排，如果忽略这两个步骤，那么第二步所产生的任何修改都会触发一次重排。有三种方法使Dom脱离文档1、隐藏元素，应用修改，重新显示2、使用文档片段在当前DOM之外构建一个子树，再把它拷贝回文档3、将原始原始拷贝到一个脱离文档的节点中，修改副本，完成后再替换原始元素

<html><head><script type="text/javascript">function appendDataToElement(ul) {var data =[{"name" : "li1","url" : "www.litest1"},{"name" : "li2","url" : "www.litest2"}];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.createElement('li');li.appendChild(a);ul.appendChild(li);}}function test1() {var ul =document.getElementById("mylist");appendDataToElement(ul);}</script><title>Insert title here</title></head><body><ul id="mylist"><li><a href="www.q.com">q</a></li><li><a href="www.b.com">b</a></li></ul><form action=""><input type="button" onclick="test1()" value="test"></form></body></html>

关于重排，这种方法在更新列表的内容的时候不用担心重排问题但是当data数组的每一个新条目被附加到当前Dom树时会导致重排

第二种方法：

var ul =document.getElementById("mylist");ul.style.display ='none';appendDataToElement(ul);ul.style.display ='block';

第三种方法：

var fragment = document.createDocumentFragment();appendDataToElement(fragment);document.getElementById("mylist").appendChild(fragment);

该方法好处是当你附加一个片段到节点中时，实际上被添加的是该片段的子节点，，而不是片段本身，上面的代码只触发一次重排，而且只访问了一次实时的DOM

第四种方法：

var old = document.getElementById("mylist");var clone = old.cloneNode(true);appendDataToElement(clone);old.parentNode.replaceChild(clone, old);

推荐使用文档片段