儘量減少瀏覽器迴流/重新渲染

Question

我目前正在爲我的碩士論文編寫一些代碼。關於有效的DOM操作，我有幾個問題。

1）考慮，你不得不對許多有接近對方節點的執行一堆DOM操作。對所有這些節點的最高父節點進行深層複製（並將其保留在DOM之外），對該子樹執行操作，然後將其與DOM中的對應節點進行交換，是否有意義。這會最大限度地減少瀏覽器迴流/重新渲染？

2）爲改變一個節點更/比操縱它的子樹少高性能的innerHTML？

3）是否有你能給我在香草的javaScript高效DOM操作什麼比較好的建議（沒有任何框架/庫）？

預先感謝您！

Answer 1

爲了防止過多的瀏覽器渲染，最重要的事情是確保您對您的讀寫進行分組。

如果您需要做的事情到多個節點，並且需要讀取他們的東西，那麼你應該從所有節點先讀，然後寫所有。

的DOM的工作方式是，每次你需要從中讀取數據時，它會檢查其是否被改變。如果是這樣，瀏覽器將重新渲染。

因此，首先選擇所有的元素，你緩存需要得到信息，然後對所有這些設置。