不同的瀏覽器對html和css在瀏覽器上呈現的處理流程可能會有略微的不同，但是基本都是類似的。

　　瀏覽器把獲取到的HTML代碼解析成一個dom樹，html中的每個tag都是dom樹種的一個節點，根節點就是我們常說的document對象。dom樹包含了所有的html標簽以及display隱藏的，以及使用js動態添加的元素等。

　　瀏覽器把所有的樣式解析成樣式結構體，在解析的過程中會去掉瀏覽器不能識別的樣式，比如兼容寫法的樣式等等； dom tree和樣式結構體組合後構建render tree，render tree類似於dom tree，但是區別很大，render tree 能識別樣式，render tree中每個node都有自己的style,而且render tree 不包含隱藏的節點，因為這些節點不會呈現，而且不影響呈現的節點的效果；一點render tree構建完畢，瀏覽器就可以根據render tree 來繪制頁面了；

回流 && 重繪

　　當render tree中的一部分或者全部，因為元素的規模尺寸、布局、隱藏等改變而需要重新構建；這就被稱為回流。每個頁面至少需要一次回流，就是在頁面第一次加載的時候；在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，並重新構建這部分渲染樹，完成回流後，瀏覽器會重新繪制受影響的部分到屏幕中，該過程成為重繪； 也就是，當render tree中的一些元素需要更新屬性，而這些屬性只是影響與元素的外觀、風格，而不影響布局的，比如background-color,則就叫做重繪。

　　回流必將引起重繪，但是重繪不一定會引起回流；

　　回流發生的條件：當頁面布局和幾何屬性改變時就需要回流，比如：1)、添加或者刪除可視的dom元素；2)、元素位置改變； 3)、元素尺寸改變,如邊距、填充、邊框、寬度和高度；4)、內容改變，比如文本改變或者圖片大小改變而引起的計算值寬度和高度改變；5)、頁面渲染初始化；6)、瀏覽器窗口尺寸改變，即resize事件發生時。

　　回流的優化，通常我們可能會考慮，讓其所有引起回流、重繪額操作放在一個隊列中，等隊列中的操作到了一定的數量或者到了一定的時間間隔，瀏覽器再進行flush這個隊列，但是有時候我們強制瀏覽器提前flush隊列，比如修改尺寸的時候，這樣隊列的優化就起不到作用了；其實，減少回流其實就是減少對render tree的操作，並減少對一些style信息的請求，具體可以從以下幾個方式進行優化：

　　　　1)、直接改變className,如果動態改變樣式，則使用cssText(沒有優化的瀏覽器可以考慮)；

　　　　2)、讓要操作的元素進行‘離線處理‘，處理完後一起更新；

　　　　　　a)、使用DocumentFragment進行緩存操作，引發一次回流和重繪；

　　　　　　b)、使用display:none技術，只引發兩次回流和重繪；

　　　　　　c)、使用cloneNode(true or false)和replaceChild技術，引發一次回流和重繪；

　　　　3)、不要經常訪問會引起瀏覽器flush隊列的屬性，如果確實要訪問，就利用緩存；

　　　　4)、讓元素脫離動畫流，減少回流的Render tree的規模；

回流和重繪