2011-10-22 34 views
4

我正在研究一個Web界面,該界面需要創建大量(數百個)DOM對象,並在底層數據更改時動態更新或刪除。我正在努力解決與所有對象保持一致的最有效策略,以便應用程序儘可能優雅地擴展。在JavaScript數組中維護對DOM對象和/或jQuery對象的引用是一個壞主意嗎?

我的第一個傾向是創建數組和哈希表匿名引用DOM元素,所以我可以快速找到它們,並派遣任何必要的更改。這種方法會有問題嗎?改爲在DOM樹中查找它們會更好嗎?

jQuery對象呢?在飛行中頻繁創建它們並允許它們被垃圾收集或在某種結構化緩存中保留大量(數百個)它們會更好嗎?

+1

如果您這樣做,請注意懸掛引用,如果您從DOM中刪除了某些東西,則可能最終引用DOM中不再包含的內容。然後你會有指針快樂的時光,試圖弄清楚爲什麼你的代碼行爲如此奇怪。 –

回答

2

最好保留一個jQuery對象,而不是多次創建它們。但請記住,Javascript中的瓶頸是DOM操作,而不是保存其元素的引用。

我剛剛做了一些測試,使用10000個div,並且明顯更快地獲取數組/ jquery對象中的所有內容,而不是每次都在DOM中查看它。

使用IDS和最高的效率指數(許多人使用不具有天然類選擇舊的瀏覽器),即:

var allElements = $("#container").children() 
allElements.eq(10).hide() 
+0

那麼哪個比例更好:var container = $(「#container」);函數HandleSomeEvent(){container.children()。eq(10).hide();}'或'函數HandleSomeEvent(){var container = $(「#container」); container.children()當量(10).hide();}'? –

+0

第一個;因爲每次調用函數時都不必創建jQuery對象。 –

1

的時間要由內容的操作爲主元素,而不是通過查詢它們(尤其是使用elementID查詢選擇器,因爲getElementById非常快)。 我認爲這更多的是代碼結構的問題,而不是性能。這可能是很多額外的代碼來保持這個哈希表與DOM同步,這是我看到的主要問題。 (順便說一句,這聽起來像你真正想要的是一種聲明式表達DOM中哪些元素綁定到哪些數據塊的方式。有框架可以做到這一點,並且他們負責進行更新並保存所有內容同步)

相關問題