关于innerHTML和createDocumentFragment浅谈

最近在做checkout的时候发现一个很有趣的现象，那就是innerHTML插入上万个节点的时候，如果要插入的DIV里是空的，那么用innerHTML插入，我想是最好的选择，速度也是最快的，但是当你第二次插入的时候，你就会发现速度至少降低了10倍，看一下代码：

<input name="" type="button" οnclick="test();"/>
<div id="html"></div>
<script>
function test(){
var html = document.getElementById("html");
var a = new Date();
var div = "";
for(var i=0;i<10000;i++){
div+="<div>"+i+"</div>";
}
html.innerHTML = div;
var b = new Date();
alert(b-a);
}
</script>

当你第二次按btn的时候，因为div里已经有了1W条数据，innerHTML会逐一删除，注意是逐一删除，然后再插入的新的数据，为什么这么说了，因为当你div里没有div节点的时候，他只是删除一条字符串信息，速度上基本没什么印象。大家可以试一下div+=i;的时候，基本是没什么影响的。
后来我想到了createDocumentFragment这个方法，

function test1(){
var html = document.getElementById("html");
var a = new Date();
var doc = document.createDocumentFragment();
for(var i=0;i<10000;i++){
var obj = document.createElement("div");
var oText = document.createTextNode(+i);
obj.appendChild(oText);
doc.appendChild(obj);
}
html.appendChild(doc);
var b = new Date();
alert(b-a);
}
试了一个，第一次和第二次插入信息速度是一样的。
所以在处理大量节点的时候，还是createDocumentFragment()效率比较快。但是对于处理小数据量的时候innerHTML的优势是很明显的。

最好我想到了在webrebuild会议上龙刚提到了for循环反过来循环，也就是i--的时候速度上会快一点，然后特地的试了一下1W条数据，基本没差别。