Chrome Devtoolsタイムラインの「Parse HTML」イベントとは

Question

Chromeのdevtoolsの「Timeline」タブの「Parse HTML」イベントの理解は、Chromeがhtmlストリング、トークン化、レキシング、DOMの作成を完了したときを示していますそれからノード。

しかし、タイムラインを見てみると、これは真実ではないようです。

「Parse HTML」（青色のバー）イベントが非常に遅いです。それは、この解析の起源はどこから来ている

を調査するために、特定のイベントのために1.07秒...ここ

です詳細をとり、私は（リンクをクリックしましたVM16602：6161） そして私の驚いたことに、それはいくつかのHTMLファイルを指していません。 ページ上の<script>タグに注入されたJavaScriptコードを指しています。

DevToolsに表示されているように、ここにそのjavascriptファイルの一部（小さな部分）を表示します。

私は混乱しています。

1. なぜスクリプト - タグの内容に「パースHTML」イベントポイントしていますか？私はいくつかのHTMLを指すようにそれを期待していた .... 私は思ったスクリプトは、彼らが自身のイベント「スクリプトを評価」し、関連するすべてのスクリプトがオレンジ色であるべきではなく、何この青い「パースHTML」

2. に関連していましたタイムラインが「Evalute script」イベントの上に「Parse HTML」と表示されていることを意味します。 これは、パラレルで実行されている別々のイベントがあることを意味しますか？あるいは、 "Parse HTML"イベントは、これらすべてのスクリプトイベントのラッパーとして機能する単なる "アンブレライベント"であることを意味しますか？クロムParseHTMLイベントの「部」であるとして、スクリプトイベントを提示しているかのようにそれはそう私のイベントの詳細にさらに探し

...実際には

ん<script>ブロックを解析すると、主にスクリプト評価イベントで構成されるParseHTMLイベントが発生しますか？それとも、私はここを見ているのですか？あなたがHTMLにインラインJSが含ま

Answer 1

、または通常の方法で外部スクリプトを使用します。これは、レンダリング・ブロック操作である

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

。ブラウザは、HTMLの解析を続行する前に、このスクリプトを完了して実行する必要があります。そのため、Parse HTMLイベント内でJSの実行が表示されます。 Parse HTMLイベントがJS実行をトリガーし（スクリプトがHTMLに含まれていたため）、Parse HTMLイベントは、実行されたすべてのスクリプト、トークン化、レキシングなどが完了するまで完了しませんでした。インライン注入されたスクリプトを

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

それともリファクタリング彼らだけload火災、またはその後のあるイベントとなるよう：彼らは、ページの読み込みをブロックしないように

使用asyncは、スクリプトを延期します。

ページの負荷を最適化する方法の詳細については、クリティカルレンダリングパスのドキュメントのAdding Interactivity With JSを参照してください。