google web fundamentals 是乙個非常優秀的文件，裡面講到了跟web、瀏覽器、前端的方方面面。我總結一下其中的 ilya grigorik 寫的 critical rendering path 瀏覽器渲染機制部分的內容如下：
1、dom：document object model，瀏覽器將html解析成樹形的資料結構，簡稱dom。
2、cssom：css object model，瀏覽器將css**解析成樹形的資料結構。
3、dom 和 cssom 都是以bytes → characters → tokens → nodes → object model.這樣的方式生成最終的資料。如下圖所示：
dom樹的構建過程是乙個深度遍歷過程：當前節點的所有子節點都構建好後才會去構建當前節點的下乙個兄弟節點。
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屬性。
我扒了一段有讚pc首頁的**到本地，通過node跑起來。node作為server端，對/js/jquery.js做了延時2s返回的處理，並且把放到導航欄的下面，結果是這樣的：
從上面的timeline我們可以看出：
瀏覽器渲染機制
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...
瀏覽器的渲染機制
google web fundamentals 是乙個非常優秀的文件，裡面講到了跟web 瀏覽器 前端的方方面面。我總結一下其中的 ilya grigorik 寫的 critical rendering path 瀏覽器渲染機制部分的內容如下 1 dom document object model，...