ul建立1000个li

最新推荐文章于 2021-06-23 15:26:56 发布

Day_by_day93

最新推荐文章于 2021-06-23 15:26:56 发布

阅读量958

点赞数

分类专栏： JS 文章标签： javascript

JS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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

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

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

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

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

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

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

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

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

[javascript]view plaincopy 
   
 window.onload = function(){  
             var arr = new Array();  
             var oUi = document.getElementById("ul");
             arr.push("<li>li");  
             for(var i=0;i<999998;i++){  
                 arr.push("li");  
             }  
             arr.push("li</li>");  
             var oList = arr.join("</li><li>");  
             oUi.innerHTML = oList;  
         };  
 
  扩展，<ul>添加1万个<li>，通过事件委托，为每一个<li>添加点击事件： 
 
  <body>
 <ul id="ul"></ul>
 
 </body>
 
 <script type = "text/javascript">
 window.onload = function(){
 var oUi = document.getElementById("ul");
 var arr = new Array();
 arr.push("<li>li");
 for(var i=0; i<99998; i++){
 arr.push("li");
 }
 arr.push("li</li>");
 var oList = arr.join("</li><li>");
 oUi.innerHTML = oList;
 console.log(arr.length);
 
 oUi.addEventListener("click", function(event){
 var ev = event || window.event;
 var target = ev.target || ev.srcElement; 
 console.log(target.innerHTML);
 if(target.nodeName.toLowerCase() === "li"){
 target.style.background = "red";
 }
 });
 }
 </script>

Day_by_day93

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ul建立1000个li

最近看到的一个问题：如果让你在ul下建立1000个li，你会怎么做？1、当时我想到的笨办法是利用循环添加子节点，如下例当数目增长到10000的时候，出现了明显的时延[javascript] view plain copy window.onload = function(){ var oUi = document.g
复制链接

扫一扫

专栏目录