Question

我对＆＃34;解析HTML＆＃34;的理解Chrome浏览器开发工具的时间轴标签中的事件表明，当Chrome完成了html字符串，标记化，lexing和构建DOM节点时，它们就会显示出来。

但是当我看一下我的时间表时，我发现这似乎不是真的。

我有一个非常慢的＆＃34;解析HTML＆＃34; （蓝条）事件。这需要1.07秒......

以下是该特定事件的详细信息

要调查此解析的来源来自哪里，我点击了链接（VM16602：6161）令我惊讶的是，它没有指向某些HTML文件。它指向一些已注入页面上<script>标记的javascript代码。

我会在DevTools中显示该javascript文件（一小部分）。

我很困惑。

为什么＆＃34;解析 HTML ＆＃34;事件指向脚本 -tag的内容？我期待它指向一些HTML .... 我认为脚本有自己的＆＃34;评估脚本＆＃34;事件和所有与脚本相关的内容应该是橙色的，与此蓝色无关＆＃34;解析HTML＆＃34;
时间轴显示＆＃34;解析HTML＆＃34;是什么意思？在一堆＆＃34; Evalute脚本＆＃34;事件。这是否意味着在并行运行单独的事件？或者它是否意味着＆＃34;解析HTML＆＃34;活动只是一个＆＃34;伞事件＆＃34;它充当所有这些脚本事件的包装器？

进一步了解我的活动细节，似乎Chrome将Scripting事件呈现为＆＃34;部件＆＃34; 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，了解有关优化页面加载的更多信息。