今天我們來了解一下什么是回流和重繪，先來看一下官方定義：

　　回流(reflow)：對于DOM結構中的各個元素都有自己的盒子模型,這些都需要瀏覽器根據各種樣式(瀏覽器的、開發人員定義的等)來計算并根據計算結果將元素放到它該出現的位置，這個過程稱之為reflow ;

　　重繪(repaint)：當各種盒子的位置、大小以及其他屬性,例如顏色、字體大小等都確定下來后,瀏覽器于是便把這些元素都按照各自的特性繪制了一遍,于是頁面的內容出現了，這個過程稱之為repaint。

　　其實簡單的說：

　　回流(reflow)就是元素的位置發生了改變(不管是添加、刪除元素，還是元素尺寸改變)，會觸發回流。比如，這里有2個p標簽，我們想在兩個p標簽之間插入另外一個p標簽

　　這個時候老大還是老大，插入一個新老二之后，原來的老二變成了老三，位置發生了改變會觸發回流。

　　那么重繪(repaint)簡單的說，元素位置不會發生改變，視覺效果會有所改變。

　　元素的位置沒有發生改變，只有文字顏色做了修改，這個時候就發生了重繪。知道了回流和重繪，我們在做項目的過程中，要盡量避免，這樣可以使我們寫出高性能的DOM。例如：我們在給元素添加樣式修飾時，避免一條條更改

　　可以將修飾放入一個class名中，做一次class名插入

　　還有我們要循環插入很多DOM元素時，可以使用documentFragment

　　回流和重繪這都是我們經常做的一些操作，快快動手試起來吧！更多關于前端培訓的問題，歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓服務經驗，采用全程面授高品質、高體驗培養模式，擁有國內一體化教學管理及學員服務，助力更多學員實現高薪夢想。

　　注：本文部分文字和圖片來源于網絡，如有侵權，請聯系刪除。版權歸原作者所有!