如何在 Chrome 分析/性能选项卡中阅读评估脚本时间

Question

有人告诉我，我的脚本阻塞了我客户网站上的主线程。

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

我运行了 Chrome 分析器，但我并不真正理解我在看什么，尽管在谷歌上搜索解释。

以下是相关脚本的屏幕截图：

我不明白整个蓝色块的哪个部分是“线程阻塞部分”

这是关联的Bottom-Up 表：

从第一张图片看，“细线”从大约 500 毫秒到大约 900 毫秒，也就是大约 400 毫秒的时间，但在自下而上的表格中，它显示“评估脚本”的总时间为 184.5 毫秒。

那么我可以假设脚本的“阻塞”时间应该取自自下而上的表，达到 184.5 毫秒吗？

Answer 1

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

   • 左行是直到 Connection Start 事件组的所有内容，包括在内。换句话说，就是Request Sent之前的一切，独占。
   • 条形图的浅色部分是Request Sent 和Waiting (TTFB)。
   • 栏的深色部分是Content Download。
   • 右边的行本质上是花在等待主线程上的时间

   所以这与执行时间无关。

2. 我自己还不完全理解网络部分的Bottom-Up 选项卡是什么意思...Maybe 它甚至没有直接连接到网络请求：

   Bottom-Up 选项卡仅显示在录制的选定部分

   的活动

   during 并不一定表示由引起。

3. 但无论如何，它可能不是您想要的。看看 Main 部分，就在网络请求结束之后，当最后 等待主线程结束并且它是免费的并且准备好执行你的脚本'可能会看到一个长条 - 那是您的脚本阻塞主线程的时间。
   比如看截图

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

   您可以在同一页面上阅读更多相关信息here

---

还可以在here 和后续文章中找到有关优化性能监视器使用的一些额外信息和见解。