[TOC] ## **重繪（repaint或redraw）** > 當盒子的位置、大小以及其他屬性，例如顏色、字體大小等都確定下來之后，瀏覽器便把這些原色都按照各自的特性繪制一遍，將內容呈現在頁面上。 > **重繪**是指一個元素外觀的改變所觸發的瀏覽器行為，瀏覽器會根據元素的新屬性重新繪制，使元素呈現新的外觀。 * 觸發重繪的條件：改變元素外觀屬性。如：color，background-color等。 ## **重排（重構/回流/reflow）** > 當渲染樹中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建, 這就稱為回流(reflow)。 > 每個頁面至少需要一次回流，就是在頁面第一次加載的時候。 ### **重繪和重排的關系**： > 在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，并重新構造這部分渲染樹，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中，該過程稱為重繪。 > 重排必定會引發重繪，但重繪不一定會引發重排。 ### 觸發重排的條件：任何頁面布局和幾何屬性的改變都會觸發重排 比如： 1. 　 頁面渲染初始化；(無法避免) 2. 　　添加或刪除可見的DOM元素； 3. 　　元素位置的改變，或者使用動畫； 4. 　　元素尺寸的改變——大小，外邊距，邊框； 5. 　　瀏覽器窗口尺寸的變化（resize事件發生時）； 6. 　　填充內容的改變，比如文本的改變或圖片大小改變而引起的計算值寬度和高度的改變； 7. 　　讀取某些元素屬性：（offsetLeft/Top/Height/Width,　clientTop/Left/Width/Height,　scrollTop/Left/Width/Height,　width/height,　getComputedStyle(),　currentStyle(IE)　) ### 重繪發生的情況： > 重繪發生在元素的可見的外觀被改變，但并沒有影響到布局的時候。比如，僅修改DOM元素的字體顏色（只有Repaint，因為不需要調整布局） ### 重繪重排的代價：耗時，導致瀏覽器卡慢。