ul建立1000个li

来源：互联网发布：spark save json 编辑：程序博客网时间：2024/06/02 04:26

最近看到的一个问题：如果让你在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");};

0 0