javaScript——優化

時間  2021-01-03
標籤 javascript html java 數組 瀏覽器 服務器 app 編輯器 ide 函數 欄目 JavaScript 简体版
原文   原文鏈接

 

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

        一、減緩代碼下載時間：html

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

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

可優化成：數組

 

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

 

這樣、優化後就節約了25個字節、假若是一個大的javaScript工程、將節省出很是大的空間、不但提升了用戶的下載速度、也減輕了服務器的壓力。相信這樣的代碼你們見過很多、不少優秀的js插件源碼都這麼幹、你們不用手動的去這樣優化代碼、由於網上有不少優秀的js壓縮工具、它們能夠很好的完成這項任務！瀏覽器

        另外、對於布爾型的值true和false、true均可以用1來代替,而false能夠用0來代替。對於true節省了3個字節、而false則節省了4個字節、例如：服務器

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

替換成：app

 

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

 

替換了布爾值以後、代碼的執行效率、結果都相同、但節省了7個字節。編輯器

        代碼中經常會出現檢測某個值是否爲有效值的語句、而不少條件非的判斷就判斷某個變量是否爲"undefined"、"null"、或者"false"、例如：ide

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

這些雖然都正確、但採用邏輯非操做符"!"也能夠有一樣的效果、代碼以下：函數

 

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

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

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

 

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

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

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

可優化成：

 

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

 

注意：在進行變量名稱替換時、必須十分當心、尤爲不推薦使用文本編輯器的"查找"、"替換"功能、由於編輯器不能很好地區分變量名稱或者其餘代碼。例如、但願將變量"tion"所有替換成"io"、極可能致使關鍵字"function"也被破壞。

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

        二、合理聲明變量

        減小代碼的體積僅僅只能使得用戶下載的速度變快、但執行程序的速度並無改變。要提升代碼執行的效果、還得在各方面作調整。

        在瀏覽器中、JavaScript默認的變量範圍是window對象、也就是全局變量。全局變量只有在瀏覽器關閉才釋放。而JavaScript也有局部變量、一般在function中執行完畢就會當即被釋放。所以在函數體中要儘量使用var關鍵字來聲明變量：

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

這樣、變量"a"就成爲了全局變量、直到頁面關閉時纔會被銷燬、浪費了沒必要要的資源、若是在"a"的前面加上"var"、這樣"a"就成爲了當前function的局部變量。在執行完First()便當即被銷燬。所以、在函數體中、若是不是特別須要的全局變量、都應當使用"var"進行聲明、從而節省系統資源。

        

        三、使用內置函數縮短編譯時間

        只要可能、應當儘可能使用JavaScript的內置函數。由於這些內置的屬性、方法都是用相似C、C++之類的言語編譯過的、運行起來比實時編譯的JavaScript快不少。例如計算指數函數、能夠本身編寫：

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

我運行的結果是、自定義方法用了1五、內置方法用了1(不一樣的計算機運行速度會有差異)、這樣就能看出、系統內置的方法要快不少。

        

        四、合理書寫if語句。

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

   
   
            
   
   
    
    
    
             
    
    
  1. if(iNum>0&&iNum <100){   
    2. 
    
    
             
    
    
  2.             alert("在0和100之間");   
    3. 
    
    
             
    
    
  3.         }else if(iNum>99&&iNum<200){   
    4. 
    
    
             
    
    
  4.             alert("在100和200之間");   
    5. 
    
    
             
    
    
  5.         }else if(iNum>199&&iNum<300){   
    6. 
    
    
             
    
    
  6.             alert("在200和300之間");   
    7. 
    
    
             
    
    
  7.         }else{   
    8. 
    
    
             
    
    
  8.             alert("小於等於0或者大於等於300");   
    9. 
    
    
             
    
    
  9.         }   
    10.
老是將出現機率最多的狀況放在前面、這樣就減小了進行屢次測試後才能遇到正確條件的狀況。固然也要儘量減小使用else if 語句、例如上面的代碼還能夠進一步優化成以下代碼：

 

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

 

上面的代碼看起來比較複雜、但由於考慮了不少代碼潛在的判斷問題、執行問題、所以執行速度要較前面的代碼快。

        另外、一般當超過兩種狀況時、最好可以使用switch語句。常常用switch語句代替if語句、可令執行速度快甚至10倍。另外、因爲case語句可使用任何類型、也大大方便switch語句的編寫。

 

        五、最小化語句數量

        腳本找哦個的語句越少執行的時間就越短、並且代碼的體積也會相應減小。例如使用var定義變量時能夠一次定義多個、代碼以下：

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

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

 

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

 一樣在不少迭代運算的時候、也應該儘量減小代碼量、以下兩行代碼：

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

 可優化成：

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

 

六、節約使用DOM

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

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

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

        一般應當儘量減小DOM的操做、將列表項目在添加文本節點以後在添加、併合理地使用createDocumentFragment()、代碼以下：

  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);  
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程