頁面優化，談談重繪(repaint)和迴流(reflow)

1、前言

偶爾在面試過程當中遇到太重匯與迴流reflow的問題，畢竟頁面優化也是考覈一個開發者能力的關鍵之一，上篇文章聊了下documentfragment也是爲了減輕迴流問題，那麼本篇文章好好介紹下重繪和迴流。

2、重繪和迴流是什麼

怎麼去理解這兩個概念呢？從字面上理解，重繪，從新繪畫，從新上色，較難產生聯想的是迴流。

咱們都知道，一個頁面從加載到完成，首先是構建DOM樹，而後根據DOM節點的幾何屬性造成render樹(渲染樹)，當渲染樹構建完成，頁面就根據DOM樹開始佈局了，渲染樹也根據設置的樣式對應的渲染這些節點。

在這個過程當中，迴流與DOM樹，渲染樹有關，重繪與渲染樹有關，怎麼去理解呢？

好比咱們增刪DOM節點，修改一個元素的寬高，頁面佈局發生變化，DOM樹結構發生變化，那麼確定要從新構建DOM樹，而DOM樹與渲染樹是緊密相連的，DOM樹構建完，渲染樹也會隨之對頁面進行再次渲染，這個過程就叫回流。

當你給一個元素更換顏色，這樣的行爲是不會影響頁面佈局的，DOM樹不會變化，但顏色變了，渲染樹得從新渲染頁面，這就是重匯。

你應該能感受到，迴流的代價要遠大於重繪。且迴流必然會形成重繪，但重繪不必定會形成迴流。

題外話

1.因爲display爲none的元素在頁面不須要渲染，渲染樹構建不會包括這些節點；但visibility爲hidden的元素會在渲染樹中。由於display爲none會脫離文檔流，visibility爲hidden雖然看不到，但相似與透明度爲0，其實還在文檔流中，仍是有渲染的過程。

2.儘可能避免使用表格佈局，當咱們不爲表格td添加固定寬度時，一列的td的寬度會以最寬td的寬做爲渲染標準，假設前幾行td在渲染時都渲染好了，結果下面某行的一個td特別寬，table爲了統一寬，前幾行的td會迴流從新計算寬度，這是個很耗時的事情。

3、重繪和迴流有什麼區別

結合上面的解釋，引發DOM樹結構變化，頁面佈局變化的行爲叫回流，且迴流必定伴隨重繪。

只是樣式的變化，不會引發DOM樹變化，頁面佈局變化的行爲叫重繪，且重繪不必定會便隨迴流。

它們的區別就像這樣：

迴流每每伴隨着佈局的變化，代價較大

 

重繪只是樣式的變化，結構不會變化

4、怎麼減小回流

說了這麼多，咱們也知道了，迴流要從新構建DOM樹，渲染樹也得從新渲染，很麻煩，哪麼哪些行爲會引發迴流，怎麼去避免呢？

1.DOM的增刪行爲

好比你要刪除某個節點，給某個父元素增長子元素，這類操做都會引發迴流。若是要加多個子元素，最好使用documentfragment。

2.幾何屬性的變化

好比元素寬高變了，border變了，字體大小變了，這種直接會引發頁面佈局變化的操做也會引發迴流。若是你要改變多個屬性，最好將這些屬性定義在一個class中，直接修改class名，這樣只用引發一次迴流。

3.元素位置的變化

修改一個元素的左右margin，padding之類的操做，因此在作元素位移的動畫，不要更改margin之類的屬性，使用定位脫離文檔流後改變位置會更好。

4.獲取元素的偏移量屬性

例如獲取一個元素的scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之類的屬性，瀏覽器爲了保證值的正確也會迴流取得最新的值，因此若是你要屢次操做，最取完作個緩存。

5.頁面初次渲染

這樣的迴流沒法避免

6.瀏覽器窗口尺寸改變

resize事件發生也會引發迴流。

這裏就不列舉引發重繪的行爲了，記住，迴流必定伴隨着重繪，因此上面的行爲都會重繪，除此以外，例如修改背景顏色，字體顏色之類不影響佈局的行爲都只引起重繪。

若是對於documentfragment文檔片斷感興趣，能夠閱讀博主這篇文章。

頁面優化，DocumentFragment對象詳解

參考資料

迴流（reflow）與重繪（repaint）

頁面的重匯和迴流

瀏覽器的重繪(repaints)與重排(reflows)

淺談CSS重繪與迴流/重排