快捷導(dǎo)航

高性能Javascript筆記數(shù)據(jù)的存儲(chǔ)與訪(fǎng)問(wèn)性能優(yōu)化

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

在JavaScript中，數(shù)據(jù)的存儲(chǔ)位置對(duì)代碼的整體性能有著重要的影響。有四種數(shù)據(jù)訪(fǎng)問(wèn)類(lèi)型：直接量，局部變量，數(shù)組項(xiàng)，對(duì)象成員

局部變量也就可以理解為在函數(shù)內(nèi)部定義的變量，很明顯訪(fǎng)問(wèn)局部變量要比域外的變量要快，因?yàn)樗挥谧饔糜蜴湹牡谝粋€(gè)變量對(duì)象中(關(guān)于作用域鏈的介紹可以閱讀這篇文章)。變量在作用域鏈的位置越深，訪(fǎng)問(wèn)所需要的時(shí)間就越長(zhǎng)，全局變量總是最慢的，因?yàn)樗鼈兾挥谧饔糜蜴湹淖詈笠粋€(gè)變量對(duì)象。

每種數(shù)據(jù)類(lèi)型的訪(fǎng)問(wèn)都需要付出點(diǎn)性能代價(jià)，對(duì)于直接量和局部變量基本都能消費(fèi)得起，而訪(fǎng)問(wèn)數(shù)組項(xiàng)和對(duì)象成員則要代價(jià)高點(diǎn)。下圖顯示了不同瀏覽器，分別對(duì)這四種數(shù)據(jù)類(lèi)型進(jìn)行了200'000次操作所用的時(shí)間。

由上圖可以看出，要想優(yōu)化代碼的性能，那么盡量使用直接量和局部變量，限制數(shù)組項(xiàng)和對(duì)象成員的訪(fǎng)問(wèn)次數(shù)(將對(duì)象成員用一個(gè)局部變量來(lái)保存)。

首先我們需要了解一下對(duì)象成員的訪(fǎng)問(wèn)過(guò)程。其實(shí)函數(shù)就是一個(gè)特殊的對(duì)象，所以對(duì)象成員的訪(fǎng)問(wèn)跟函數(shù)的內(nèi)部變量的訪(fǎng)問(wèn)都差不多，都是基于鏈的查找，前者是原型鏈，后者是作用域鏈，只是怎么個(gè)鏈法有點(diǎn)差別而已。

對(duì)象成員包含屬性和方法，如果該成員是一個(gè)函數(shù)就稱(chēng)為方法，否則就稱(chēng)為屬性。
JavaScript中的對(duì)象是基于原形(原形本身就是一個(gè)對(duì)象)的，原形是其他對(duì)象的基礎(chǔ)。當(dāng)你實(shí)例化一個(gè)Object對(duì)象或其它JS的內(nèi)置對(duì)象時(shí)(var obj=new Object() or var obj={})，實(shí)例obj的原形由后臺(tái)自動(dòng)創(chuàng)建，瀏覽器FF，safari，Chrome可通過(guò)obj.__proto__屬性(等同于 Object.prototype)可以訪(fǎng)問(wèn)到這個(gè)原形，也正是因?yàn)檫@個(gè)原形，每一個(gè)實(shí)例都能共享原形對(duì)象的成員。如：

復(fù)制代碼代碼如下:

 
var book = { 　　 
name:"Javascript Book", 　　 
getName = function(){ 　　　　 
return this.name; 　　 
} 
}; 
alert(book.toString()); //"[object Object]" 

此代碼中，book對(duì)象有兩個(gè)私有成員，分別是屬性name和方法getName。book對(duì)象并沒(méi)有定義成員toString，但調(diào)用了也沒(méi)有拋出錯(cuò)誤，原因是book對(duì)象繼承了原形對(duì)象的成員。book對(duì)象與原形的關(guān)系如下：

訪(fǎng)問(wèn)book對(duì)象成員toString的過(guò)程是這樣的，當(dāng)book.toString()被調(diào)用時(shí)，后臺(tái)對(duì)成員進(jìn)行名為”toString”的搜索，首先從實(shí)例book本身開(kāi)始，如果在book發(fā)現(xiàn)名為”toString”的成員，則搜索結(jié)束，否則繼續(xù)向__proto__指向的原型對(duì)象搜索，如果在Object的原形對(duì)象都找不到該成員，則表示該成員未定義。通過(guò)這種方式，book就可以訪(fǎng)問(wèn)它的原型對(duì)象所擁有的每個(gè)屬性或方法。

對(duì)象的另一高級(jí)用法就是模擬類(lèi)和繼承類(lèi)，我喜歡叫這樣用法的對(duì)象為對(duì)象類(lèi)。繼承對(duì)象類(lèi)主要就是依靠原型鏈來(lái)完成的，這個(gè)知識(shí)點(diǎn)太多需要另外詳細(xì) 說(shuō)明。通過(guò)上面的對(duì)象成員搜索過(guò)程，訪(fǎng)問(wèn)對(duì)象成員的速度，隨著原型鏈的越深，搜索的速度就越慢。下圖就顯示了對(duì)象成員在原型鏈中所處的深度與訪(fǎng)問(wèn)時(shí)間的關(guān) 系：

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

好了,總結(jié)起來(lái)就一句話(huà)：一個(gè)屬性或方法在原型鏈的位置越深，訪(fǎng)問(wèn)它的速度就越慢。解決辦法就是：將經(jīng)常使用的對(duì)象成員，數(shù)組項(xiàng)和域外的變量存入局部變量中，然后訪(fǎng)問(wèn)這個(gè)局部變量。

您可能感興趣的文章: