ul建立1000个li

最近看到的一个问题：如果让你在ul下建立1000个li，你会怎么做？

1、当时我想到的笨办法是利用循环添加子节点，如下例

当数目增长到10000的时候，出现了明显的时延

window.onload = function(){
var oUi = document.getElementsByTagName("ul");
//var oUi1 = oUi[0];
for(var i=0;i<10000;i++){
var oLi = document.createElement("li");
oLi.innerHTML = "li";
oUi[0].appendChild(oLi);
}
};

2、然后后来又想到，可以直接构造字符串，然后更替ul的innerHTML，如下例

当数目增至100000个的时候，才会出现明显时延

<script type="text/javascript">
window.onload = function(){
var oUi = document.getElementsByTagName("ul");
var str = "";
for(var i=0;i<100000;i++){
str += "<li>li</li>";
}
oUi[0].innerHTML = str;
}
</script>

3、后来又看到网上说，join拼接字符串的效率要比str+=要高，因此，又采用join的做法对方法2做出了改进。

当数目增至1000000个的时候，才会出现明显时延

window.onload = function(){
var arr = new Array();
arr.push("<li>li");
for(var i=0;i<1000000;i++){
arr.push("li");
}
arr.push("li</li>");
var oList = arr.join("</li><li>");
var oUi = document.getElementsByTagName("ul");
};