不同的瀏覽器對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的規模；