瀏覽器相關，回流和重繪

在討論回流與重繪之前，我們要知道：

瀏覽器使用流式布局模型 (flow based layout)。

瀏覽器會把html解析成dom，把css解析成cssom，dom和cssom合併就產生了render tree。

有了rendertree，我們就知道了所有節點的樣式，然後計算他們在頁面上的大小和位置，最後把節點繪製到頁面上。

由於瀏覽器使用流式布局，對render tree的計算通常只需要遍歷一次就可以完成，但table及其內部元素除外，他們可能需要多次計算，通常要花3倍於同等元素的時間，這也是為什麼要避免使用table布局的原因之一。

一句話：回流必將引起重繪，重繪不一定會引起回流。

當render tree中部分或全部元素的尺寸、結構、或某些屬性發生改變時，瀏覽器重新渲染部分或全部文件的過程稱為回流。

會導致回流的操作：

一些常用且會導致回流的屬性和方法：

當頁面中元素樣式的改變並不影響它在文件流中的位置時（例如：color、background-color、visibility等），瀏覽器會將新樣式賦予給元素並重新繪製它，這個過程稱為重繪。

回流比重繪的代價要更高。

有時即使僅僅回流乙個單一的元素，它的父元素以及任何跟隨它的元素也會產生回流。

現代瀏覽器會對頻繁的回流或重繪操作進行優化：

瀏覽器會維護乙個佇列，把所有引起回流和重繪的操作放入佇列中，如果佇列中的任務數量或者時間間隔達到乙個閾值的，瀏覽器就會將佇列清空，進行一次批處理，這樣可以把多次回流和重繪變成一次。

當你訪問以下屬性或方法時，瀏覽器會立刻清空佇列：

因為佇列中可能會有影響到這些屬性或方法返回值的操作，即使你希望獲取的資訊與佇列中操作引發的改變無關，瀏覽器也會強行清空佇列，確保你拿到的值是最精確的。