最佳實踐：替換每個元素還是僅檢查和替換已更改的內容是否更有效？

Question

這個問題源於我在Javascript中面臨的難題，盡管更一般的科學回答將非常有幫助。

如果要迭代對象或數組以用於其他目的（並且已知只有一個感興趣的元素已更改並且可以對它進行操作），則最好：

• 只需用新數據替換每個元素即可反映變化

• 嚴格檢查每個元素，僅替換已更改的元素

（在此示例中，雖然只有一個文本信息旨在更改，但是正在調整圖形中所有條的高度（因為它們是相對的）。）

Array.from(result['data']).forEach(row => {
    const bar = document.getElementById('bar-' + row['date']);
    bar.style.height = 'calc(1.6rem + ' + row['percentage'] + '%)';
    bar.firstChild.textContent = row['distance'];
});

要么：

Array.from(result['data']).forEach(row => {
    const bar = document.getElementById('bar-' + row['date']);
    bar.style.height = 'calc(1.6rem + ' + row['percentage'] + '%)';
    if (bar.firstChild.textContent !== row['distance']) bar.firstChild.textContent = row['distance'];
});

我想這是一個暴露我無知的問題，這使我很難得出結論：當已知某個差異存在於集合中的某個位置時，替換所有元素是否在計算上會比較費力，或者尋找起來更便宜排除違規個人並僅更改該值？

（設置計時器，即console.timeEnd（），已被證明是不確定的。）

任何教育將不勝感激。 我無法解決這個問題。

Answer 1

這取決於瀏覽器。

至少在Chrome和Opera上，未經檢查的普通分配看起來比查找現有文本的性能更高，即使在查找現有文本的基礎上沒有可能的分配，其數量級約為3倍：

（警告：運行以下代碼會在一段時間內阻止您的瀏覽器，只有在確定時才按“運行”）

 const fn1 = () => { const bar = document.querySelector('#bar'); for (let i = 0; i < 9999999; i++) bar.textContent = 'bar1'; }; const fn2 = () => { const bar = document.querySelector('#bar'); for (let i = 0; i < 9999999; i++) { // The following condition will never be fulfilled: if (bar.textContent !== 'bar2') bar.textContent = 'bar2'; } }; const now0 = performance.now(); fn1(); const now1 = performance.now(); fn2(); const now2 = performance.now(); console.log(now1 - now0); console.log(now2 - now1); 

 <div id="bar"></div> 

另一方面，在Firefox 56上，查找似乎幾乎不需要時間（而分配在計算上很昂貴）

但是，如果您有成千上萬的元素，那么這只是擔心的事情。 除非您要處理成千上萬的元素，否則就沒有必要對其進行優化。

Answer 2

無需檢查屬性是否已經具有您要為其分配的值。 瀏覽器將確定該值是否實際更改，並進行相應處理。

Answer 3

因為在您的示例中，您已經調用了DOM方法getElementById ，這是檢查屬性的最慢的部分，它比對屬性進行更改要快得多。 因此，始終盡量減少DOM操作總是更好的選擇。

UPD @CertainPerformance的測試表明，瀏覽器之間的性能有所不同=）