Google Chrome 中的 DOM 過載問題

Question

在 Google Chrome 中使用大量隱藏項目時遇到一些問題。

最近，我發布了一個很多人認為晦澀難懂的問題，很快就被關閉了。 我找到了這個問題的原因，但到目前為止我不知道如何解決它。

有時在開發頁面時，會使用一種方法，即預先創建一些元素並隱藏，然后在必要時顯示。

所以此類元素的數量會極大地影響瀏覽器的響應速度。 假設我們有以下代碼：

 var elem = document.getElementsByClassName ('Founder') [0]; var parent = document.getElementsByClassName ('Cloud') [0]; var empty = document.getElementsByClassName ('empty') [0]; for (var i = 0; i <50000; i ++) { var clone = elem.cloneNode (true); // var clone = empty.cloneNode (true); clone.style.display = 'none'; parent.appendChild (clone); }

 <div class = 'Cloud'> <input class = 'Founder' type = 'text'> <div class = 'empty'> </div> </div>

因此，當我在 Firefox（67.0（64 位））中啟動它時，沒有特殊的剎車。 但是當我在 Chrome 版本 74.0.3729.169（官方版本）（64 位）中運行它時，我得到了強大的剎車。

在配置文件中，這可以被視為空任務（系統）。 看看截圖。 （它來自舊主題，總共有640,000個節點，但這不改變本質）。

有沒有辦法加快工作速度，我可以凍結沒有顯示的項目嗎？ 據我了解這些空任務，這是瀏覽器索引元素或類似內容的時間。

也許可以通過編程方式更改任何設置，這將加快工作速度（可能需要更多 RAM）。

Answer 1

parent.appendChild(...); 是緩慢的一步。 您要向文檔中添加 50,000 個節點，即使是隱藏的（應該避免回流布局步驟），它們也需要大量添加。

將它們添加到DocumentFragment會有所幫助，但如果您想快速渲染 640,000 個節點，則幫助不大。

提前創建元素然后顯示它們可能是避免用戶交互卡頓的有用方法，但大型文檔通常較慢，並且難以快速制作大量節點。

我認為你有兩個選擇：

1. 將更改分成更小的工作塊，並使用requestAnimationFrame等待下一幀進行下一批。 這樣，將停止JANK表觀秒左右，而瀏覽器適用於所有新的DOM，但需要更多的時間整體。 或者，當其他工作沒有發生時，您可以使用requestIdleCallback在后台構建大量文檔。 使用這些中的任何一個，您都可能遇到文檔顯示為交互式但隱藏的 DOM 節點尚不可用的問題，因此您必須對其進行管理。

2. 根據需要切換到添加 DOM，而是僅優化該 DOM。 創建一些其他對象來管理您的所有數據（您甚至可以使用Worker或Comlink將所有數據保留在主 JS 線程之外）。 這通常會更快，並且是大多數應用程序所做的，但是您將有更多的工作來優化響應用戶操作的性能（他們可能會等待 8 秒讓您的應用程序最初加載，但是如果他們點擊他們想要的東西100 毫秒左右的時間）。