JavaScript优化总结

《JavaScript优化总结》

        本站原创，转载请标明出处
        作者：风情主人 QQ: 1160 2011 http://m9m.3322.org
  

  原文请看:http://sfii.8866.org/r.cgi?num=48&tp=t

     看不起小钱就赚了大钱，同样的，看不其一字节两字节的优化，那么就谈不上什么优化了。
因此，我们需要从细节做起，从优化每一字节作做起.google在这方面确实是老大，
他的gmail就做得非常的好......

 
 


  
  
   
   1、hash、数组和一般对象
  
  
  
  

   
   

    未优化代码                                   优化后的代码
var oarrSum = new Array();                       var oarrSum = [];
var oarrSum = new Array(30);                     var oarrSum = [];
var oarrSum = new Array(30,234,234,43,nNum);     var oarrSum = [30,234,234,43,nNum];

var oarrSum = new Array();                       var oarrSum = {a:"test1",b:"test2"}; // 这样优化后有两种访问方式：
oarrSum["a"] = "test1";                          oarrSum.a + oarrSum['b'];
oarrSum["b"] = "test2";

var oTmp = new Object();                         var oTmp = {test:"good",test2:function(s){return s.replace(//s/gm,"")}};
oTmp.test = "good";
oTmp.test2 = function(s){return s.replace(//s/gm,"")};

  
  
  
  
   
   2、日期
  
  
  
  

   
   
    未优化代码                                   优化后的代码
var oDt = new Date();                            var oDt = new Date; // 不可小看少了一对括号哦
关于日期对象，如果不是要使用他的方法getTime()，那么最好定义个全局的Date对象，在各个js文件、各个需要的方法里引用他,这样避免多次创建对象而浪费性能。


  
  
  
  
   
   3、一些全局对象的简写
  
  
  
  

   
   
建议在js开头有这样的代码
var d = document, w = windiw,out = d.write,t = top;
如果把var w = this;就更迷惑人了，其实全局的this就是window对象
这样就可以在以后的方法里引用他们了，不过这时候要注意你取的变量名不要和他们冲突，
这样做的目的是让代码更简洁，js文件体积就会更小写，当然，变量名力求简短也是必须的。



  
  
  
  
   
   4、for循环的优化  
   
   注意：本优化方法适用于各种编程语言哦！
  
  
  
  

   
   
我们假定给id为oTable的表格的第2列求和，并写到最后一行的第2列里，如果行数在万行以上，下面的优化就看出效率了
< script >
var n1 = 0, n2 = 0, d = document;
var out = d.write;
// 未优化代码
function fnSum()         
{		     			
  try{	
   if(null == oTable || "object" != typeof oTable)return 0;
   var o = oTable.rows; // 为了让代码简洁	   
   // 从第二行开始，跳过标题行和末尾行	
   var nSum = 0;	
   out("表格有" + o.length + "行");
   var nStart = new Date;
   for(var i = 1; i < o.length - 1; i++)	
   {	
      // 如果遇到无效的数字或空值就表示表格中有空行，	
      // 因此就停止循环，开发人员一定要作好兼容的处理	
      // 由于n的值在两个地方用到，因此就提出来	
      var n = parseFloat(o(i).cells[1].innerText);	
      if(!isFinite(n))break;	
      nSum += n;	
   }	
   // 看看用了多少豪秒	
   return n1 = (new Date - nStart),o(i).cells[1].innerText=nSum;	
  }catch(e){alert("fnSum: " + e.message)}	
}
// 优化后的代码，虽然代码量多了，但是运行效率却相当客观
// 其实，下面的代码是充分利用了CPU的新特性
function fnSum1()       
{
  try{		
   if(null == oTable || "object" != typeof oTable)return 0;
   var o = oTable.rows; // 为了让代码简洁        
   // 从第二行开始，跳过标题行和末尾行		
   var nSum = 0;			
   var nStart = new Date, i = 1, R = o.length - 2, T = 8;
   
   var k = R % T, n = 0;
   var fnS = function(o){var n = parseFloat(o.innerText);if(!isFinite(n))return -1;return n};
   while(k--)
   {
     n = fnS(o(i++).cells[1]);if(-1 == n)break;nSum += n;
   }

   k = parseInt(R / T);
   while(k--)
   {
     for(var x = 0; x < T; x++)
     {
       n = fnS(o(i++).cells[1]);if(-1 == n)break;nSum += n;     
     }
   }
   // 看看用了多少豪秒		
   return n2 = (new Date - nStart),o(i).cells[1].innerText=nSum;
  }catch(e){alert("fnSum1: " + e.message)}	
}
var s1 = fnSum(), s2 = fnSum1();
out("
   
   
fnSum1比fnSum快" + (n1 - n2) + "豪秒
   
   
");
out("fnSum1:" + n2 + "豪秒;结果 = " + s2 + "
   
   
");
out("fnSum:" + n1 + "豪秒;结果 = " + s1 + "
   
   
")
< / script >

表格有4898行
fnSum1比fnSum快2735豪秒
fnSum1:240豪秒;结果 = 279072
fnSum:2975豪秒;结果 = 279072


  
  
  
  
   
   5、关于","运算符号
  
  
  
  

   
   
逗号运算符能给我们带来什么？
a、让我们的代码更加诡异，如果你不想别人轻易读懂你的代码
b、最主要的是，他能使我们的代码少好几字节，不要小看这几字节，
   如果10万人同时访问，其服务器的IO也可以少多少M?
   每行代码少回车换行两字节也不错啊，还少了一对{}，又是两字节。
举例如下：
 if('17px'==o.height)
     o.position='absolute',o.left=t.left+n,o.top=t.top-3,o.width=t.right-t.left-n-1,o.height=350,o.border='1 solid #0099FF',ob.innerHTML=ob.innerHTML.replace(//r/n/gm,"
   
   
");
 else 
     o.position='relative',o.left=0,o.top=0,o.height=17,o.border='0 solid #0099FF'
   

  
  
  
  
   
   6、什么时候可以不要";"?
  
  
  
  

   
   
凡是"}"前都不需要分号，这样也可以介绍代码字节数哦！


  
  
  
  
   
   7、需要维护的代码和发布代码的区别？
  
  
  
  

   
   
需要维护的代码需要保留各种注释和美观的格式，便于维护。
但是发布的就不需要了，因此，自己做个脚本优化器吧
a、把所有的注释和空行去掉
b、把各种运算符号前后的空格去掉，别忘了逗号运算符号哦？
c、如果你的代码是非常规范的，你可以把所有的Tab符号和回车、换行去掉
d、把所有"}"前的";"去掉


  
  
  
  
   
   8、判断数字的有效性，建议还是用isFinite。
  
  
  
  

   
   
为什么？因为他不光是判断NaN,还判断了是否无穷大或无穷小。如果数字有效，则他返回真


  
  
  
  
   
   9、充分利用正则表达式的功能
  
  
  
  

   
   
a、比如：替换、查找、提取；
b、如果同一个正则表达式3次以上使用，建议用compile先编译以提高速度；
c、创建正则表达式对象的时候如果不是动态的拼传，直接用var r = //d|/r/gm;的格式，
   而不要用new RegExp，否则性能会有影响。


  
  
  
  
   
   10、尽量避免脚本和HTML DOM模型发生交互，或尽量避免多次交互
  
  
  
  

   
   
a、因为和HTML DOM模型发生交互是相当耗系统性能资源的，比如通过innerHTML一万次创建一万个div对象，
和通过innerHTML一次创建一万个div对象，其所花的时间是相差很大的。
b、尽量避免动态绑定事件方法
c、一定要用变通的方法来替代styfle="height:Expression(...)"或setExpression这样的代码