1、瀏覽器把獲取到的html**解析成1個dom樹，html中的每個標籤都是dom樹中的1個節點，根節點就是常用的document物件。dom樹里包含了所有html標籤，包括display:none隱藏，還有用js動態新增的元素。
2、瀏覽器把所有樣式(使用者定義的css和使用者**)解析成樣式結構體，在解析的過程中會去掉瀏覽器不能識別的樣式，比如ie會去掉-moz開頭的樣式，而ff會去掉_開頭的樣式。
3、dom tree 和樣式結構體組合後構建render tree, render tree類似於dom tree，但區別很大，render tree能識別樣式，render tree中每個node都有自己的style，而且 render tree不包含隱藏的節點 (比如display:none的節點，還有head節點)，因為這些節點不會用於呈現，而且不會影響呈現的，所以就不會包含到 render tree中。
注意：visibility:hidden隱藏的元素還是會包含到 render tree中的，因為visibility:hidden 會影響布局，會占有空間。根據css2的標準，render tree中的每個節點都稱為box ，理解頁面元素為乙個具有填充、邊距、邊框和位置的盒子。
4、回流：一旦render tree構建完畢後，瀏覽器就可以根據render tree來繪製頁面了。所以當render tree中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建。這就稱為回流。
重繪：當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如background-color。則就叫稱為重繪。
注意：每個頁面至少需要一次回流，就是在頁面第一次載入的時候。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，並重新構造這部分渲染樹，完成回流後，瀏覽器會重新繪製受影響的部分到螢幕中。
產生回流的常見條件：
1.新增或者刪除可見的dom元素
2.元素位置改變
3.元素尺寸改變——邊距、填充、邊框、寬度和高度
4.內容改變——比如文字改變或者大小改變而引起的計算值寬度和高度改變
5.頁面渲染初始化
6.瀏覽器視窗尺寸改變——resize事件發生時
發生這些影響到元素位置移動的事件就會產生回流
而如果只是改變顏色，斜體，下劃線等不影響位置的操作就會產生重繪
所以對此方面有效能優化的根本就是減少頁面css的回流操作。
瀏覽器渲染頁面的過程
瀏覽器是如何渲染頁面的？首先，輸入的 在通過dns解析後得到伺服器位址。然後，瀏覽器向伺服器發起http請求，經過tcp ip三次握手確認連線後，伺服器將需要的 發回給瀏覽器。最後，瀏覽器接收到 後進行解析，經過三大步驟 dom構造 布局 繪製頁面。第一步，dom構造 瀏覽器首先將收到的html 通...
瀏覽器渲染頁面過程
今天在某論壇上看到這麼乙個問題。現在頁面有個空div，我用js向裡面插入一段html,然後獲取div的高度，發現有時候得到的div的高度不準確，請問各位有什麼方法解決一下。那麼為了更好的理解這個問題，咱們今天來聊聊瀏覽器的渲染過程 解析html 解析css 構建render tree 布局 layo...
瀏覽器渲染頁面過程
一 瀏覽器載入和渲染html的順序 二 js的載入 3 因為瀏覽器的載入是從上到下一行一行的載入的，所以如果頁面同事定義了兩個相同命名的js函式，後面的函式會覆蓋前面的函式。三 html頁面載入和解析流程 四 domcontentloaded事件 domcontentloaded事件在許多webki...