DOM树优化面试题
今天上班在地铁上看到一篇阿里面试题。有人从性能上做了一些分析进行处理。。我一上班就去测试加以验证。。然后效果和别人不一样。测试数据发到论坛上。。供下一次分析讨论。。。今日立帖为证。问题：请把<body><p>第1行</p><p>第2行</p>...</body>（body之间有100个p元素）插入body里面，注意：需要考虑到性能问题。
一般回答：
for(var i=0;i<100;i++)
{
var op=document.createElement("p");
var oText=document.createTextNode(i);
op.appendChild(oText);
document.body.appendChild(op);
}
比较好一点的回答：
var lis = "",ul = document.createElement("ul");
//把li以字符串形式生成
for(var i = 1; i <= 100; i++) { lis += "<li>第" + i + "行</li>";}// 最后通过innerHTML插入ul里面
ul.innerHTML = lis;
//这里才操作dom，把ul插入到body
document.body.appendChild(ul);
题主倡导使用DocumentFragment文档碎片来进行性能优化。
最好的回答：
var oFrag=document.createDocumentFragment();
for(var i=0;i<100;i++)
{
var op=document.createElement("P");
var oText=document.createTextNode(i);
op.appendChild(oText);
oFrag.appendChild(op);
}
document.body.appendChild(oFrag);
====================================这是一条华丽的分隔符====================================
下面是我的测试与论证。。与题主背道相驰的效果。。但是要相信自己，实践出真知。以后有时间深度剖析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
console.time("time cost");
for(var i = 0; i < 100000; i++){
var p = document.createElement("p");
var text = document.createTextNode(i);
p.appendChild(text);
document.body.appendChild(p);
}
console.timeEnd("time cost");
console.log("注：取的五次时间。没有后面的小数点。可以求平均值。。但是不需要求平均值就知道谁的性能好了吧！")
console.log("上面测试时间消耗在： 235, 252, 149, 174, 195")
// console.time("time cost");
// var fragment = document.createDocumentFragment();
// for(var i = 0; i < 100000; i++){
// var p = document.createElement("p");
// var text = document.createTextNode(i);
// p.appendChild(text);
// fragment.appendChild(p);
// }
// document.body.appendChild(fragment);
// console.timeEnd("time cost");
//console.log("上面测试时间消耗在： 263, 257, 277, 292, 311")
// console.time("time cost");
// // Create the fragment
// var fragment = document.createDocumentFragment();
// //add DOM to fragment
// for(var i = 0; i < 100000; i++) {
// var spanNode = document.createElement("p");
// spanNode.innerHTML = i;
// fragment.appendChild(spanNode);
// }
// //add this DOM to body
// document.body.appendChild(fragment);
// console.timeEnd("time cost");
//console.log("上面测试时间消耗在： 450, 473, 461, 489, 470")
</script>
</body>
</html>
+1 我要转前端了
页:
[1]