1.瀏覽器請求到HTML代碼后僧著，在生成DOM的最開始階段履因， 并行發(fā)起css、圖片盹愚、js的請求栅迄，無論他們是否在HEAD里。
2.CSS文件下載完成杯拐，開始構(gòu)建CSSOM霞篡。
3.所有CSS文件下載完成世蔗，CSSOM構(gòu)建結(jié)束后端逼，和 DOM 一起生成 Render Tree。
3.有了Render Tree污淋，瀏覽器已經(jīng)能知道網(wǎng)頁中有哪些節(jié)點顶滩、各個節(jié)點的CSS定義以及他們的從屬關(guān)系。下一步操作稱之為Layout寸爆，顧名思義就是計算出每個節(jié)點在屏幕中的位置礁鲁。
4.Layout后，瀏覽器已經(jīng)知道了哪些節(jié)點要顯示（which nodes are visible）赁豆、每個節(jié)點的CSS屬性是什么（their computed styles）仅醇、每個節(jié)點在屏幕中的位置是哪里（geometry）。就進(jìn)入了最后一步：Painting魔种，按照算出來的規(guī)則析二，通過顯卡，把內(nèi)容畫到屏幕上节预。
DOM：Document Object Model叶摄，瀏覽器將HTML解析成樹形的數(shù)據(jù)結(jié)構(gòu)，簡稱DOM安拟。
CSSOM：CSS Object Model蛤吓，瀏覽器將CSS代碼解析成樹形的數(shù)據(jù)結(jié)構(gòu)
Render Tree：DOM 和 CSSOM 合并后生成 Render Tree(Render Tree 和DOM一樣，以多叉樹的形式保存了每個節(jié)點的css屬性糠赦、節(jié)點本身屬性会傲、以及節(jié)點的孩子節(jié)點，display:none 的節(jié)點不會被加入 Render Tree拙泽，而 visibility: hidden 則會唆铐，所以，如果某個節(jié)點最開始是不顯示的奔滑，設(shè)為 display:none 是更優(yōu)的艾岂。)
注意：
- <script> 標(biāo)記會阻塞文檔的解析(DOM樹的構(gòu)建)直到腳本執(zhí)行完，如果腳本是外部的朋其，需等到腳本下載并執(zhí)行完成才繼續(xù)往下解析王浴。
- 外部資源是解析過程中預(yù)解析加載的(腳本阻塞了解析脆炎，其他線程會解析文檔的其余部分，找出并加載)氓辣，而不是一開始就一起請求的(實際上看起來也是并發(fā)請求的秒裕，因為請求不相互依賴)
