(1) dom：document object model，瀏覽器將html解析成樹形的資料結構，簡稱dom。
(2) cssom：css object model，瀏覽器將css**解析成樹形的資料結構。
(3) dom 和 cssom 都是以bytes → characters → tokens → nodes → object model. 這樣的方式生成最終的資料。如下圖所示：
(4) render tree：dom 和 cssom 合併後生成 render tree，如下圖：
render tree 和 dom 一樣，以多叉樹的形式儲存了每個節點的css屬性、節點本身屬性、以及節點的孩子節點。
注意：display:none 的節點不會被加入render tree，而visibility: hidden 則會，所以，如果某個節點最開始是不顯示的，設為display:none是更優的。
(1) create/update dom and request css/image/js：瀏覽器請求到html**後，在生成dom的最開始階段（應該是 bytes → characters 後），並行發起css、、js的請求，無論他們是否在head裡。
(4) layout：有了render tree，瀏覽器已經能知道網頁中有哪些節點、各個節點的css定義以及他們的從屬關係。下一步操作稱之為layout，顧名思義就是計算出每個節點在螢幕中的位置。
(5) painting：layout後，瀏覽器已經知道了哪些節點要顯示（which nodes are visible）、每個節點的css屬性是什麼（their computed styles）、每個節點在螢幕中的位置是**（geometry）。就進入了最後一步：painting，按照算出來的規則，通過顯示卡，把內容畫到螢幕上。
以上五個步驟前3個步驟之所有使用 「create/update」 是因為dom、cssom、render tree都可能在第一次painting後又被更新多次，比如js修改了dom或者css屬性。
webview載入時有5個事件。觸發順序為loading、titleupdate、rendering、rendered、loaded。
webview開始載入頁面時觸發loading，
載入過程中如果節點已經解析並賦予新值，觸發titleupdate，
頁面開始渲染，觸發rendering，
頁面渲染完畢，觸發rendered，
頁面載入完畢觸發loaded。
瀏覽器渲染機制
google web fundamentals 是乙個非常優秀的文件，裡面講到了跟web 瀏覽器 前端的方方面面。我總結一下其中的 ilya grigorik 寫的 critical rendering path 瀏覽器渲染機制部分的內容如下 1 dom document object model，...
瀏覽器渲染機制
1.什麼是doctype及其作用 dtd document type definition，文件型別定義 是一系列的語法規則，用來定義xml或 x html的檔案型別。瀏覽器會使用它來判斷文件型別，決定使用何種協議來解析及切換瀏覽器模式 doctype是用來宣告文件型別和dtd規範的，乙個主要的用途...
瀏覽器的渲染機制
節選自 1 dom document object model，瀏覽器將html解析成樹形的資料結構，簡稱dom。2 cssom css object model，瀏覽器將css 解析成樹形的資料結構。3 dom 和 cssom 都是以bytes characters tokens nodes ob...