如何阅读 Chrome profiling/performance 选项卡中的评估脚本计时

Question

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

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

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

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

我不明白整个蓝色块的哪一部分是"thread blocking part"

这是关联的 Bottom-Up table：

从第一张图片来看，"thin line" 跨度从大约 500 毫秒到大约 900 毫秒，也就是大约 400 毫秒的时间，但是在自下而上 table 中，它表示总共 "Evaluate Script" 时间为 184.5ms.

那么我可以假设脚本的 "blocking" 时间应该从自下而上 table 获取，最终为 184.5 毫秒吗？

Answer 1

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

   • The left line is everything up to the Connection Start group of events, inclusive. In other words, it's everything before Request Sent, exclusive.
   • The light portion of the bar is Request Sent and Waiting (TTFB).
   • The dark portion of the bar is Content Download.
   • The right line is essentially time spent waiting for the main thread

   所以这与执行时间无关。

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

   The Bottom-Up tab only displays activities during the selected portion of the recording

   在期间不一定意味着由引起。

3. 但无论如何，它可能不是您要找的。看一下 Main 部分，在网络请求结束之后 waiting for the main thread is over and it's free and ready要执行脚本，您可能会看到一个长条 - 那是您的脚本阻塞主线程的时间。
   比如看截图

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

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

---

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