我正在使用 JavaScript 并且我有兩個變數：
current_elementnew_element
兩者都是一個實體，HTMLElement這里是它們各自的表示：
<!-- current_element -->
<div>
<h1>A title</h1>
<ul>
<li>15</li>
<li>18</li>
</ul>
</div>
但是new_element是這樣表示的：
<div>
<h1>A title</h1>
<ul>
<li class="css">15</li>
<li>19</li>
</ul>
</div>
如您所見，這兩個變數之間只有兩個小的差異。我的目標是改變 DOM。實際上，您擁有current_element代表 DOM 中的內容的 ，以及new_element我想用它替換 DOM 的內容。
我主要關心的是性能。
因此，我很想知道應用修改的最有效方法是什么。
- 替換為
replaceWith - 創建一個函式以檢測發生了什么變化，并相應地應用差異。因此，唯一可以對 DOM 應用修改的是對
setAttribute和 屬性的呼叫textContent。
我還沒有能夠創建第二個提案的函式，但我認為它會是遞回的。
我希望它很清楚:)
uj5u.com熱心網友回復：
主要框架（React、Vue）計算新舊 dom 元素之間的差異，然后應用所需的更改。
例如在 React 中，這一步稱為Reconciliation。
所以我認為如果他們這樣做是為了獲得最佳性能，你也應該這樣做。
當然，它們計算虛擬 dom 表示的差異，但如果您直接在 dom 節點上作業，則同樣適用。
uj5u.com熱心網友回復：
您的問題非常不穩定，因為現在性能更好的東西將來可能性能更差。因此，無論似乎表現更好，都應該持保留態度。您可以通過創建一個包含 100 個所需 DOM 更改元素的陣列來比較性能，并使用第一種方法一個接一個地執行，測量累積時間，然后使用第二種方法執行相同的操作。
但是，強烈建議您首先檢查您是否有任何性能問題，因為您可能想要解決一個不存在也將不存在的問題。因此，在進行任何優化之前，建議定義一個函式，如
function changeDOM(root, innerHTML) {
//The implementation
}
并始終如一地使用此功能，因此如果將來出現任何性能問題，您只需更改此功能，一切都會變得更快。現在，讓我們假設您已經或將要遇到性能問題。在這種情況下，您需要在不同的瀏覽器中進行我建議的比較，然后應用最有效的解決方案。
此外，如果您遇到性能問題，它可能與 DOM 更改沒有密切關系。因此，在優化 DOM 更改之前，您需要對頁面進行基準測驗，看看是否存在性能問題，性能問題與 DOM 更改有關。如果兩者的答案都是“是”，那么您將不得不對此進行優化。但是為了輕松地這樣做，請將其與其余代碼分開，將其作為函式呼叫。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/391774.html
標籤：javascript html