在討論頁面重繪、回流之前。需要對頁面的呈現(xiàn)流程有些了解，頁面是怎么把html結(jié)合css等顯示到瀏覽器上的，下面的流程圖顯示了瀏覽器對頁面的呈現(xiàn)的處理流程。可能不同的瀏覽器略微會有些不同。但基本上都是類似的。

1.? 瀏覽器把獲取到的HTML代碼解析成1個DOM樹，HTML中的每個tag都是DOM樹中的1個節(jié)點，根節(jié)點就是我們常用的document對象。DOM樹里包含了所有HTML標簽，包括display:none隱藏，還有用JS動態(tài)添加的元素等。

2. 瀏覽器把所有樣式(用戶定義的CSS和用戶代理)解析成樣式結(jié)構(gòu)體，在解析的過程中會去掉瀏覽器不能識別的樣式，比如IE會去掉-moz開頭的樣式，而FF會去掉_開頭的樣式。

3、DOM Tree 和樣式結(jié)構(gòu)體組合后構(gòu)建render tree, render tree類似于DOM tree，但區(qū)別很大，render tree能識別樣式，render tree中每個NODE都有自己的style，而且render tree不包含隱藏的節(jié)點?(比如display:none的節(jié)點，還有head節(jié)點)，因為這些節(jié)點不會用于呈現(xiàn)，而且不會影響呈現(xiàn)的，所以就不會包含到 render tree中。注意 visibility:hidden隱藏的元素還是會包含到 render tree中的，因為visibility:hidden 會影響布局(layout)，會占有空間。根據(jù)CSS2的標準，render tree中的每個節(jié)點都稱為Box (Box dimensions)，理解頁面元素為一個具有填充、邊距、邊框和位置的盒子。

4. 一旦render tree構(gòu)建完畢后，瀏覽器就可以根據(jù)render tree來繪制頁面了。

回流與重繪

1. 當render tree中的一部分(或全部)因為元素的規(guī)模尺寸，布局，隱藏等改變而需要重新構(gòu)建。這就稱為回流(reflow)。每個頁面至少需要一次回流，就是在頁面第一次加載的時候。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，并重新構(gòu)造這部分渲染樹，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中，該過程成為重繪。

2. 當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如background-color。則就叫稱為重繪。

注意：回流必將引起重繪，而重繪不一定會引起回流。

回流何時發(fā)生：

當頁面布局和幾何屬性改變時就需要回流。下述情況會發(fā)生瀏覽器回流：

1、添加或者刪除可見的DOM元素；

2、元素位置改變；

3、元素尺寸改變——邊距、填充、邊框、寬度和高度

4、內(nèi)容改變——比如文本改變或者圖片大小改變而引起的計算值寬度和高度改變；

5、頁面渲染初始化；

6、瀏覽器窗口尺寸改變——resize事件發(fā)生時；