JavaScript優化基本篇 標籤： javascript性能優化Web前端JQuery內核 2016-03-05 01:35 214人閱讀

本文章適合於與做者同樣想要學習JavaScript的的"非前臺專業"的大學生或者後臺工程師.

若是,你想進行進一步的優化,那麼請點擊JavaScript性能優化小知識點總結

我的筆記整理:


一.縮短代碼下載時間 
源碼 以下:

window.onload=function love(){
    var words=new Array("這是一個數組");
    var str=words.join("")
    var i= 0;
    var arr=str.split("");
    var timer = document.getElementById("text").innerHTML(function (){
     document.getElementById("text").innerHTML =   document.getElementById("text").innerHTML +arr[i];
     i++;
    }
   },200);
}

A.將以前爲了提升可讀性命名的長的變量名，函數名從新命名.(這一步建議放在較後位置) 
我的推薦一個在線工具網站: 在線工具箱

window.onload = function L() {
    var w=new Array("這是一個數組");
    var w=words.join("")
    var i= 0;
    var a=s.split("");
    var t = setInterval(function() {
        if (i < s.length) {
            document.getElementById("text").innerHTML = document.getElementById("text").innerHTML + a[i];
            i++;
        }
    }, 200);
}

B. 使用JavaScript的簡略語法 
1. 減小語句聲明.將布爾值改成1&0， 
2. 將new Array()  &  new Object用「[]」 and 「{}」替代等等(其實這樣也能夠縮短運行時間). 
3. 在條件非語句中使用邏輯非操做符「！」來替代. 
4. 合理使用」+=」,以及」-=」

window.onload = function L() {
    var w = ["這是一個數組"],
        s = w.join(""),
        i = 0,
        a = s.split(""),
        t = setInterval(function() {
            if (i < s.length) {
                document.getElementById("text").innerHTML += a[i];
                i++;
            }
        }, 200);
   }


 if(s!=null) 能夠改成 if(!s)

C.let與var的區別 
手冊：使用 let 來聲明常量,使用 var 來聲明變量。一個常量的值在編譯時並不須要獲取,可是你只能爲它賦值一次。也就是說你能夠用常量來表示這樣一個值:你只須要決定一次,可是需 要使用不少次。

window.onload = function L() {
    let w = ["這是一個數組"];
    var s = w.join(""),
        i = 0,
        a = s.split(""),
        t = setInterval(function() {
        if (i < s.length) {
            document.getElementById("text").innerHTML += a[i];
            i++;
        }
       }, 200);
   }

D.去除沒必要要的字符，包括註釋，沒必要要的空格，換行.可使用格式化工具,現實中,這是優化的最後一步. 
我的推薦: 在線工具箱

window.onload=function L(){let w=["這是一個數組"];var s=w.join(""),i=0,a=s.split(""),t=setInterval(function(){if(i<s.length){document.getElementById("text").innerHTML+=+a[i];i++}},200)}

二.合理聲明變量


注意:Javascript是執行前對整個文件的聲明部分作完整分析(包括局部變量)，從而肯定實變量的做用域。


直接上代碼

function fuTestConsoleLog(){
    var intTestA=0;
    intTestB=0;
}


funtion test1(){
    console.log(intTestA);
    //未聲明
    //由於顯式聲明爲局部變量,函數執行以後,銷燬.
}


funtion test2(){
    console.log(intTestB);
    //能夠,由於隱式聲明爲全局變量,瀏覽器關閉後銷燬.
}

下面是一段引用,來自前端開發指南|菜鳥教程


過度依賴全局變量是咱們組全部人 – 特別是我本身 –特別有負罪感的一件事。
關於爲啥全局變量很差的討論是至關直接的：這增長了腳本和變量衝突的機率，並且源文件和命名空間自己都會充斥着數不清的命名模糊的變量。 Douglas Crockford 堅信一個Javascript應用的代碼質量能夠用其中使用的全局變量數來評價，越少越好。
因爲並非什麼均可以定義成local的（不過要誠實，其實你如今考慮的那個是能夠的，別偷懶），你須要想辦法整理你的變量以免衝突，並把命名空間的膨脹減到最小。最簡單的方法就是採用單變量或者把用到這些全局變量的模塊儘量減小。 
Crockford提到YUI只用了一個全局變量，YAHOO。他在他的博文 「全局統治」 中討論了更多的細節問題。 考慮這種狀況：對於小型web應用，全局變量一般用於保存應用級的設置，能夠用你的項目名或者settings做爲命名去定義一個對象，這樣總的來講會更好
// 被污染的全局命名空間 
ar settingA = true;  
var settingB = false; 
var settingC = "test";  
var settings = { settingA: true, settingB: false, settingC: "test" } 
咱們能夠經過避免使用全局變量來減小衝突機率，可是把命名空間標準化成同樣的，豈不是會增長各個應用之間產生衝突的機率麼？呃，這個擔心確實有道理。因此，建議你用本身特定的應用名做爲全局變量的命名空間，或者用和jQuery採起的$.noConflict() 模式相同的方法從新分配你的命名空間.  
var myAppName = { settings: { settingA: true } } 
//訪問全局變量  
myAppName.settings.settingA; 

// true

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


JavaScript內置函數庫使用無需編譯,而開發者編寫的函數須要在運行前進行編譯,因此內置函數要比本身編寫的函數快得多.


四.合理使用if,switch語句 
1. 判斷超過兩種時,switch快於if,並且其case分句,支持任何類型的數據. 
2. if語句,應當按照各類狀況按可能性大小排列 
3. 及時」break」&」continue」跳出,避免運行無用語句 
4. 循環的性能,提早緩存,避免重複計算.(其實,在其餘地方提早緩存也很重要,此處一提,再也不重複.如需學習,自行百度).


舉個栗子:

var aTest = new Array(1024);
    for (var i = 0; i < aTest.length; i++) {
        // 長度計算1024次
    }
    for (var i = 0, len = aTest.length; i < len; i++) {
        // 計算一次
    }

我的推薦 
本文引用 
本文中引用來自於一篇很好的文章,我的比較推薦,更多細節請點擊前端開發指南|菜鳥教程 觀看,原文javascript部分目錄以下:


1. 代碼留空和格式
2. 註釋
3. 老是使用 === 比較符
4. 使用 .parseInt() 的時候，老是指定第二個 'radix' 參數
5. 避免比較 true 和 false
6. 避免污染全局命名空間
7. 駝峯法變量命名
8. 循環的性能 - 緩存數組長度
9. 循環的性能 - 使用 'break;' 和 'continue;'
10. 函數調用不要傳輸太多的參數
11. 把 'this' 映射爲 'self'
12. 我能用 Boolean 嗎？
13. 儘可能減小從新繪製和從新佈局
14. 不要用微秒來產生惟一的ID
15. 檢測特性，而不是檢測瀏覽器類型
16. 使用可讀的毫秒數
關於高級篇 
固然其實還有一篇更詳細,更乾貨的JavaScript性能優化高級篇(「JavaScript性能優化小知識總結」,不是我寫的),值得你看看JavaScript性能優化小知識點總結