html --> dom --> style rule --> rendering tree --> layout --> paint ;瀏覽器會將html解析成乙個 dom 樹，dom樹的構建過程是乙個深度遍歷過程：當前節點的所有子節點都構建好後才會去構建當前節點的下乙個兄弟節點。
將css解析成 css 規則樹（style rule） 。
根據dom樹和css規則樹來構造 rendering tree（渲染樹）。注意：rendering tree並不等同於dom樹，因為一些像header 或 display:none 的東西就沒必要放在渲染樹中了。
有了render tree，瀏覽器已經能知道網頁中有哪些節點、各個節點的css定義以及他們的從屬關係。下一步操作稱之為
layout（布局），就是計算出每個節點在螢幕中的座標。
再下一步就是 繪製，即遍歷render樹，並使用ui後端層繪製每個節點。
回流 (reflow)：當我們對dom的修改引發了dom幾何尺寸的變化（比如修改元素的寬、高或隱藏元素等）時，瀏覽器需要重新計算元素的幾何屬性（其他元素的幾何屬性和位置也會因此受到影響），然後再將計算的結果繪製出來。這個過程就是 回流（也叫 重排 ）。重繪 (repaint)：當我們對dom的修改導致了樣式的變化、卻並未影響其幾何屬性（比如修改了顏色或背景色）時，瀏覽器不需重新計算元素的幾何屬性、直接為該元素繪製新的樣式（跳過了上圖所示的回流環節）。這個過程叫做 重繪。
回流必將引起重繪，而重繪不一定會引起回流。
對 dom 的修改引發了 dom 幾何尺寸的變化（比如修改元素的寬、高或隱藏元素等）時 :新增或刪除可見的元素；
元素位置改變；
元素尺寸改變：邊距，填充，邊框，寬度和高度；
頁面渲染初始化；
瀏覽器視窗尺寸改變：resize事件發生時。
因為回流造成的開銷較大，所以如果每句js操作都去回流重繪的話，瀏覽器可能會受不了，所以瀏覽器會優化這些操作。瀏覽器會維護乙個佇列，把所有會引起回流重繪的操作放入這個佇列，等佇列中的操作到了一定數量或到了一定的時間間隔，瀏覽器就會清空佇列，進行乙個批處理。這樣，就會讓多次的回流重繪變成一次回流重繪。(合併多次dom和樣式的修改)，減少對一些style資訊的請求，盡量利用好瀏覽器的優化策略。
1). 將多次改變樣式屬性的操作合併成一次操作。
2). 將多次需要重排的元素的position屬性設為absolute或fixed，這樣設定會導致元素脫離文件流，它的變化不會影響到其它元素。例如有動畫效果的元素最好設定為絕對定位。
效能優化 頁面渲染 重繪 回流
參考 高效能web開發 深入理解頁面呈現 重繪 回流 因為一些原因要重新構建渲染數的時候，就叫做回流,第一次構建的時候也叫做回流。引起回流的操作 回流一定會導致重繪 影響元素幾何屬性發生變化 重繪 瀏覽器會使渲染樹中受到影響的部分失效，並重新構造這部分渲染樹，完成回流後，瀏覽器會重新繪製受影響的部分...
頁面回流和重繪的優化
在頁面中 js的執行和css的執行其實是兩條執行緒 我們只知道 最終的rendertree是由 domtree cssomtree js 的作用下 來生成的 但是js 的執行最終要依賴 domtree cssomtree的生成結果，這樣就導致了 css的執行 阻塞了js的執行，因此，我們把css 的...
頁面重繪 repaint 和回流 reflow
前言 頁面顯示到瀏覽器上的過程 1.1 生成乙個dom樹。瀏覽器將獲取到的html 解析成1個dom樹，包含了所有標籤，包括display none和動態新增的節點。1.2 生成樣式結構體。瀏覽器將所有樣式解析成樣式結構體，解析過程中會去掉瀏覽器不能識別的。2 dom樹和樣式結構體結合生成rende...