css外部檔案的引入要放到頭部，載入css的時候頁面渲染是被阻塞的，js也是會阻塞頁面渲染的，ui渲染和js引擎執行緒是互斥的，不是並行的，css的效能會讓js變慢，優化效能，layout painting。
當render tree中的一部分(或全部)因為元素的規模尺寸，幾何屬性，布局，隱藏等改變而需要重新構建。這就稱為回流。每個頁面至少需要一次回流，就是在頁面第一次載入的時候。
當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如background-color。則就叫稱為重繪。
注：回流必將引起重繪，而重繪不一定會引起回流。
不同的條件下發生重排的範圍及程度會不同 ：
1.頁面初始渲染
2.改變字型，改變元素尺寸（寬、高、內外邊距、邊框，改變元素位置等
各種情況：
設定 style 屬性的值
啟用 css 偽類，比如 :hover
操作 class 屬性
css3的某些屬性（ 結合此鏈結檢視哪些屬性會觸發重排、哪些屬性會觸發重繪以及哪些屬性會觸發合成；）
3…改變元素內容（文字或等或比如使用者在input框中輸入文字）
4.新增/刪除可見dom元素（注意：如果是刪除本身就display:none的元素不會發生重排；visibility:hidden的元素顯示或隱藏不影響重排）
5.fixed定位的元素,在拖動滾動條的時候會一直回流
調整視窗大小（resizing the window）
7.計算 offsetwidth 和 offsetheight 屬性【注釋2】
【注釋2：flush佇列】
瀏覽器是聰明的，當對以下屬性進行操作的時候：
包括：offsettop、offsetleft、 offsetwidth、offsetheight、scrolltop、scrollleft、scrollwidth、scrollheight、clienttop、clientleft、clientwidth、clientheight、getcomputedstyle() (currentstyle in ie)。
瀏覽器不會馬上操作它們，而是會先快取在佇列中，有一定時間順序去執行這些操作，但是在這過程中我們需要去獲取在該佇列中的屬性時，瀏覽器為取得正確的值就會觸發重排。這樣就使得瀏覽器的優化失效了。
所以，在多次使用這些值時應進行快取。
回流與重繪
首先是html渲染過程 解析html並構建dom樹和cssom樹，瀏覽器對html標記轉換成文件物件模型，css標記則轉換成css物件模型 cssom dom 樹包含了所有的 html 標籤，包括不展示的 head 節點和 display none 的節點，而 cssom 樹則會去掉瀏覽器不能識別的...
重繪與回流
很多面試都會問到的問題，那麼說起這兩個概念，首先先了解一下，瀏覽器對乙個頁面對渲染過程。1.使用者輸入url位址，瀏覽器根據網域名稱查詢ip位址 2.瀏覽器向伺服器傳送http請求 3.伺服器接受請求，根據請求返回相應的html 返回給瀏覽器 4.瀏覽器接受到伺服器的相應結果，對頁面做解析渲染 1 ...
重繪與回流
dom樹結構變化 新增或者刪除可見的dom元素 元素幾何屬性發生變化 頁面渲染初始化 獲取某些屬性 瀏覽器視窗發生變化，即 resize事件發生 啟用css偽類 hover 改變元素顏色 改變元素背景色 將改變樣式的操作集合在一次完成，直接改變classname或csstext 讓要操作的元素進行離...