思洋互动网站建设学前班

JS代码的执行效率往往直接影响了页面的性能，有的时候，实现同样的功能，不同的JS代码往往在效率上相差很多，有的时候仅仅是由于我们的书写习惯导致的，当然在高级点的浏览器中，它们大多都已经帮我们优化了，但是在中国，万恶的IE6仍然大量的存在，我们不得不去考虑它。对于JS代码的优化，实际上有很多的情况，有些影响是比较小的，而有些是比较严重的，本文中，我把几个我认为影响比较严重的情况列出来，供大家参考。
广州网站建设,网站建设,广州网页设计,广州网站设计

1、字符串的拼接

 字符串的拼接在我们开发中会经常遇到，所以我把其放在首位，我们往往习惯的直接用+=的方式来拼接字符串，其实这种拼接的方式效率非常的低，我们可以用一种巧妙的方法来实现字符串的拼接，那就是利用数组的join方法。

1. <div class="one" id="one"></div>   
2. <input type="button" value="效率低" onclick="func1()" />   
3. <input type="button" value="效率高" onclick="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. }   

我们看看其在不同浏览器下执行的情况

我们会发现，在IE6下其差别是相当明显的，其实这种情况在IE的高版本中体现的也非常明显，但是在Firefox下却没有多大的区别，相反第二种的相对效率还要低点，不过只是差别2ms左右，而Chrome也和Firefox类似。另外在这里顺便说明一下，在我们给数组添加元素的时候，很多人喜欢用数组的原生的方法push，其实直接用arr[i]或者arr[arr.length]的方式要快一点，大概在10000次循环的情况IE浏览器下会有十几毫秒的差别。
广州网站建设,网站建设,广州网页设计,广州网站设计