1. 解析html(html parser)
2. 構建dom樹(dom tree)
3. 構建渲染樹(render tree)
4. 繪製渲染樹(painting)
通過請求得到的 html 經過解析（html parser）生成 dom tree。而在 css 解析完畢後，需要將解析的結果與 dom tree 的內容一起進行分析建立一棵 render tree，最終用來進行繪圖（painting）。
回流（reflow）
當渲染樹（render tree）中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建。這就稱為回流（reflow），也就是重新布局（relayout）。
每個頁面至少需要一次回流，就是在頁面第一次載入的時候。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，並重新構造這部分渲染樹，完成回流後，瀏覽器會重新繪製受影響的部分到螢幕中，該過程成為重繪。
重繪（repaint）
當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如 background-color 。則就叫稱為重繪。
值得注意的是，回流必將引起重繪，而重繪不一定會引起回流。
明顯，回流的代價更大，簡單而言，當操作元素會使元素修改它的大小或位置，那麼就會發生回流。
回流何時觸發：
所以對於頁面而言，我們的宗旨就是儘量減少頁面的回流重繪，簡單的乙個栗子：
//上面四句，因為涉及了 offsetheight 操作，瀏覽器強制 reflow 了兩次，而下面四句合併了 offset 操作，所以減少了一次頁面的回流。下面這種方式將會導致回流reflow兩次
var newwidth = adiv.offsetwidth + 10; //
read
adiv.style.width = newwidth + 'px'; //
write
var newheight = adiv.offsetheight + 10; //
read
adiv.style.height = newheight + 'px'; //
write
//下面這種方式更好，只會回流reflow一次
var newwidth = adiv.offsetwidth + 10; //
read
var newheight = adiv.offsetheight + 10; //
read
adiv.style.width = newwidth + 'px'; //
write
adiv.style.height = newheight + 'px'; //
write
減少回流、重繪其實就是需要減少對渲染樹的操作（合併多次多dom和樣式的修改），並減少對一些style資訊的請求，盡量利用好瀏覽器的優化策略。
瀏覽器渲染過程
瀏覽器的渲染過程 第一步 html經過html parser p s 解析為dom tree 第二步 css根據css規則經過css解析器解析為style rules cssom tree 第三步 兩棵樹經過attachment結合為 render tree 形成一棵大樹,此時它還是一棵迷茫的樹，不...
瀏覽器渲染過程
1.頁面準備 2.重定向 在header定義了重定向才會有這個過程，如果沒有就不會產生這個過程 關於重定向的分析 4.dns解析 把網域名稱解析成ip，如果直接用ip位址訪問，不會產生這個過程 5.tcp連線 6.request header 請求頭資訊 7.request body 請求體資訊，比...
瀏覽器渲染過程
這個過程可以大致分為兩個部分 網路通訊和頁面渲染。輸入url按下回車之後，瀏覽器會去瀏覽器快取中尋找該url的ip 沒有的話去系統快取中找，還是沒有的話去路由器快取中尋找 再沒有就去系統host檔案中找，還是沒有最後只能去請求dns伺服器，然後dns給乙個ip給瀏覽器 瀏覽器根據這個ip位址，向伺服...