要了解什麼是迴流和重繪，首先要知道一個頁面是如何在瀏覽器中渲染的。
瀏覽器渲染頁面步驟
- 瀏覽器把HTML解析成DOM樹；把CSS解析成CSSOM樹
- DOM樹和CSSOM樹合併成render樹
- 根據renderTree來佈局，計算每個節點的大小位置信息
- 將renderTree各個節點繪製到屏幕上
重繪repaint
當頁面中元素樣式的改變並不影響它在文檔流中的位置時（例如：color、background-color、visibility等），瀏覽器會將新樣式賦予給元素並重新繪製它，這個過程稱爲重繪。
重繪不會引起其他dom的重新繪製
迴流reflow
當Render Tree中部分或全部元素的尺寸、結構、或某些屬性發生改變時（文檔流位置改變），瀏覽器重新渲染部分或全部文檔的過程稱爲迴流。
區別
迴流一定會引起重繪，重繪不規定觸發迴流
什麼是FOUC（Flash of unstyled content）
fouc簡稱無樣式內容閃爍。瀏覽器表現就是頁面出現無樣式dom，或者部分樣式dom。突然又恢復正常樣式
原因：
- 使用import方法導入樣式表。
- 將樣式表放在頁面底部
- 有幾個樣式表，放在html結構的不同位置。
css和js都會阻塞渲染
js使用defer和async改變阻塞
defer
有序，不改變script中代碼執行順序。
defer 與相比普通 script，有兩點區別：
- 載入 JavaScript 文件時不阻塞 HTML 的解析
- 執行階段被放到 HTML 標籤解析完成之後。
async
異步，無序（加載好就執行）
與 defer 的區別在於，如果已經加載好，就會開始執行——無論此刻是 HTML 解析階段還是 DOMContentLoaded 觸發之後；一定在load之前
