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

最新推荐文章于 2024-09-27 09:34:18 发布

weixin_30539835

最新推荐文章于 2024-09-27 09:34:18 发布

阅读量83

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zzd0916/p/7743051.html

版权

原理：

操作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)

转载于:https://www.cnblogs.com/zzd0916/p/7743051.html