javascript 6步搞定效能最佳化！

javaScript是一門解釋性的語言、它不像java、C#等程式設計語言、由編譯器先進行編譯再運行、而是直接下載到使用者的用戶端進行執行。因此代碼本身的優劣就直接決定了代碼下載的速度以及執行的效率。

        1、減緩代碼下載時間：

        Web瀏覽器下載的是javaScript的源碼、其中包含的長變數名、注釋、空格和換行等多餘字元大大減緩了代碼下載的時間。這些字元對於團隊編寫時十分有效、但在最後工程完成上傳到伺服器時、應當將它們全部刪除。例如：

view plain print ?

1. function  showMeTheMoney(){  
2.         if (!money){  
3.                 return   false ;  
4.         }else {  
5.                 ...  
6.         }  
7. }  

可最佳化成：

view plain print ?

1. function  showMeTheMoney(){ if (!money){ return   false ;} else {...}}  

        這樣、最佳化後就節約了25個位元組、倘若是一個大的javaScript工程、將節省出非常大的空間、不但提高了使用者的下載速度、也減輕了伺服器的壓力。相信這樣的代碼大家見過不少、很多優秀的js外掛程式源碼都這麼幹！

        另外、對於布爾型的值true和false、true都可以用1來代替,而false可以用0來代替。對於true節省了3個位元組、而false則節省了4個位元組、例如：

view plain print ?

1. var  bSearch =  false ;  
2.         for ( var  i=0;i<aChoices.length&&!bSearch;i++){  
3.             if (aChoices[i] == vValue)  
4.                 bSearch = true  ;  
5.         }  

替換成：

view plain print ?

1. var  bSearch = 0;  
2.         for ( var  i=0;i<aChoices.length&&!bSearch;i++){  
3.             if (aChoices[i] == vValue)  
4.                 bSearch = 1 ;  
5.         }  

        替換了布爾值之後、代碼的執行效率、結果都相同、但節省了7個位元組。

        代碼中常常會出現檢測某個值是否為有效值的語句、而很多條件非的判斷就判斷某個變數是否為"undefined"、"null"、或者"false"、例如：

view plain print ?

1. if (myValue != undefined){  
2.             //...   
3.         }  
4.           
5.         if (myValue != null ){  
6.             //...   
7.         }  
8.           
9.         if (myValue !=  false ){  
10.             //...   
11.         }  

        這些雖然都正確、但採用邏輯非操作符"!"也可以有同樣的效果、代碼如下：

view plain print ?

1. if (!myValue){  
2.             //...   
3.         }  

        這樣的替換也可以節省一部分位元組、而且不太影響代碼的可讀性。類型的代碼最佳化還有將數組定義時的 new Array()直接用"[]"代替、對象定義時的 new Object()用"{}"代替等、例如：

view plain print ?

1. var  myArray =  new  Array();  
2.         var  myArray = [];  
3.         var  myObject =  new  Object();  
4.         var  myObject = {};  

        顯然、第二行和第四行的代碼較為精簡、而且也很容易理解。

        另外、在編寫代碼時往往為了提高可讀性、函數名稱、變數名稱使用了很長的英文單詞、同時也大大增加了代碼的長度、例如：

view plain print ?

1. function  AddThreeVarsTogether(firstVar,secondVar,thirdVar){  
2.             return  (firstVar+secondVar+thirdVar);  
3.         }  

可最佳化成：

view plain print ?

1. function  A(a,b,c){ return  (a+b+c);}  

         注意：在進行變數名稱替換時、必須十分小心、尤其不推薦使用文字編輯器的"尋找"、"替換"功能、因為編輯器不能很好地區分變數名稱或者其他代碼。例如、希望將變數"tion"全部替換成"io"、很可能導致關鍵字"function"也被破壞。

        對於上面說的這些減少代碼體積的方法、有一些很實用的小工具可以自動完成類似的工作、例如ECMAScript Cruncher、JSMin、Online JavaScript Compressor等。

        2、合理聲明變數

        減少代碼的體積僅僅只能使得使用者下載的速度變快、但執行程式的速度並沒有改變。要提高代碼執行的效果、還得在各方面做調整。

        在瀏覽器中、JavaScript預設的變數範圍是window對象、也就是全域變數。全域變數只有在瀏覽器關閉才釋放。而JavaScript也有局部變數、通常在function中執行完畢就會立即被釋放。因此在函數體中要儘可能使用var關鍵字來聲明變數：

view plain print ?

1. function  First(){  
2.             a = ""  ;    //直接使用變數   
3.         }  
4.         function  Second(){  
5.             alert(a);  
6.         }  
7.         First();  
8.         Second();  

        這樣、變數"a"就成為了全域變數、直到頁面關閉時才會被銷毀、浪費了不必要的資源、如果在"a"的前面加上"var"、這樣"a"就成為了當前function的局部變數。在執行完First()便立即被銷毀。因此、在函數體中、如果不是特別需要的全域變數、都應當使用"var"進行聲明、從而節省系統資源。

        

        3、使用內建函數縮短編譯時間

        只要可能、應當盡量使用JavaScript的內建函數。因為這些內建的屬性、方法都是用類似C、C++之類的言語編譯過的、運行起來比Just-In-Time 編譯的JavaScript快很多。例如計算指數函數、可以自己編寫：

view plain print ?

