重繪與迴流是由於瀏覽器的再次渲染所引起的一個話題，所以我們需要先了解瀏覽器的渲染過程； 一個前端頁面無非就是有html、css、JavaScript組成的。通常來說，渲染引擎會解析HTML文件來構建DOM樹，與此同時，渲染引擎也會用CSS解析器解析CSS文件構建CSSOM樹。接下來，DOM樹和CSSOM樹關聯起來構成渲染樹（RenderTree），這一過程稱為Attachment。然後瀏覽器按照渲染樹進行佈局（Layout），最後一步通過繪製顯示出整個頁面。 當render tree中的一部分(或全部)因為元素的規模尺寸，佈局，隱藏等改變而需要重新構建, 這就稱為迴流(reflow)。每個頁面至少需要一次迴流，就是在頁面第一次載入的時候。在迴流的時候，瀏覽器會使渲染樹中受到影響的部分失效，並重新構造這部分渲染樹，完成迴流後，瀏覽器會重新繪製受影響的部分到螢幕中，該過程成為重繪。 注意：迴流必將引起重繪，而重繪不一定會引起迴流。迴流會導致渲染樹需要重新計算，開銷比重繪大，所以我們要儘量避免迴流的產生。

一、常見的避免方法：

1.樣式集中改變 通過class和cssText進行集中改變樣式

2. 快取佈局資訊

3.將position屬性設定為absolute或fixed，position屬性為absolute或fixed的元素，迴流開銷比較小，不用考慮它對其他元素的影響

二、重繪和迴流的區別

1、 重繪：元素樣式的改變（但寬高、大小、位置等不變） 如：outline、visibility、color、background-color等 只改變自身樣式，不會影響到其他元素

2、 迴流：元素的大小或者位置發生改變（當頁面佈局和幾何資訊發生改變的時候），觸發了重新佈局導致渲染樹重新計算佈局和渲染。 ​ 如新增或刪除可見的DOM元素；元素的位置發生變化；元素的尺寸發生變化、內容發生變化（如文字變化或圖片被另一個不同尺寸的圖片所代替）；頁面一開始渲染的時候（無法避免）； ​ 因為迴流是根據視口大小來計算元素的位置和大小的，所以瀏覽器視窗尺寸變化也會引起迴流

注意：迴流一定會觸發重繪，而重繪不一定會迴流