您所在的位置:开发 > Web > 技术热点 > 如何优化你的JS代码(1)

如何优化你的JS代码(1)

2012-06-18 15:18 木草人 木草人的博客 字号:T | T
一键收藏,随时查看,分享好友!

对于JS代码的优化,实际上有很多的情况,有些影响是比较小的,而有些是比较严重的,本文中,我把几个我认为影响比较严重的情况列出来,供大家参考。

AD:

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浏览器下会有十几毫秒的差别。

内容导航
 第 1 页:字符串的拼接  第 2 页:for循环
 第 3 页:减少页面的重绘  第 4 页:减少作用域链上的查找次数
 第 5 页:避免双重解释



分享到:

热点职位

更多>>

热点专题

更多>>

读书

网管第一课——计算机网络原理
本书是《网管第一课》系列图书中的第一本,是专门针对高校和培训机构编写的,其主要特点是内容细而精、针对性强。书中内容全是经

51CTO旗下网站

领先的IT技术网站 51CTO 领先的中文存储媒体 WatchStor 中国首个CIO网站 CIOage 中国首家数字医疗网站 HC3i 51CTO学院