HTML渲染過程的特點

小編給大家分享一下HTML渲染過程的特點，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

HTML渲染過程的一些特點

順序執(zhí)行，并發(fā)加載

通過詞法分析，通過HTML生成Token對象（當前節(jié)點的所有子節(jié)點生成后，才會通過next token獲取到當前節(jié)點的兄弟節(jié)點），最終生成Dom Tree瀏覽器中可以支持并發(fā)請求，不同瀏覽器所支持的并發(fā)數(shù)量不同（以域名劃分），以Chrome為例，并發(fā)上限為6個。
優(yōu)化點： 把CDN資源分布在多個域名下

是否阻塞

CSS：
   CSS放在head中會阻塞頁面的渲染（也就是說頁面的渲染會等到css加載完成）
   CSS阻塞JS的執(zhí)行 （因為GUI線程和JS線程是互斥的，因為有可能JS會操作CSS）
   CSS不阻塞外部腳本的加載（不阻塞JS的加載，但阻塞JS的執(zhí)行，因為瀏覽器都會有預先掃描器）JS:
   直接引入的JS會阻塞頁面的渲染（GUI線程和JS線程互斥）
   JS不阻塞資源的加載(這有賴于chrome的預加載機制)
   JS順序執(zhí)行，阻塞后續(xù)JS邏輯的執(zhí)行

依賴關(guān)系

頁面渲染依賴于CSS的加載
（那既然頁面是在等待Dom Tree 和 Css Tree生成后再去渲染，那為何需要把CSS放到Head中）
(因為CSS中有可能是異步加載的，所以為了保證依賴關(guān)系，需要把CSS放到head中)
JS的執(zhí)行順序的依賴關(guān)系
JS邏輯對于DOM節(jié)點的依賴關(guān)系

引入方式

CSS引入link @importJS引入
直接引入
defer （不阻塞頁面渲染，順序執(zhí)行）
async （不阻塞頁面渲染，不保證順序執(zhí)行）
異步動態(tài)引入JS

藍色線代表網(wǎng)絡讀取，紅色線代表執(zhí)行時間，這倆都是針對腳本的；綠色線代表 HTML 解析。

加載和執(zhí)行的一些優(yōu)化點

• CSS樣式表置頂 （阻塞頁面渲染）

• 用link代替@import （1，@import是CSS層面的，不會觸發(fā)瀏覽器并發(fā)機制；2，在CSS加載完成后進行的引入。 但現(xiàn)代瀏覽器中@import和link在表現(xiàn)上已經(jīng)沒有上述區(qū)別了。 ）

• js腳本置底（因為瀏覽器有并發(fā)限制，所以把js放到下邊，減少占用的并發(fā)數(shù)，使得頁面能夠更快的渲染出來）

• 合理使用js的異步加載能力

瀏覽器的渲染機制

以上是“HTML渲染過程的特點”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！