高性能Javascript筆記數據的存儲與訪問性能優(yōu)化

更新時間：2012年08月02日 23:12:49 作者：

在JavaScript中，數據的存儲位置對代碼的整體性能有著重要的影響。有四種數據訪問類型：直接量，局部變量，數組項，對象成員

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

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

由上圖可以看出，要想優(yōu)化代碼的性能，那么盡量使用直接量和局部變量，限制數組項和對象成員的訪問次數(將對象成員用一個局部變量來保存)。

首先我們需要了解一下對象成員的訪問過程。其實函數就是一個特殊的對象，所以對象成員的訪問跟函數的內部變量的訪問都差不多，都是基于鏈的查找，前者是原型鏈，后者是作用域鏈，只是怎么個鏈法有點差別而已。

對象成員包含屬性和方法，如果該成員是一個函數就稱為方法，否則就稱為屬性。
JavaScript中的對象是基于原形(原形本身就是一個對象)的，原形是其他對象的基礎。當你實例化一個Object對象或其它JS的內置對象時(var obj=new Object() or var obj={})，實例obj的原形由后臺自動創(chuàng)建，瀏覽器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發(fā)現名為”toString”的成員，則搜索結束，否則繼續(xù)向__proto__指向的原型對象搜索，如果在Object的原形對象都找不到該成員，則表示該成員未定義。通過這種方式，book就可以訪問它的原型對象所擁有的每個屬性或方法。

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

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

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

您可能感興趣的文章: