何時在DOM環境中進行重排？

Question

什么類型的活動會觸發帶有DOM的網頁重排？

似乎有不同的觀點。 根據http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/ ，它發生了

• 添加或刪除DOM節點時。
• 動態應用樣式時（例如element.style.width =“10px”）。
• 當您檢索必須計算的度量時，例如訪問offsetWidth，clientHeight或任何計算的CSS值（通過DOM兼容瀏覽器中的getComputedStyle（）或IE中的currentStyle）。

但是，根據http://dev.opera.com/articles/view/efficient-javascript/?page=3 ，只有當已經排隊的重排操作時，測量才會觸發重排。

有沒有人有更多的想法？

Answer 1

兩篇文章都是正確的。 人們可以放心地假設，無論何時你做了一些可能合理要求計算DOM中元素尺寸的東西，你就會觸發回流。

另外，據我所知，兩篇文章都說同樣的話。

第一篇文章稱回流發生在：

當您檢索必須計算的度量時 ，例如訪問offsetWidth ， clientHeight或任何計算的CSS值（通過DOM兼容的瀏覽器中的getComputedStyle（）或IE中的currentStyle），同時DOM更改排隊等待。

第二篇文章指出：

如前所述，瀏覽器可能會為您緩存多個更改，並且只有在完成所有更改后才重排一次。 但是，請注意， 對元素進行測量會強制它進行回流 ，因此測量結果是正確的。 這些變化可能會或可能不會明顯重新粉刷，但回流本身仍然必須在幕后進行。

使用offsetWidth等屬性或使用getComputedStyle等方法進行測量時，會生成此效果。 即使沒有使用這些數字，只需在瀏覽器緩存更改時使用其中任何一個，就足以觸發隱藏的重排。 如果重復進行這些測量，您應該考慮只進行一次，並存儲結果，然后可以使用。

我認為這與他們之前所說的相同。 Opera會盡最大努力緩存值並避免重排，但你不應該依賴它的能力。

對於所有意圖和目的，當他們說所有三種類型的相互作用都可能導致回流時，只要相信他們所說的話。

干杯。

Answer 2

查看了解Internet Explorer渲染行為的“由屬性讀取訪問觸發的渲染”部分，其中IE中的以下代碼將導致渲染活動。

function askforHeight () {
  $("#lower").height();  
}

Answer 3

document.body.style.display = 'none';
document.body.style.display = 'block';

這通常可以解決那些難以理解的布局錯誤。