createDocumentFragment 文档碎片提升dom增删的性能

原理：

操作dom会使得页面进行重新渲染，如果

经常性的对dom就行操作或者一次性操作dom较多，每一次操作都会使页面进行重新渲染，降低页面加载性能。

针对IE9以下，可以使用文档碎片（documentFragment）的方式就行dom操作的存储，最后再讲文档碎片加个指定节点上。

但是会影响标准浏览器性能（影响不大）。

 

例子：

html：

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>文档碎片</title>
	</head>
	<body>
		<ul id="ul">
		</ul>
	</body>
</html>

 

　　

 

javascript】：

var ul = document.getElementById("ul")
var oldDate = new Date().getTime();
var flagMent = document.createDocumentFragment();
for(var i=1 ; i<= 10000; i++){
	var uli = document.createElement("li");
	uli.innerHTML = "这是第"+i+"个li";
	//ul.appendChild(uli);
	flagMent.appendChild(uli);
}
ul.appendChild(flagMent);
var newDate = new Date().getTime();
console.log(newDate-oldDate)

　　

 

posted @ 2017-10-27 14:26  进击的小牛牛  阅读(227)  评论(0)  编辑  收藏  举报