回流和重繪是由於瀏覽器的再次渲染所引起的乙個話題，我們首先要知道瀏覽器的渲染過程：
通常來說，渲染引擎會解析html文件來構建dom樹，與此同時，渲染引擎也會用css解析器解析cssdom樹。接下來，dom樹和cssdom樹關聯起來構成渲染渲染樹(render tree)，然後瀏覽器根據渲染樹布局，渲染整個頁面。回流：當渲染樹(render tree)的一部分或者全部元素因為尺寸，布局，顯示和隱藏，或者元素內部的文字結構發生變化，導致頁面需要重新構建頁面的時候，回流就產生了。
重繪：當乙個元素的尺寸，布局，顯示和隱藏沒有改變，而是改變了元素的外觀風格的時候(比如修改字型顏色)，重繪就發生了。
結論：回流必定觸發重繪，而重繪不一定觸發回流。回流會導致渲染樹需要重新計算，開銷比重繪大，所以我們要盡量避免回流的產生。
頁面第一次渲染，在頁面發生首頁渲染的時候，所有元件都需要進行首次布局，這是開銷最大的一次回流。
瀏覽器視窗尺寸改變
元素位置和尺寸發生改變的時候
新增和刪除可見元素
內容發生改變（文字數量或者大小等等）
元素字型大小的改變
啟用css偽類（:hover）
設定style屬性
查詢某些屬性或呼叫某些方法。比如說：
offsettop、offsetleft、 offsetwidth、offsetheight、scrolltop、scrollleft、scrollwidth、scrollheight、clienttop、clientleft、clientwidth、clientheight
除此之外，當我們呼叫getcomputedstyle方法，或者ie裡的currentstyle時，也會觸發回流，原理是一樣的，都為求乙個「即時性」和「準確性」。
當render tree一些元素需要更新屬性，這些屬性是影響元素外觀的，風格的，不影響布局，比如visibility，outline，背景顏色，字型顏色等等。
操作
dom的時候，盡量使用低層級的dom節點繼續操作。盡量不要使用
table布局，乙個小小的改動可能會使整個table進行重新布局。不要頻繁操作元素的樣式，對於靜態頁面，可以修改類名，而不是樣式。
使用
transform代替top，left，margin-left等屬性。不在迴圈中頻繁獲取操作
dom的元素樣式，offsetwidth等使用
fixed和absolute，使元素脫離文件流，他們發生變化不影響其他元素。避免頻繁操作
dom，可以建立乙個文件片段documentfragment，在它上面應用所有dom操作，最後再把它新增到文件中。將元素先設定
display: none，操作結束後再把它顯示出來。因為在display屬性為none的元素上進行的dom操作不會引發回流和重繪。將
dom的多個讀操作（或者寫操作）放在一起，而不是讀寫操作穿插著寫。這得益於瀏覽器的渲染佇列機制。1.
documentfragment是什麼？用它跟直接操作dom的區別是什麼？documentfragment，文件片段介面，乙個沒有父物件的最小文件物件。它被作為乙個輕量版的 document使用，就像標準的document一樣，儲存由節點（nodes）組成的文件結構。與document相比，最大的區別是documentfragment不是真實 dom 樹的一部分，它的變化不會觸發 dom 樹的重新渲染，且不會導致效能等問題。當我們把乙個 documentfragment 節點插入文件樹時，插入的不是 documentfragment 自身，而是它的所有子孫節點。在頻繁的dom操作時，我們就可以將dom元素插入documentfragment，之後一次性的將所有的子孫節點插入文件中。
和直接操作dom相比，將documentfragment 節點插入dom樹時，不會觸發頁面的重繪，這樣就大大提高了頁面的效能。
2. 如何優化動畫？
對於如何優化動畫，我們知道，一般情況下，動畫需要頻繁的操作dom，就就會導致頁面的效能問題，我們可以將動畫的position屬性設定為absolute或者fixed，將動畫脫離文件流，這樣他的回流就不會影響到頁面了。
頁面回流和重繪的優化
在頁面中 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 解析完...
效能優化 頁面渲染 重繪 回流
參考 高效能web開發 深入理解頁面呈現 重繪 回流 因為一些原因要重新構建渲染數的時候，就叫做回流,第一次構建的時候也叫做回流。引起回流的操作 回流一定會導致重繪 影響元素幾何屬性發生變化 重繪 瀏覽器會使渲染樹中受到影響的部分失效，並重新構造這部分渲染樹，完成回流後，瀏覽器會重新繪製受影響的部分...