頁面重繪 repaint 和回流 reflow

前言

頁面顯示到瀏覽器上的過程：

1.1、生成乙個dom樹。

瀏覽器將獲取到的html**解析成1個dom樹，包含了所有標籤，包括display:none和動態新增的節點。

1.2、生成樣式結構體。

瀏覽器將所有樣式解析成樣式結構體，解析過程中會去掉瀏覽器不能識別的。

2、dom樹和樣式結構體結合生成render樹。

render樹類似於dom樹，render樹每個節點有自己樣式（盒子模型，margin、border、padding、content），但不包含display:none和head節點，卻包含visibility:hidden節點。

3、瀏覽器根據render樹渲染頁面。

重繪(repaint)和回流(reflow)

回流：當render tree中的一部分(或全部)因為元素的尺寸，布局，隱藏等改變而需要重新構建，就是回流。回流後會進行重繪。

重繪：當只是元素的外觀，風格變化，不影響布局的，重新渲染的過程就叫重繪。

ps：這樣重繪的代價會比回流小。

什麼時候出現回流？

1、頁面渲染初始化

2、新增、刪除可見的dom元素

3、元素尺寸、位置變化

4、視窗resize

瀏覽器對回流、重繪優化

瀏覽器都會優化重繪和回流的操作。瀏覽器會把所有會引起回流、重繪的操作放入1個佇列中，等佇列中的操作到了一定的數量或者到了一定的時間間隔，瀏覽器就會flush佇列，進行乙個批處理。這樣就會讓多次的回流、重繪變成一次回流重繪。

另外，當我們取一些屬性值時，類似offsetwidth、clientwidth、width等，會導致瀏覽器提前flush佇列，只為了取到正確的值，即便是佇列裡的操作不影響所取的值。

減少回流、重繪

1、修改樣式和新增dom元素時，批量處理。

2、取offsetwidth等屬性值，快取到變數，少去取值。

3、將元素脫離文件流。

總結

現在寫前端**的，大多很隨心所欲，還一般都不出問題，因為一旦糟糕到程式異常，通常也就醒悟了。