日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
詳細(xì)javaScript代碼的優(yōu)化

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

創(chuàng)新互聯(lián)網(wǎng)站建設(shè)服務(wù)商，為中小企業(yè)提供網(wǎng)站設(shè)計、成都做網(wǎng)站服務(wù)，網(wǎng)站設(shè)計，網(wǎng)站托管、服務(wù)器托管等一站式綜合服務(wù)型公司，專業(yè)打造企業(yè)形象網(wǎng)站，讓您在眾多競爭對手中脫穎而出創(chuàng)新互聯(lián)。

1、減緩代碼下載時間：

Web瀏覽器下載的是javaScript的源碼、其中包含的長變量名、注釋、空格和換行等多余字符大大減緩了代碼下載的時間。這些字符對于團隊編寫時十分有效、但在最后工程完成上傳到服務(wù)器時、應(yīng)當(dāng)將它們?nèi)縿h除。例如：

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

可優(yōu)化成：

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

這樣、優(yōu)化后就節(jié)約了25個字節(jié)、倘若是一個大的javaScript工程、將節(jié)省出非常大的空間、不但提高了用戶的下載速度、也減輕了服務(wù)器的壓力。相信這樣的代碼大家見過不少、很多優(yōu)秀的js插件源碼都這么干！

另外、對于布爾型的值true和false、true都可以用1來代替,而false可以用0來代替。對于true節(jié)省了3個字節(jié)、而false則節(jié)省了4個字節(jié)、例如：

 
 
    
  
  
  1. var bSearch = false; 
    2. 
  
  
  2. for(var i=0;i

替換成：

 
 
    
  
  
  1. var bSearch = 0;
    2. 
  
  
  2.  for(var i=0;i

替換了布爾值之后、代碼的執(zhí)行效率、結(jié)果都相同、但節(jié)省了7個字節(jié)。

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

 
 
    
  
  
  1. if(myValue != undefined){ //... } if(myValue !=null){ //... } if(myValue != false){ //... } 
    2.

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

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

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

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

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

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

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

可優(yōu)化成：

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

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

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

2、合理聲明變量

減少代碼的體積僅僅只能使得用戶下載的速度變快、但執(zhí)行程序的速度并沒有改變。要提高代碼執(zhí)行的效果、還得在各方面做調(diào)整。

在瀏覽器中、JavaScript默認(rèn)的變量范圍是window對象、也就是全局變量。全局變量只有在瀏覽器關(guān)閉才釋放。而JavaScript也有局部變量、通常在function中執(zhí)行完畢就會立即被釋放。因此在函數(shù)體中要盡可能使用var關(guān)鍵字來聲明變量：

 
 
    
  
  
  1. function First(){ a = "" ; //直接使用變量 } function Second(){ alert(a); } First(); Second(); 
    2.

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

3、使用內(nèi)置函數(shù)縮短編譯時間

只要可能、應(yīng)當(dāng)盡量使用JavaScript的內(nèi)置函數(shù)。因為這些內(nèi)置的屬性、方法都是用類似C、C++之類的言語編譯過的、運行起來比實時編譯的JavaScript快很多。例如計算指數(shù)函數(shù)、可以自己編寫：

 
 
    
  
  
  1.    
    2. 
  
  
  2.    
    3. 
  
  
  3. ">   
    4. 
  
  
  4. 內(nèi)置函數(shù)   
    5. 
  
  
  5.    
    6. 
  
  
  6.    
    7. 
  
  
  7.    
    8. 
  
  
  8.    
    9. 
  
  
  9.    
    10. 
  
  
  10.    
    11. 
  
  
  11.    
    12. 
  
  
  12.    
    13. 
  
  
  13.    
    14. 
  
  
  14.   
    15.

我運行的結(jié)果是、自定義方法用了15、內(nèi)置方法用了1(不同的計算機運行速度會有差別)、這樣就能看出、系統(tǒng)內(nèi)置的方法要快很多。

4、合理書寫if語句。

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

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

總是將出現(xiàn)概率最多的情況放在前面、這樣就減少了進行多次測試后才能遇到正確條件的情況。當(dāng)然也要盡可能減少使用else if 語句、例如上面的代碼還可以進一步優(yōu)化成如下代碼：

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

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

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

5、最小化語句數(shù)量

腳本找哦個的語句越少執(zhí)行的時間就越短、而且代碼的體積也會相應(yīng)減少。例如使用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關(guān)鍵字一次性定義、代碼如下：

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

同樣在很多迭代運算的時候、也應(yīng)該盡可能減少代碼量、如下兩行代碼：

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

可優(yōu)化成：

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

6、節(jié)約使用DOM

JavaScript對DOM的處理可能是最耗費時間的操作之一。每次JavaScript對DOM的操作都會改變頁面的表現(xiàn)、并重新渲染整個頁面、從而有明顯的時間消耗。比較快捷的方法就是盡可能不在頁面進行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.

以上代碼在循環(huán)中調(diào)用oUl.appendChild(oLi)、每次執(zhí)行這條語句后、瀏覽器就會重新渲染頁面、其次給列表添加文本節(jié)點oLi.appendChild(document.createTextNode("Item "+i))、這也會造成頁面被重新渲染。因此每次運行都會造成兩次重新渲染頁面、共20次。

通常應(yīng)當(dāng)盡可能減少DOM的操作、將列表項目在添加文本節(jié)點之后在添加、并合理地使用createDocumentFragment()、代碼如下：

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

到這，關(guān)于JAVASCRIPT的優(yōu)化就給大家介紹完了。希望對你有幫助。


分享標(biāo)題：詳細(xì)javaScript代碼的優(yōu)化
本文地址：http://www.dlmjj.cn/article/cdipjio.html