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

Question

我正在調試一個ajax聊天，它無休止地用DOM元素填充頁面。 如果你有3個小時的聊天時間，你最終會知道有多少個DOM節點。

與極端 DOM使用相關的問題是什么？

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

（與此問題相關的當然是解決方案，如果除了手動垃圾收集和刪除dom節點之外還有其他任何解決方案。）

Answer 1

大多數現代瀏覽器應該能夠很好地處理巨大的DOM樹。 而“大多數”通常不包括IE。

所以，是的，你的瀏覽器可能會變得沒有響應（因為它需要太多RAM - >交換）或因為它的渲染器只是不堪重負。

標准解決方案是刪除元素，比如在頁面有10,000行的聊天之后。 即使是100'000線也不應該是一個大問題。 但是我開始對比這大得多的數字感到不安（比如數百萬行）。

[編輯]另一個問題是內存泄漏。 即使JS使用垃圾收集，如果您在代碼中出錯並在全局變量中保留對已刪除DOM元素的引用（或者從全局變量引用對象），即使頁面本身只包含少量內容，也會耗盡內存千元素。

Answer 2

只是擁有大量的DOM節點應該不是什么大問題（除非客戶端缺少RAM）; 但是， 操縱大量DOM節點會非常慢。 例如，循環瀏覽一組元素並更改每個元素的背景顏色，如果您對100個元素進行此操作就可以了，但如果您在100,000個元素上執行此操作可能需要一段時間。 此外，一些舊的瀏覽器在使用巨大的DOM樹時會遇到問題 - 例如，滾動數十萬行的表可能會慢得令人無法接受。

一個很好的解決方案是緩沖視圖。 基本上，您只顯示在任何給定時刻在屏幕上可見的元素，當用戶滾動時，您將刪除隱藏的元素，並顯示顯示的元素。 這樣，樹中DOM節點的數量相對恆定，但實際上並沒有丟失任何東西。

另一個類似的解決方案是對任何給定時間顯示的消息數量實施上限。 通過這種方式，過去的所有郵件（例如100）都會被刪除，要查看它們，您需要點擊顯示更多內容的按鈕或鏈接。 如果您需要參考，這就是Facebook對其個人資料的處理方式。

Answer 3

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

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

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