一次完整的HTML請求[含HTML渲染過程]
阿新 • • 發佈：2022-03-02
一次完整的HTTP請求過程
域名解析 --> 發起TCP的3次握手 --> 建立TCP連線後發起http請求 --> 伺服器響應http請求，瀏覽器得到html程式碼 --> 瀏覽器解析html程式碼，並請求html程式碼中的資源（如js、css、圖片等） --> 瀏覽器對頁面進行渲染呈現給使用者
頁面解析過程
CSS不會阻塞DOM解析，但是會阻塞DOM渲染，嚴謹一點則是CSS會阻塞render tree的生成，進而會阻塞DOM的渲染JS會阻塞DOM解析CSS會阻塞JS的執行- 瀏覽器遇到
<script>標籤且沒有defer或async屬性時會觸發頁面渲染
- 獲取HTML檔案,對其進行DOM解析
- 如果遇到css檔案,怎並行下載並解析CSSOM
- 遇到js檔案,並行下載,如果css的link在js的link的上面,則會等到CSSOM解析完成後再立刻執行js,注意此時DOM的解析一直處於停止狀態,如果js的link在css的上面,則會先執行js,不用等待CSSDOM解析完成,但是js執行時DOM和CSSOM都是暫停解析的
請求html後會進行DOM構建,過程中遇到css引用會並行請求css並且進行cssom構建,當DOM和CSSOM構建完成,渲染樹會進行合併渲染,但是如果過程中出現js引用並且沒有使用async標籤,則會停止dom樹解析,先執行js