節選自(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屬性。
瀏覽器渲染機制
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規範的，乙個主要的用途...
瀏覽器的渲染機制
google web fundamentals 是乙個非常優秀的文件，裡面講到了跟web 瀏覽器 前端的方方面面。我總結一下其中的 ilya grigorik 寫的 critical rendering path 瀏覽器渲染機制部分的內容如下 1 dom document object model，...