高效能Javascript筆記 資料的儲存與訪問效能最佳化

局部變數也就可以理解為在函數內部定義的變數，很明顯訪問局部變數要比域外的變數要快，因為它位於範圍鏈的第一個變數對象中(關於範圍鏈的介紹可以閱讀這篇文章)。變數在範圍鏈的位置越深，訪問所需要的時間就越長，全域變數總是最慢的，因為它們位於範圍鏈的最後一個變數對象。

每種資料類型的訪問都需要付出點效能代價，對於直接量和局部變數基本都能消費得起，而訪問數組項和對象成員則要代價高點。顯示了不同瀏覽器，分別對這四種資料類型進行了200'000次操作所用的時間。

由可以看出，要想最佳化代碼的效能，那麼盡量使用直接量和局部變數，限制數組項和對象成員的訪問次數(將對象成員用一個局部變數來儲存)。

首先我們需要瞭解一下對象成員的訪問過程。其實函數就是一個特殊的對象，所以對象成員的訪問跟函數的內部變數的訪問都差不多，都是基於鏈的尋找，前者是原型鏈，後者是範圍鏈，只是怎麼個鏈法有點差別而已。

對象成員包含屬性和方法，如果該成員是一個函數就稱為方法，否則就稱為屬性。
JavaScript中的對象是基於原形(原形本身就是一個對象)的，原形是其他對象的基礎。當你執行個體化一個Object對象或其它JS的內建對象時(var obj=new Object() or var obj={})，執行個體obj的原形由後台自動建立，瀏覽器FF，safari，Chrome可通過obj.__proto__屬性(等同於 Object.prototype)可以訪問到這個原形，也正是因為這個原形，每一個執行個體都能共用原形對象的成員。如： 複製代碼 代碼如下:var book = { 　　
name:"Javascript Book", 　　
getName = function(){ 　　　　
return this.name; 　　
}
};
alert(book.toString()); //"[object Object]"

此代碼中，book對象有兩個私人成員，分別是屬性name和方法getName。book對象並沒有定義成員toString，但調用了也沒有拋出錯誤，原因是book對象繼承了原形對象的成員。book對象與原形的關係如下：

訪問book對象成員toString的過程是這樣的，當book.toString()被調用時，後台對成員進行名為”toString”的搜 索，首先從執行個體book本身開始，如果在book發現名為”toString”的成員，則搜尋結束，否則繼續向__proto__指向的原型對象搜尋，如 果在Object的原形對象都找不到該成員，則表示該成員未定義。通過這種方式，book就可以訪問它的原型對象所擁有的每個屬性或方法。

對象的另一進階用法就是類比類和繼承類，我喜歡叫這樣用法的對象為對象類。繼承對象類主要就是依靠原型鏈來完成的，這個知識點太多需要另外詳細 說明。通過上面的對象成員搜尋過程，訪問對象成員的速度，隨著原型鏈的越深，搜尋的速度就越慢。就顯示了對象成員在原型鏈中所處的深度與訪問時間的關 系：

由可清楚的知道，每深入原型鏈一層都會增加效能的損失，所以像那種遍曆對象成員的操作開銷很大。還有另外一種常用且損耗效能的做法就是嵌套對象 成員(如window.location.href)，像這種最好的做法就是減少點的次數了。比如location.href就比 window.location.href快。

好了,總結起來就一句話：一個屬性或方法在原型鏈的位置越深，訪問它的速度就越慢。解決辦法就是：將經常使用的對象成員，數組項和域外的變數存入局部變數中，然後訪問這個局部變數。