什麼是Chrome Devtools中的「解析HTML」事件時間軸

Question

我對Chrome的devtools的時間軸選項卡中的「解析HTML」事件的理解是，它們表示Chrome完成了html字符串，標記化，lexing和構建DOM從它的節點。

但是當我看看我的時間表時，我發現這似乎不是真的。

我有一個非常慢的「解析HTML」（藍色條）事件。這需要1.07秒...

這裏有詳細的針對特定事件

爲了研究這個地方的解析起源是從哪裏來的，我點擊了鏈接（ VM16602：6161） 令我驚訝的是，它並沒有指向一些HTML文件。 它指向已注入頁面上<script>標記的一些JavaScript代碼。

我會在DevTools中顯示該javascript文件的一小部分（這裏有一小部分）。

我很困惑。

1. 爲什麼一個「解析HTML」事件點到腳本 - 標記的內容是什麼？ 我期待它指向一些HTML .... 我認爲劇本有自己的「評估劇本」事件及相關的一切腳本應該是橙色的，沒有涉及到這個藍色的「解析HTML」

2. 是什麼這意味着時間軸會在一堆「Evalute腳本」事件之上顯示「解析HTML」。 這是否意味着有單獨的事件在並行運行？或者這是否意味着「解析HTML」事件只是一個「Umbrella事件」，它充當所有這些腳本事件的包裝？

進一步展望我的事件的細節卻彷彿Chrome正在呈現腳本事件作爲是ParseHTML事件的「零件」 ......

事實上確實，解析<script>塊總是會導致一個ParseHTML事件，該事件主要由腳本評估事件組成？或者我在這裏看着？

Answer 1

當你包括你的HTML內嵌JS，或者在通常的方法使用外部腳本：

<script src="foo.js"></script> 

這是一個阻止呈現的操作。瀏覽器必須執行此腳本才能繼續解析HTML。這就是爲什麼你會在Parse HTML事件中看到JS執行。 Parse HTML事件觸發了JS執行（因爲該腳本包含在HTML中），並且Parse HTML事件尚未完成，直到執行了所有這些腳本以及標記，lexing等。

使用async推遲腳本，以便它們不會阻塞頁面加載速度：

<script src="foo.js" async></script> 

或者重構直列注入腳本，這樣他們只火load，還是後來的一些事件。

請參閱Adding Interactivity With JS來自「關鍵呈現路徑」文檔以瞭解關於優化頁面加載的更多信息。