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");
		};