1. < html >   
2.   < head >   
3.     < base   href = "<%=basePath%>" >   
4.     < title > 內建函數 </ title >   
5.     < meta   http-equiv = "pragma"   content = "no-cache" >   
6.     < meta   http-equiv = "cache-control"   content = "no-cache" >   
7.     < meta   http-equiv = "expires"   content = "0" >       
8.     < meta   http-equiv = "keywords"   content = "keyword1,keyword2,keyword3" >   
9.     < meta   http-equiv = "description"   content = "This is my page" >   
10.     < script   type = "text/javascript" >   
11.         function myPower(iNum,n){  
12.             var iResult  =  iNum  ;  
13.             for(var i = 0 ;i < n ;i++)  
14.                 iResult *= iNum ;  
15.             return iResult;  
16.         }  
17.         var myDate1  =  new  Date();  
18.         for(var i = 0 ;i < 150000 ;i++){  
19.             myPower(7,8);  //自訂方法  
20.         }  
21.         var myDate2  =  new  Date();  
22.         document.write(myDate2 - myDate1);  
23.         document.write("< br /> ");  
24.         myDate1  =  new  Date();  
25.         for(var i = 0 ;i < 150000 ;i++){  
26.             Math.pow(7,8);  //採用系統內建方法  
27.         }  
28.         myDate2  =  new  Date();  
29.         document.write(myDate2 - myDate1);  
30.     </ script >   
31.   </ head >   
32.   < body >   
33.   </ body >   
34. </ html >   

        我啟動並執行結果是、自訂方法用了15、內建方法用了1(不同的電腦運行速度會有差別)、這樣就能看出、系統內建的方法要快很多。

        

        4、合理書寫if語句。

        if語句恐怕是所有代碼中使用最頻繁的、然而很可惜的是它的執行效率並不是很高。在用if語句和多個else語句時、一定要把最有可能的情況放在第一個、然後是可能性第二的、依此類推。例如預計某個數值在0~100之間出現的機率最大、則可以這樣安排代碼：

view plain print ?

1. if (iNum>0&&iNum <100){  
2.             alert("在0和100之間" );  
3.         }else   if (iNum>99&&iNum<200){  
4.             alert("在100和200之間" );  
5.         }else   if (iNum>199&&iNum<300){  
6.             alert("在200和300之間" );  
7.         }else {  
8.             alert("小於等於0或者大於等於300" );  
9.         }  

        總是將出現機率最多的情況放在前面、這樣就減少了進行多次測試後才能遇到正確條件的情況。當然也要儘可能減少使用else if 語句、例如上面的代碼還可以進一步最佳化成如下代碼：

view plain print ?

1. if (iNum>0){  
2.             if (iNum<100){  
3.                 alert("在0和100之間" );  
4.             }else {  
5.                 if (iNum<200){  
6.                     alert("在100和200之間" );  
7.                 }else {  
8.                     if (iNum<300){  
9.                         alert("在200和300之間" );  
10.                     }else {  
11.                         alert("大於等於300" );  
12.                     }  
13.                 }  
14.             }  
15.         }else {  
16.             alert("小於等於0" );  
17.         }  

        上面的代碼看起來比較複雜、但因為考慮了很多代碼潛在的判斷問題、執行問題、因此執行速度要較前面的代碼快。

        另外、通常當超過兩種情況時、最好能夠使用switch語句。經常用switch語句代替if語句、可令執行速度快甚至10倍。另外、由於case語句可以使用任何類型、也大大方便switch語句的編寫。

 

        5、最小化語句數量

        指令碼找哦個的語句越少執行的時間就越短、而且代碼的體積也會相應減少。例如使用var定義變數時可以一次定義多個、代碼如下：

view plain print ?

1. var  iNum = 365;  
2.         var  sColor =  "yellow" ;  
3.         var  aMyNum = [8,7,12,3] ;  
4.         var  oMyDate =  new  Date();  

        上面的多個定義可以用var關鍵字一次性定義、代碼如下：

view plain print ?

1. var  iNum = 365, sColor =  "yellow"  , aMyNum = [8,7,12,3],oMyDate =  new  Date() ;  

        同樣在很多迭代運算的時候、也應該儘可能減少代碼量、如下兩行代碼：

view plain print ?

1. var  sCar = aCars[i];  
2.         i++;  

        可最佳化成：

view plain print ?

1. var  sCar = aCars[i++];  

         

        6、節約使用DOM

        JavaScript對DOM的處理可能是最耗費時間的操作之一。每次JavaScript對DOM的操作都會改變頁面的表現、並重新渲染整個頁面、從而有明顯的時間消耗。比較快捷的方法就是儘可能不在頁面進行DOM操作、如下例中為ul添加了10個條目。

view plain print ?

1. var  oUl = document.getElementById( "ulItem" );  
2.         for ( var  i=0;i<10;i++){  
3.             var  oLi = document.createElement( "li" );  
4.             oUl.appendChild(oLi);  
5.             oLi.appendChild(document.createTextNode("Item " +i));  
6.         }  

         以上代碼在迴圈中調用oUl.appendChild(oLi)、每次執行這條語句後、瀏覽器就會重新渲染頁面、其次給列表添加文本節點oLi.appendChild(document.createTextNode("Item "+i))、這也會造成頁面被重新渲染。因此每次運行都會造成兩次重新渲染頁面、共20次。

        通常應當儘可能減少DOM的操作、將清單項目在添加文本節點之後在添加、併合理地使用createDocumentFragment()、代碼如下：

view plain print ?

1. var  oUl = document.getElementById( "ulItem" );  
2.         var  oTemp = document.createDocumentFragment();  
3.         for ( var  i=0;i<10;i++){  
4.             var  oLi = document.createElement( "li" );  
5.             oLi.appendChild(document.createTextNode("Item " +i));  
6.             oTemp.appendChild(oLi);  
7.         }  
8.         oUl.appendChild(oTemp);  

 

 

轉載自：http://www.cnblogs.com/iflex/archive/2012/04/05/js_youhua.html