JS代码优化

1、字符串的拼接

  用数组join的方法代替+=的方法，可以提高执行效率；

 

  实例：

1. <div class="one" id="one"></div>   
2. <input type="button" value="效率低" οnclick="func1()" />   
3. <input type="button" value="效率高" οnclick="func2()" /> 

1. //效率低的   
2. function func1(){   
3.     var start = new Date().getTime();   
4.     var template = "";   
5.     for(var i = 0; i < 10000; i++){   
6.         template += "<input type='button' value='a'>";   
7.     }   
8.     var end = new Date().getTime();   
9.     document.getElementById("one").innerHTML = template;   
10.     alert("用时:" + (end - start) + "毫秒");   
11. }   
12. //效率高的   
13. function func2(){   
14.     var start = new Date().getTime();   
15.     var array = [];   
16.     for(var i = 0; i < 10000; i++){   
17.         array[i] = "<input type='button' value='a'>";   
18.     }   
19.     var end = new Date().getTime();   
20.     document.getElementById("one").innerHTML = array.join("");   
21.     alert("用时:" + (end - start) + "毫秒");   
22. }

1. 2、for循环 在我们使用for循环的时候，特别是需要计算长度的情况，我们应该开始将其保存到一个变量中。主要是因为for循环在执行中，第一种情况会每次都计算一下长度，而第二种情况却是在开始的时候计算长度，并把其保存到一个变量中，所以其执行效率要高点     
2. 1. var arr = [];   
   2. for(var i = 0; i < 10000; i++){   
   3.     arr[i] = "<div>" + i + "</div>";   
   4. }   
   5. document.body.innerHTML += arr.join("");   
   6.     
   7. //效率低的   
   8. function func1(){   
   9.     var divs = document.getElementsByTagName("div");   
   10.     var start = new Date().getTime();   
   11.     for(var i = 0; i < divs.length; i++){   
   12.         //"效率低"   
   13.     }   
   14.     var end = new Date().getTime();   
   15.     alert("用时：" + (end - start) + "毫秒");   
   16. }   
   17. //效率高的   
   18. function func2(){   
   19.     var divs = document.getElementsByTagName("div");   
   20.     var start = new Date().getTime();   
   21.     for(var i = 0, len = divs.length; i < len; i++){   
   22.         //"效率高"   
   23.     }   
   24.     var end = new Date().getTime();   
   25.     alert("用时：" + (end - start) + "毫秒");   
   26. } 

1. 2、for循环 在我们使用for循环的时候，特别是需要计算长度的情况，我们应该开始将其保存到一个变量中。主要是因为for循环在执行中，第一种情况会每次都计算一下长度，而第二种情况却是在开始的时候计算长度，并把其保存到一个变量中，所以其执行效率要高点     
2. 1. var arr = [];   
   2. for(var i = 0; i < 10000; i++){   
   3.     arr[i] = "<div>" + i + "</div>";   
   4. }   
   5. document.body.innerHTML += arr.join("");   
   6.     
   7. //效率低的   
   8. function func1(){   
   9.     var divs = document.getElementsByTagName("div");   
   10.     var start = new Date().getTime();   
   11.     for(var i = 0; i < divs.length; i++){   
   12.         //"效率低"   
   13.     }   
   14.     var end = new Date().getTime();   
   15.     alert("用时：" + (end - start) + "毫秒");   
   16. }   
   17. //效率高的   
   18. function func2(){   
   19.     var divs = document.getElementsByTagName("div");   
   20.     var start = new Date().getTime();   
   21.     for(var i = 0, len = divs.length; i < len; i++){   
   22.         //"效率高"   
   23.     }   
   24.     var end = new Date().getTime();   
   25.     alert("用时：" + (end - start) + "毫秒");   
   26. } 

1. 3、减少页面的重绘
2. var str = "<div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div>";   
3. //效率低的   
4. function func1(){   
5.     var obj = document.getElementById("one");   
6.     var start = new Date().getTime();   
7.     for(var i = 0; i < 100; i++){   
8.         obj.innerHTML += str + i;   
9.     }   
10.     var end = new Date().getTime();   
11.     alert("用时 " + (end - start) + " 毫秒");   
12. }   
13. //效率高的   
14. function func2(){   
15.     var obj = document.getElementById("one");   
16.     var start = new Date().getTime();   
17.     var arr = [];   
18.     for(var i = 0; i < 100; i++){   
19.         arr[i] = str + i;   
20.     }   
21.     obj.innerHTML = arr.join("");   
22.     var end = new Date().getTime();   
23.     alert("用时 " + (end - start) + " 毫秒");   
24. } 

一般影响页面重绘的不仅仅是innerHTML，如果改变元素的样式，位置等情况都会触发页面重绘.