什么是Chrome Devtools时间轴中的"解析HTML"事件

Question

我对Chrome的devtools时间线选项卡中的"解析HTML"事件的理解是,它们表明chrome何时完成了html-string,令牌化,lexing以及从中构建DOM节点.

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

我有一个非常慢的"Parse HTML"(蓝条)事件.需要1.07秒......

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

为了研究这种解析的起源来自何处,我点击了链接(VM16602:6161).令我惊讶的是它没有指向某个HTML文件.它指向一些已注入<script>页面标记的javascript代码.

我将在这里显示(一小部分)该JavaScript文件,因为它出现在DevTools中.

我糊涂了.

1. 为什么"解析HTML "事件指向脚本 -tag 的内容？我期待它指向一些HTML ....我认为脚本有自己的"评估脚本"事件,所有与脚本相关的内容都应该是橙色的,与此蓝色"Parse HTML"无关

2. 时间轴在一堆"Evalute脚本"事件上方显示"Parse HTML"是什么意思.这是否意味着在并行运行单独的事件？或者它是否意味着"Parse HTML"事件只是一个"伞事件",它充当所有这些脚本事件的包装器？

进一步了解我的活动细节,似乎Chrome将Scripting事件呈现为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或稍后的事件.

请参阅关键渲染路径文档中的添加与JS的交互性,以了解有关优化页面加载的更多信息.