下面的代码看起来有点神经质，仅仅是个demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文档碎片性能测试——普通方法</title>
<script>
window.onload = function() {
var oBtn = document.getElementById("btn1");
var oUl = document.getElementById("ul1");
var iStart = new Date().getTime(); //开始执行的时间
oBtn.onclick = function() {
//普通追加
for (var i = 0; i < 1000; i++) { //使用for循环创建100000个li节点，并一个个的挂载在ul下面
var oLi = document.createElement("li");
oUl.appendChild(oLi);
}
console.log(new Date().getTime() - iStart); //打印出最后这个程序耗费的而时间
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="普通" />
<ul id="ul1">
<li>li</li>
</ul>
</body>
</html>
碎片化:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文档碎片性能测试</title>
<script>
window.onload = function() {
var oBtn = document.getElementById("btn1");
var oUl = document.getElementById("ul1");
var iStart = new Date().getTime();
oBtn.onclick = function() {
//文档碎片方式
var oFrag = document.createDocumentFragment(); //建立一个文档对象，作为新增节点的临时容器，最后将这个容器连的内容直接挂载在父节点ul下面。
for (var i = 0; i < 10000; i++) {
var oLi = document.createElement("li");
oFrag.appendChild(oLi);
}
oUl.appendChild(oFrag);
console.log(new Date().getTime() - iStart);
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="碎片" />
<ul id="ul1">
<li>li</li>
</ul>
</body>
</html>
碎片化就是操作一个文档对象，挂载结束后再一次性append到实际DOM上面去，理论上性能比多次操作dom高，个人感觉与拼字符串异曲同工
版权声明：本文为u014071104原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。