重繪和重排（回流）

html被html解析器解析成dom tree, css則被css解析器解析成cssom tree。

dom tree和cssom tree解析完成後，被附加到一起，形成渲染樹（render tree）。

節點資訊計算(重排)，這個過程被叫做layout(webkit)或者reflow(mozilla)。即根據渲染樹計算每個節點的幾何資訊生成布局。

渲染繪製(重繪)，這個過程被叫做(painting 或者 repaint)。即根據計算好的資訊繪製整個頁面。

display顯示到螢幕上

以上5步簡述瀏覽器的一次渲染過程，每一次的dom更改或者css幾何屬性更改，都會引起一次瀏覽器的重排/重繪過程，而如果是css的非幾何屬性更改，則只會引起重繪過程。所以說重排一定會引起重繪，而重繪不一定會引起重排，重繪的開銷較小，回流的代價較高。

所謂重排，實際上是根據渲染樹中每個渲染物件的資訊，計算出各自渲染物件的幾何資訊（dom物件的位置和尺寸大小），並將其安置在介面中的正確位置。

重排也叫回流，實際上，reflow的字面意思也是回流，之所以有的叫做重排，也許是因為重排更好理解，更符合中國人的思維。標準文件之所以叫做回流（reflow）,是因為瀏覽器渲染是基於「流式布局」的模型，流實際就使我們常說的文件流，當dom或者css幾何屬性發生改變的時候，文件流會受到波動聯動的去更改，流就好比一條河裡的水，回流就好比向河裡扔了一塊石頭，激起漣漪，然後引起周邊水流受到波及，所以叫做回流，這樣理解似乎更標準更規範，不過叫什麼並不重要，重要的是我們真正理解了這個過程就行。

會引起重排的操作：

常見引起重排屬性和方法：

相比重排，重繪就簡單多了，所謂重繪，就是當頁面中元素樣式的改變並不影響它在文件流中的位置時，例如更改了字型顏色,瀏覽器會將新樣式賦予給元素並重新繪製的過程稱。

常見引起瀏覽器繪製過程的屬性包含：

其實瀏覽器很聰明，不可能每次修改樣式就 reflow 或者 repaint 一次，一般來說，瀏覽器會積累一批操作，然後做一次 reflow。但是我們也應該減少重繪重排的次數。

減少dom操作

減少重排

css及優化動畫

重繪和重排（回流）

html被html解析器解析成dom tree,css則被css解析器解析成cssom tree。dom tree和cssom tree解析完成後，被附加到一起，形成渲染樹 render tree 節點資訊計算 重排 這個過程被叫做layout webkit 或者reflow mozilla 即根據...

回流（重排）和重繪

作為乙個web開發，經常會聽到這兩個詞，除了 回流一定會引起重繪，但重繪不一定會回流 之外，對這兩個概念理解的也不是很透徹。今天就整理一下吧 解析html 生成dom樹 解析css樣式表，生成cssom樹 dom樹和cssom樹合成render tree 不是完全匹配的，假如有樣式為diaplay ...

回流和重繪

在頁面載入時，瀏覽器把獲取到的html 解析成1個dom樹，dom樹里包含了所有html標籤，包括display none隱藏，還有用js動態新增的元素等。瀏覽器把所有樣式 使用者定義的css和使用者 解析成樣式結構體 dom tree 和樣式結構體組合後構建render tree 渲染樹 然後根據...