頁面重繪(repaint)和迴流(reflow)

本文轉載於:猿2048網站頁面重繪(repaint)和迴流(reflow)

前言

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

1.一、生成一個DOM樹。

瀏覽器將獲取到的HTML代碼解析成1個DOM樹，包含了全部標籤，包括display:none和動態添加的節點。

1.二、生成樣式結構體。

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

二、DOM樹和樣式結構體結合生成render樹。

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

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

重繪(repaint)和迴流(reflow)

迴流：當render tree中的一部分(或所有)由於元素的尺寸，佈局，隱藏等改變而須要從新構建，就是迴流。迴流後會進行重繪。

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

PS：這樣重繪的代價會比迴流小。

何時出現迴流？

一、頁面渲染初始化

二、添加、刪除可見的DOM元素

三、元素尺寸、位置變化

四、窗口resize

瀏覽器對迴流、重繪優化

瀏覽器都會優化重繪和迴流的操做。瀏覽器會把全部會引發迴流、重繪的操做放入1個隊列中，等隊列中的操做到了必定的數量或者到了必定的時間間隔，瀏覽器就會flush隊列，進行一個批處理。這樣就會讓屢次的迴流、重繪變成一次迴流重繪。

另外，當咱們取一些屬性值時，相似offsetWidth、clientWidth、width等，會致使瀏覽器提早flush隊列，只爲了取到正確的值，即使是隊列裏的操做不影響所取的值。

減小回流、重繪

一、修改樣式和添加DOM元素時，批量處理。

二、取offsetWidth等屬性值，緩存到變量，少去取值。

三、將元素脫離文檔流。

PS：第3點我並未查找到相關證據，持保留態度。

總結

如今寫前端代碼的，大多很爲所欲爲，還通常都不出問題，由於一旦糟糕到程序異常，一般也就醒悟了。