迴流（reflow）與重繪（repaint）

什麼是迴流（reflow），什麼是重繪（repaint），以及它們之間的區別？

瀏覽器的渲染過程

首先咱們要了解瀏覽器的渲染過程：

　　1.解析 HTML,生成 DOM 樹，解析 CSS,生成 CSSOM樹

　　2.將 DOM樹 和 CSSOM樹結合，生成渲染樹（Render Tree）

　　3.渲染樹的每一個元素包含的內容都是計算過的，它被稱之爲佈局（layout）。瀏覽器使用一種流式處理的方法，只須要一次繪製操做就能夠佈局全部的元素

　　4.將渲染樹的各個節點繪製到屏幕上，這一步被稱爲繪製（painting）

 

　　即：解析html和css構建dom樹和cssom樹   ->   構建渲染樹（render tree）  ->   佈局render樹（layout）  ->   繪製render樹（painting）

 

迴流（reflow）

　　迴流又稱重排，當瀏覽器發現佈局（layout）發生了變化，這個時候就須要倒回去從新渲染，這個過程叫 迴流（reflow）。迴流幾乎是沒法避免的，由於只要用戶進行了交互操做，就會發生頁面的一部分從新渲染。

 

重繪（repaint）

　　重繪（repaint）則是當咱們改變某個元素的背景色，文字顏色，邊框顏色等不影響它周圍或內部佈局的屬性是，屏幕的一部分要重畫，可是元素的幾何尺寸和位置沒有發生改變。

 

須要注意的是 

　　display：none 會觸發迴流（reflow），而

　　visibility：hidden 屬性表示隱藏元素，元素任然佔據着佈局空間，並無改變佈局和幾何尺寸，因此只會觸發 重繪（repaint）

 

 

什麼時候引發迴流（reflow）

現代瀏覽器會對迴流作優化，它會等到足夠數量的變化發生，再作一次批處理迴流

 

　　1.頁面的第一次渲染（初始化）

　　2.DOM樹的變化（如：增刪節點）

　　3.Render樹的變化（如：padding 改變）

　　4.瀏覽器窗口的尺寸變化 resize

　　5.fontsize的變化

　　6.獲取元素的某些屬性

　　　　瀏覽器爲了獲取正確的最新屬性值也會提早觸發迴流，這些屬性包括：

　　　　　　offsetLest、 offsetTop、 offsetWidth、 offsetHeight、 scrollTop/Left/Width/Height、

　　　　　　clientTop/Left/Width/Height、 調用了 getComputedStyle()。

 

什麼時候引發重繪（repaint）

　　背景色、顏色的改變等會引發重繪（repaint）

 

迴流和重繪的區別

　　當元素的位置或者幾何尺寸發生改變時會觸發迴流，

　　而當背景色和顏色的改變會引發重繪，

　　注意：迴流必定會發生重繪，而重繪不必定發生迴流！

　　

爲了優化性能，咱們須要減小回流、重繪的觸發次數

　　1.用 transform 作形變和位移能夠減小回流

　　2.避免組個修改節點樣式，儘可能一次性修改

　　3.能夠將須要屢次修改的 DOM 元素設置 display：none ，操做完再顯示（由於隱藏元素不在 render 樹內，所以修改隱藏元素不會觸發迴流重繪）

　　4.避免屢次讀取某些屬性

　　5.經過絕對位移將複雜的節點元素脫離文檔流，造成新的 Render Layer,下降回流成本