Javascript性能問題，有太多的DOM節點？

我目前正在調試一個只是無休止地用DOM元素填充頁面的ajax聊天。如果您的聊天時間長達3小時，那麼您最終將得到的結果是上帝不知道有多少個DOM節點。Javascript性能問題，有太多的DOM節點？

與極端相關的問題有哪些 DOM的用法？

用戶界面是否可能完全無響應（特別是在Internet Explorer中）？

（和與此相關的問題是偏離航向的解決方案，如果有比手工垃圾收集和清除DOM節點以外的任何其他解決方案。）

2010-12-06 Jens

您是否遇到問題或只是從理論上講？如果是這樣，你能給出一個url或者至少一些更詳細的信息，你會看到什麼樣的減速（當附加新節點，滾動時，ajax事件等）。您應該嘗試http://www.dynatrace.com/en/ – galambalazs 2010-12-06 13:36:23

大部分現代瀏覽器應該能夠處理得很好巨大DOM樹。而「最」通常不包含IE。因此，您的瀏覽器可能會變得無響應（因爲它需要太多的內存 - >交換），或者因爲它的渲染器只是不堪重負。

標準的解決方案是放棄元素，比如在頁面有10'000行的值得聊天之後。即使是100000行也不應該是個大問題。但是我會開始對比這個數字大得多的數字感到不安（比如說數百萬行）。

[編輯]另一個問題是內存泄漏。即使JS使用垃圾回收，如果您在代碼中犯了一個錯誤，並在全局變量中引用已刪除的DOM元素（或從全局變量中引用對象引用），即使頁面本身僅包含少量千元素。

來源

2010-12-06 11:14:36

謝謝。很難知道瀏覽器可以處理多少個DOM元素，但我同意，不要限制聊天會話中顯示的聊天行數量。更好的解決方案是有某種歷史觀點。因爲我不能重建整個事情，有些韭菜很難「後期修復」，但我添加了一些手動垃圾收集。 – Jens 2010-12-06 12:53:41

極端的問題 DOM使用可以歸結爲性能。 DOM腳本非常昂貴，因此不斷訪問和操作DOM可能會導致較差的性能（和用戶體驗），特別是當元素數量變得非常大時。

考慮HTML集合，例如document.getElementsByTagName('div')。這是針對文檔的查詢，每次需要最新信息（例如集合的長度）時，都會重新執行該查詢。這可能導致效率低下。訪問和操作循環內的集合時會發生最糟糕的情況。

有很多考慮因素和例子，但它們取決於應用程序。

來源

2010-12-08 01:21:58 Chocula

只是有大量的DOM節點不應該是一個問題（除非客戶端RAM短）;然而，操縱大量的DOM節點會很慢。例如，如果你對100個元素進行這樣的操作，循環遍歷一組元素並更改每個元素的背景顏色都可以，但如果你在100,000個元素上操作，可能需要一段時間。另外，一些舊的瀏覽器在處理巨大的DOM樹時遇到了問題 - 例如，滾動成千上萬行的表可能會讓人無法接受。

一個很好的解決方案是緩衝視圖。基本上，您只能顯示在任何給定時刻在屏幕上可見的元素，而當用戶滾動時，您將刪除隱藏的元素，並顯示顯示的元素。通過這種方式，樹中DOM節點的數量相對穩定，但您並不會真的失去任何東西。

另一個類似的解決方案是對任何給定時間顯示的消息數量執行上限。這樣，任何過去的信息，比如10,00都會被刪除，並且看到它們，您需要點擊一個顯示更多信息的按鈕或鏈接。如果你需要參考，這就是Facebook用他們的個人資料做的事情。

來源

2010-12-08 01:49:08

Javascript性能問題，有太多的DOM節點？

回答

相關問題