2015-05-28 70 views
3

我們在代碼庫中有很多對象,名稱間隔以避免碰撞。JavaScript對象引用緩存

Example : App.local.view.MyView... 

在大多數我在我們使用的完整路徑去的對象的引用代碼庫已經看到的地方,這是相同的功能內重複多次。

Example : 
    function hello() { 
     App.local.view.MyView.render(); 
     ... 
     ... 
     App.local.view.MyView.reset(); 
    } 

我想了解,如果存儲對象的引用如下

var MyView = App.local.view.MyView; 

將不得不在性能上有任何改善。什麼讓我問這個問題是從我的理解現代瀏覽器,比如Chrome自動爲我們在幕後做一些優化。

+0

你可以嘗試自己測試它:https://jsperf.com/但我懷疑它會在性能方面造成很大的差異,但它對可讀性可能有很大的幫助。 –

回答

5

這將是一個改進,但我們正在談論的完全可以忽略的之一。

查找對象的屬性需要時間,但它確實非常快。

如果您出於性能原因這樣做,不要

如果你這樣做是爲了讓你的代碼更具可讀性/可維護性,那就沒關係。


編輯:

我創建了一個基準來測試:Run the benchmark

var data = {a: {b: {c: {d: 1}}}}; 
var cache = data.a.b.c.d; 

// uncached 901,326,988 ±1.03% fastest 
// cached 879,568,962 ±0.95% 2% slower 

// Chrome 41 on OSX 10.10 

嗯,這是驚人的!

原來它的速度更快只是調用而不是

cache + 1 

data.a.b.c.d + 1 

我敢肯定,這個變化基於JavaScript實現的。提供具體原因爲什麼發生這種情況將留給其他在js引擎內部挖掘周圍的genii。

所以考慮到這一點,我的上述建議保持不變:

如果你這樣做是出於性能的原因, —它實際上更慢。

如果你這樣做是爲了讓你的代碼更具可讀性/可維護性,那麼這就好了—性能代價是值得更清晰的代碼的價值。

+0

這可能是部分正確的,但在特殊情況下局部變量可能快得多。例如,像大規模循環一樣。 – EvilZebra

+0

@Evilzebra謝謝,我對此發表了一番評論。它仍然大部分可以忽略不計。 – naomik

+0

@naomik對於額外的內存使用來說,它可以忽略多少變量,或者這同樣可以忽略不計? –

0

這是針對具體實現的,主要依賴於底層的JavaScript引擎。

例如,v8引擎(Chrome &也許是其他人)對JavaScript對象使用so-called hidden classes。這具有以下優點:已知每個對象的屬性在內存中的固定偏移處,因此訪問對象的屬性非常快。另一方面,一些實現(我只使用node.js,所以我沒有任何特定的瀏覽器引用使用這種方法,但Firefox似乎使用這種方法 - 見下文)可能會使用字典來映射對象的屬性到他們的內存位置。字典查找需要更多的操作(更多的CPU週期),所以他們有點慢。

但是,總的來說,我們正在談論的是非常小的差異。

總而言之,在性能方面,這對您的代碼性能幾乎沒有影響。但是,從代碼樣式來看,它可以提高代碼的可讀性和可維護性。

jsperf(@naomik提供)似乎支持這一點 - 在Chrome運行時,不同的是5%左右,而對於Firefox瀏覽器更是高達29%。