參考： 高效能web開發：深入理解頁面呈現、重繪、回流
因為一些原因要重新構建渲染數的時候，就叫做回流, 第一次構建的時候也叫做回流。
引起回流的操作（回流一定會導致重繪）
影響元素幾何屬性發生變化 重繪
瀏覽器會使渲染樹中受到影響的部分失效，並重新構造這部分渲染樹，完成回流後，瀏覽器會重新繪製受影響的部分到螢幕中，該過程成為重繪。
只引起重繪的操作
回流比重繪的代價要更高，回流的花銷跟render tree有多少節點需要重新構建有關係，假設你直接操作body，比如在body最前面插入1個元素，會導致整個render tree回流，這樣代價當然會比較高，但如果是指body後面插入1個元素，則不會影響前面元素的回流。瀏覽器都會優化這些操作，瀏覽器會維護1個佇列，把所有會引起回流、重繪的操作放入這個佇列，等佇列中的操作到了一定的數量或者到了一定的時間間隔，瀏覽器就會把flush佇列，進行乙個批處理。這樣就會讓多次的回流、重繪變成一次回流重繪。
請求以下資訊會引起，強制瀏覽器提前flush佇列的操作（就是減少對render數的操作、減少獲取style的操作）
具體方法
// block1是position:absolute 定位的元素，它移動會影響到它父元素下的所有子元素。
// 因為在它移動過程中，所有子元素需要判斷block1的z-index是否在自己的上面，
// 如果是在自己的上面,則需要重繪,這裡不會引起回流$(
"#block1").
animate()
;// block2是相對定位的元素,這個影響的元素與block1一樣，但是因為block2非絕對定位
// 而且改變的是marginleft屬性，所以這裡每次改變不但會影響重繪，
// 還會引起父元素及其下元素的回流$(
"#block2").
animate()
;
頁面回流和重繪的優化
在頁面中 js的執行和css的執行其實是兩條執行緒 我們只知道 最終的rendertree是由 domtree cssomtree js 的作用下 來生成的 但是js 的執行最終要依賴 domtree cssomtree的生成結果，這樣就導致了 css的執行 阻塞了js的執行，因此，我們把css 的...
前端效能優化 回流與重繪
最近在研究virtual dom，接著就研究回顧起回流 reflow 與重繪 repaint 了。在理解這兩個概念之前，我們先來看看瀏覽器渲染的工作流程。這裡以webkit渲染引擎為例 瀏覽器請求到html文件後，將html解析成dom tree css被解析成css style rules 解析完...
回流重繪方向的效能優化
瀏覽器將獲取的html文件並解析成dom樹。處理css標記，構成層疊樣式表模型cssom css object model 將dom和cssom合併為渲染樹 rendering tree 將會被建立，代表一系列將被渲染的物件。渲染樹的每個元素包含的內容都是計算過的，它被稱之為布局layout。瀏覽器...