Web 前端性能優化——把 JavaScript 中的對象存儲在變量中

1、爲對象屬性建立變量快捷方式

將對象屬性賦值給變量，在使用對象屬性的時候，用變量代替，有很多好處：

1）減少對象的搜索鏈

2）變量名比屬性可讀性更好

3）壓縮代碼

//以前的寫法
document.body.addEventListener("click", function(){
    //時間處理程序
});

document.body.className = "user-" + ajaxResult.user[0].user.id;

document.documentElement.setAttribute("data-user-id", ajaxResult.user[0].user.id);


//現在的寫法
var doc = document,
      body = doc.body,
      userid = ajaxResult.user[0].user.id;

body.addEventListener("click", function(){
    //時間處理程序
});

body.className = "user-" + userid;

doc.documentElement.setAttribute("data-user-id", userid);

（參考：http://www.gbtags.com/gb/share/1482.htm）

2、儘可能存儲 NodeList 和選擇器引擎 Collection

通常我們會寫出這樣的代碼：

$(".nav a").css("display", "none");

$(".nav a").css("display", "block");

儘管現在的選擇器引擎和瀏覽器已經在性能上快了不少，但是重複工作始終是會影響性能的。

我們最好是使用變量來存儲 DOM 元素：

var $navA = $(".nav a");

$navA.css("display", "none");

$navA.css("display", "block");

（參考：http://www.gbtags.com/gb/share/1478.htm）

3、存儲正則表達式

對於正則表達式，通常會有這樣的代碼

//判斷 someValue 是否只包含數字
if(someValue.match(/(\d+)/g)){

}

這種寫法的問題是：每次判定都會創建一個正則表達式對象，而需要它們完成的工作確是一樣的。

這樣的重複工作可以通過將正則表達式存儲在一個變量中來避免

var digitsRegex = /(\d+)/g;

myInput.addEventListener("change", function(){
    if(myInput.value.match(digitRegex)){

    }
}):

（參考：http://www.gbtags.com/gb/share/1454.htm）