-在討論回流與重繪之前，我們要知道：
瀏覽器使用流式布局模型 (flow based layout)。
瀏覽器會把html解析成dom，把css解析成cssom，dom和cssom合併就產生了render tree。
有了rendertree，我們就知道了所有節點的樣式，然後計算他們在頁面上的大小和位置，最後把節點繪製到頁面上。
由於瀏覽器使用流式布局，對render tree的計算通常只需要遍歷一次就可以完成，但table及其內部元素除外，他們可能需要多次計算，通常要花3倍於同等元素的時間，這也是為什麼要避免使用table布局的原因之一。
一句話：回流必將引起重繪，重繪不一定會引起回流。
當render tree中部分或全部元素的尺寸、結構、或某些屬性發生改變時，瀏覽器重新渲染部分或全部文件的過程稱為回流。
會導致回流的操作：
-頁面首次渲染
-瀏覽器視窗大小發生改變
-元素尺寸或位置發生改變
-元素內容變化（文字數量或大小等等）
-元素字型大小變化
-新增或者刪除可見的dom元素
–啟用css偽類（例如：:hover）
查詢某些屬性或呼叫某些方法
一些常用且會導致回流的屬性和方法：當頁面中元素樣式的改變並不影響它在文件流中的位置時（例如：color、background-color、visibility等），瀏覽器會將新樣式賦予給元素並重新繪製它，這個過程稱為重繪。clientwidth、clientheight、clienttop、clientleft
offsetwidth、offsetheight、offsettop、offsetleft
scrollwidth、scrollheight、scrolltop、scrollleft
scrollintoview()、scrollintoviewifneeded() getcomputedstyle()
getboundingclientrect() scrollto()
效能影響
回流比重繪的代價要更高。
有時即使僅僅回流乙個單一的元素，它的父元素以及任何跟隨它的元素也會產生回流。
現代瀏覽器會對頻繁的回流或重繪操作進行優化：
瀏覽器會維護乙個佇列，把所有引起回流和重繪的操作放入佇列中，如果佇列中的任務數量或者時間間隔達到乙個閾值的，瀏覽器就會將佇列清空，進行一次批處理，這樣可以把多次回流和重繪變成一次。
當你訪問以下屬性或方法時，瀏覽器會立刻清空佇列：因為佇列中可能會有影響到這些屬性或方法返回值的操作，即使你希望獲取的資訊與佇列中操作引發的改變無關，瀏覽器也會強行清空佇列，確保你拿到的值是最精確的。clientwidth、clientheight、clienttop、clientleft
offsetwidth、offsetheight、offsettop、offsetleft
scrollwidth、scrollheight、scrolltop、scrollleft
width、height
getcomputedstyle()
getboundingclientrect()
如何避免
避免使用table布局。
盡可能在dom樹的最末端改變class。
避免設定多層內聯樣式。
將動畫效果應用到position屬性為absolute或fixed的元素上。
避免使用css表示式（例如：calc()）。
避免頻繁操作樣式，最好一次性重寫style屬性，或者將樣式列表定義為class並一次性更改class屬性。
避免頻繁操作dom，建立乙個documentfragment，在它上面應用所有dom操作，最後再把它新增到文件中。
也可以先為元素設定display: none，操作結束後再把它顯示出來。因為在display屬性為none的元素上進行的dom操作不會引發回流和重繪。
避免頻繁讀取會引發回流/重繪的屬性，如果確實需要多次使用，就用乙個變數快取起來。
對具有複雜動畫的元素使用絕對定位，使它脫離文件流，否則會引起父元素及後續元素頻繁回流。
瀏覽器的重繪和回流
重繪 當元素樣式的改變不影響布局時，瀏覽器會使用重繪的方式來更新元素的變化，這種改變只會在ui層的重新畫素繪製，這種方式的對瀏覽器開銷比較小。常見的重繪操作有 改變元素顏色 改變元素背景色 more 回流 又名 重排 當元素的尺寸 結構或者觸發了某個屬性的改變，會導致瀏覽器重新渲染，這種操作會造成回...
瀏覽器的回流和重繪
重繪 比如 background color font size 等，這些屬性的改變不會影響頁面的結構布局，只會影響內容的變化，即這些屬性的改變將會引起瀏覽器的重繪 回流 比如 padding margin height 等，改變這些屬性會影響頁面的結構布局，即改變這些屬性會引起瀏覽器的回流 為什麼...
瀏覽器的重繪和回流
我的部落格 這是我在之前面試中遇到的乙個問題，今天回想起來正好做乙個總結 這其實也是我遇到的一道面試題，與重繪和回流息息相關 使用者輸入 瀏覽器嘗試與伺服器建立連線 伺服器傳送永久重定向 瀏覽器跟蹤重定向位址 伺服器處理請求 伺服器傳送html響應 瀏覽器接收響應，開始解析 解析html檔案，處理並...