批量修改DOM的性能改进

长平狐 发布于 2012/11/28 15:41
阅读 57
收藏 0
批量修改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);

推荐使用文档片段



原文链接:http://blog.csdn.net/longeremmy/article/details/8049363
加载中
返回顶部
顶部