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

　　在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.prototype都找不到該成員，則表示該成員未定義。通過這種方式，book就可以訪問它的原型對象所擁有的每個屬性或方法。

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

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

好了，囉囉嗦嗦那麼多都不知道自己說什麼。目前自己的博文水平還不是很高，有時候就算自己理解了也很難表達出來，別誤導別人就好了。真正總結起來就一句話：一個屬性或方法在原型鏈的位置越深，訪問它的速度就越慢。解決辦法就是：將經常使用的對象成員，數組項和域外的變數存入局部變數中，然後訪問這個局部變數。