如何在Chrome性能分析/性能标签中阅读评估脚本计时

Question

有人告诉我我的脚本阻止了客户站点上的主线程。

它被标记为<script async...>，因此它不应该是一个网络块。

尽管运行了谷歌浏览器的解释程序，但我还是运行了Chrome分析器，但我并不确定我在看什么。

这是相关脚本的屏幕截图：

我不知道整个蓝色块的哪一部分是“线程阻塞部分”

以下是关联的Bottom-Up表：

从第一个图像开始，“细线”的范围从大约500ms到大约900ms，这大约是400ms的时间，但是在“自下而上”表中，它说“评估脚本”的总时间为184.5ms。 / p>

所以我可以假设脚本的“阻塞”时间应该取自自下而上表，即为184.5ms？

Answer 1

1. 在第一个屏幕截图中，我们正在查看网络部分。您可以了解如何理解here。
   简而言之：

   • 左行是事件Connection Start之前的所有事件。换句话说，这是Request Sent之前的所有内容。
   • 条形图的浅色部分是Request Sent和Waiting (TTFB)。
   • 条形图的黑暗部分是Content Download。
   • 正确的方法实际上是等待主线程花费的时间

   所以这与执行时间无关。

2. 我本人还不完全了解“网络”部分的“ Bottom-Up”标签的含义……Maybe它甚至没有与网络请求的直接连接：

   Bottom-Up标签仅显示在录制的所选部分期间的活动

   在期间不一定是由引起的。

3. 但是无论如何，它可能都不是您想要的。看看 Main 部分，在网络请求结束之后，当等待主线程结束并且它是免费的并且可以执行您要执行的脚本之后可能会看到一个长条-这是您的脚本阻塞主线程的时间。
   例如看屏幕截图

   • 首先加载lux.js（在这种情况下是从缓存中加载的。）
   • 然后它等待主线程（从3117ms到3128ms）。
   • 然后一个Task开始（它被选中并用小箭头指向，大箭头指向lux.js确实开始执行的事实）
   • 有些时间花在Compile Script
   上
   • 只有这样，您才能看到脚本执行的火焰图（红色圆圈）

   您可以在同一页面here

上了解更多相关信息

---

有关here和后续文章的内容，还可以找到有关优化性能监视器使用情况的一些其他信息和见解。