web前端中涉及的迴流和重繪詳解！

      今天我們為大家介紹一下 web前端中涉及到的迴流和重繪的概念，先來看一下官方給出的定義：

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

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

      其實簡單的說：

      迴流（reflow）就是元素的位置發生了改變（不管是新增、刪除元素，還是元素尺寸改變），會觸發迴流。比如，這裡有2個p標籤，我們想在兩個p標籤之間插入另外一個p標籤

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

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

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

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

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

希望本文的分享能幫到學習web前端的小夥伴們。