簡單先了解一下瀏覽器的渲染過程（圖片來自於網絡）
瀏覽器生成渲染樹的過程（圖片來自於網絡）
迴流
迴流當render tree中的一部分或全部因爲元素的規模尺寸、佈局、隱藏等改變時，瀏覽器重新渲染部分DOM或全部DOM的過程。迴流也被稱爲重排，其實從字面上來看，重排更容易讓人形象易懂（即重新排版整個頁面）。
重繪
當頁面元素樣式改變不影響元素在文檔流中的位置時（如background-color，border-color，visibility），瀏覽器只會將新樣式賦予元素並進行重新繪製操作。
什麼時候會觸發迴流或重繪？
有大量的用戶行爲以及潛在的DHTML改變會觸發迴流。例如，改變瀏覽器窗口的大小，使用一些JavaScript方法，包括計算樣式，對DOM進行元素的添加或刪除，或是改變元素的class等。
添加或者刪除可見的DOM元素；
元素位置改變；
元素尺寸改變——邊距、填充、邊框、寬度和高度；
內容變化，比如用戶在input框中輸入文字，文本或者圖片大小改變而引起的計算值寬度和高度改變；
頁面渲染初始化；
瀏覽器窗口尺寸改變，resize事件發生時；
計算offsetWidth和offsetHeight屬性；
設置style屬性的值；
迴流必將引起重繪，而重繪不一定會引起迴流。
如何減少迴流、重繪？
一、 CSS中避免迴流、重繪
1.儘可能在DOM樹的最末端改變class
2.避免設置多層內聯樣式
3.動畫效果應用到position屬性爲absolute或fixed的元素上
4.避免使用table佈局
5.使用css3硬件加速，可以讓transform、opacity、filters等動畫效果不會引起迴流重繪
二、 JS操作避免迴流、重繪
1.避免使用JS一個樣式修改完接着改下一個樣式，最好一次性更改CSS樣式，或者將樣式列表定義爲class的名稱
2.避免頻繁操作DOM，使用文檔片段創建一個子樹，然後再拷貝到文檔中
3.先隱藏元素，進行修改後再顯示該元素，因爲display:none上的DOM操作不會引發迴流和重繪
4.避免循環讀取offsetLeft等屬性，在循環之前把它們存起來
5.對於複雜動畫效果,使用絕對定位讓其脫離文檔流，否則會引起父元素及後續元素大量的迴流
總結：
迴流在瀏覽器中屬於一種用戶主導的操作，所以知道如何去改進迴流時間以及知道各種文檔屬性（DOM節點深度，css的渲染效率，各種各樣的樣式改變）對迴流時間的影響對於前端開發來講是很有幫助的。有時即便是迴流一個單一的元素，也可能要求它的父元素以及任何跟隨它的元素也產生迴流。例如需要改變某個元素的背景，這就不涉及該元素的屬性，所以只發生重繪。
寫這篇文章，也看了很多相關的blog和文章，這篇文章寫得不是很具體只是大概的內容。想深入瞭解的話可以看下面這篇文章，既有例子又有深度。
你真的瞭解迴流和重繪嗎