小技巧
1、遇到大量拼接字符串时可以采用数组替代字符串的拼接以提升性能
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div id="box"></div> 11 <input type="button" value="Click" id="btn"> 12 <script> 13 var datacollection=["red","green","blue","yellow","black","white","grey","pink","purple"]; 14 var btn=document.getElementById("btn"); 15 var box=document.getElementById("box"); 16 // var newhtml="<ul>";/* 重新开辟内存，需要耗费时间 */ 17 // // 遍历数据 18 // for(var i=0;i<datacollection.length;i++){ 19 // var data=datacollection[i]; 20 // newhtml+="<li>"+data+"</li>";/* 由于字符串不可变,也需要重新开辟内存，会耗费时间 */ 21 // } 22 // newhtml+="</ul>"/* 仍然是重新开辟内存，需要耗费时间 */ 23 // btn.onclick=function(){box.innerHTML=newhtml;}/* innerHTML重新绘制DOM树 */ 24 25 // 优化 以后遇到大量拼接字符串时可以采用数组替代字符串的拼接以提升性能 26 var array=[]; 27 array.push("<ul>"); 28 // 遍历数据 29 for(var i=0;i<datacollection.length;i++) 30 { 31 var data = datacollection[i]; 32 array.push("<li>"+data+"</li>"); 33 } 34 array.push("</ul>"); 35 btn.onclick=function(){box.innerHTML=array.join("");} 36 37 </script> 38 </body> 39 </html>
