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

Question

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

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

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

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


不明白整个蓝 block 的哪一部分是“线程阻塞部分”

这是相关的Bottom-Up table :


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

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

Answer 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

所以这与执行时间无关。

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

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

期间并不一定意味着由。

但无论如何，它可能不是你要找的。看看主页 部分，就在网络请求结束后，终于等待主线程结束了，它是免费的，可以执行脚本了，你可能会看到一个长条——那是你的脚本阻塞主线程的时间。
例如看截图

第一lux.js被加载(在这种特殊情况下从缓存中加载)。

然后它等待主线程(从 3117ms 到 3128ms)。

然后是 Task开始(它被选中并用小箭头指向，大箭头指向 lux.js 确实开始执行)

一些时间花在 Compile Script 上。

只有这样你才能看到脚本执行的火焰图(红色圆圈)

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

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