在討論頁面重繪、回流（重排）之前。需要對頁面的呈現流程有些了解，頁面是怎麼把html結合css等顯示到瀏覽器上的，
下面的流程圖顯示了瀏覽器對頁面的呈現的處理流程。可能不同的瀏覽器略微會有些不同。但基本上都是類似的。
瀏覽器的渲染過程：
1、首先獲取html，然後構建dom樹 ，dom樹里包含了所有html標籤，包括display:none隱藏，還有用js動態新增的元素等。
2、瀏覽器把所有樣式(使用者定義的css和使用者**)解析成樣式結構體，在解析的過程中會去掉瀏覽器不能識別的樣式，比如ie會去掉-moz開頭的樣式，而ff會去掉_開頭的樣式。
3、dom tree 和樣式結構體組合後構建render tree, render tree類似於dom tree，但區別很大，
render tree不包含隱藏的節點 (比如display:none的節點，還有head節點)，因為這些節點不會用於呈現。
4、一旦render tree構建完畢後，瀏覽器就可以根據render tree來繪製頁面了。
回流與重繪 （回流必將引起重繪，而重繪不一定會引起回流）
1. 當render tree中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建。這就稱為回流(reflow)。
每個頁面至少需要一次回流，就是在頁面第一次載入的時候。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，並重新構造這部分渲染樹，
完成回流後，瀏覽器會重新繪製受影響的部分到螢幕中，該過程成為重繪。
2. 當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如background-color。則就叫稱為重繪。
回流何時發生：
當頁面布局和幾何屬性改變時就需要回流。下述情況會發生瀏覽器回流：
1、新增或者刪除可見的dom元素；
2、元素位置改變；
3、元素尺寸改變——邊距、填充、邊框、寬度和高度
4、內容改變——比如文字改變或者大小改變而引起的計算值寬度和高度改變；
5、頁面渲染初始化；
6、瀏覽器視窗尺寸改變——resize事件發生時；
如何減少回流、重繪
減少回流、重繪其實就是需要減少對render tree的操作（合併多次多dom和樣式的修改），並減少對一些style資訊的請求，盡量利用好瀏覽器的優化策略。具體方法有：
1. 直接改變classname，如果動態改變樣式，則使用csstext（考慮沒有優化的瀏覽器）
2. 讓要操作的元素進行」離線處理」，處理完後一起更新
a) 使用documentfragment進行快取操作,引發一次回流和重繪；
b) 使用display:none技術，只引發兩次回流和重繪；
c) 使用clonenode(true or false) 和 replacechild 技術，引發一次回流和重繪；
3.不要經常訪問會引起瀏覽器flush佇列的屬性，如果你確實要訪問，利用快取
4. 讓元素脫離動畫流，減少回流的render tree的規模
在討論頁面重繪、回流（重排）之前。需要對頁面的呈現流程有些了解，頁面是怎麼把html結合css等顯示到瀏覽器上的，
下面的流程圖顯示了瀏覽器對頁面的呈現的處理流程。可能不同的瀏覽器略微會有些不同。但基本上都是類似的。
瀏覽器的渲染過程：
1、首先獲取html，然後構建dom樹 ，dom樹里包含了所有html標籤，包括display:none隱藏，還有用js動態新增的元素等。
2、瀏覽器把所有樣式(使用者定義的css和使用者**)解析成樣式結構體，在解析的過程中會去掉瀏覽器不能識別的樣式，比如ie會去掉-moz開頭的樣式，而ff會去掉_開頭的樣式。
3、dom tree 和樣式結構體組合後構建render tree, render tree類似於dom tree，但區別很大，
render tree不包含隱藏的節點 (比如display:none的節點，還有head節點)，因為這些節點不會用於呈現。
4、一旦render tree構建完畢後，瀏覽器就可以根據render tree來繪製頁面了。
回流與重繪 （回流必將引起重繪，而重繪不一定會引起回流）
1. 當render tree中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建。這就稱為回流(reflow)。
每個頁面至少需要一次回流，就是在頁面第一次載入的時候。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，並重新構造這部分渲染樹，
完成回流後，瀏覽器會重新繪製受影響的部分到螢幕中，該過程成為重繪。
2. 當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如background-color。則就叫稱為重繪。
回流何時發生：
當頁面布局和幾何屬性改變時就需要回流。下述情況會發生瀏覽器回流：
1、新增或者刪除可見的dom元素；
2、元素位置改變；
3、元素尺寸改變——邊距、填充、邊框、寬度和高度
4、內容改變——比如文字改變或者大小改變而引起的計算值寬度和高度改變；
5、頁面渲染初始化；
6、瀏覽器視窗尺寸改變——resize事件發生時；
如何減少回流、重繪
減少回流、重繪其實就是需要減少對render tree的操作（合併多次多dom和樣式的修改），並減少對一些style資訊的請求，盡量利用好瀏覽器的優化策略。具體方法有：
1. 直接改變classname，如果動態改變樣式，則使用csstext（考慮沒有優化的瀏覽器）
2. 讓要操作的元素進行」離線處理」，處理完後一起更新
a) 使用documentfragment進行快取操作,引發一次回流和重繪；
b) 使用display:none技術，只引發兩次回流和重繪；
c) 使用clonenode(true or false) 和 replacechild 技術，引發一次回流和重繪；
3.不要經常訪問會引起瀏覽器flush佇列的屬性，如果你確實要訪問，利用快取
4. 讓元素脫離動畫流，減少回流的render tree的規模
重構與回流
在討論頁面重繪 回流 重排 之前。需要對頁面的呈現流程有些了解，頁面是怎麼把html結合css等顯示到瀏覽器上的，下面的流程圖顯示了瀏覽器對頁面的呈現的處理流程。可能不同的瀏覽器略微會有些不同。但基本上都是類似的。瀏覽器的渲染過程 1 首先獲取html，然後構建dom樹 dom樹里包含了所有html...
回流與優化
reflow 回流 和repaint 優化 reflow是說假如某個子元素樣式發生改變，直接影響到其父元素以及往上追溯很多的祖先元素包括它的兄弟元素。reflow是說如果改變某個元素的背景色 文字顏色 邊框顏色等不影響它周圍內部布局的屬性，將只會引起瀏覽器重繪。導致reflow發生的情況有 1.改變...
回流與重繪
首先是html渲染過程 解析html並構建dom樹和cssom樹，瀏覽器對html標記轉換成文件物件模型，css標記則轉換成css物件模型 cssom dom 樹包含了所有的 html 標籤，包括不展示的 head 節點和 display none 的節點，而 cssom 樹則會去掉瀏覽器不能識別的...