6

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

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

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

这是相关脚本的屏幕截图: 在此处输入图像描述

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

这是关联的Bottom-Up表: 在此处输入图像描述

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

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

4

1 回答 1

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

    • 左行是Connection Start事件组的所有内容,包括在内。换句话说,它是之前的一切Request Sent,排他性的。
    • 条形图的浅色部分是Request SentWaiting (TTFB)
    • 酒吧的黑暗部分是Content Download
    • 右行本质上是等待主线程所花费的时间

    所以这与执行时间无关。

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

    Bottom-Up选项卡仅显示录制的选定部分期间的活动

    during不一定意味着.

  3. 但无论如何,它可能不是你要找的。看一下Main部分,在网络请求结束后,当最终等待主线程结束并且它是空闲的并且准备好执行脚本时,您可能会看到一个长条 - 那是您的脚本的时间阻塞主线程。
    例如看截图在此处输入图像描述

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

    您可以在此处的同一页面上阅读有关此内容的更多信息


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

于 2020-06-17T17:57:48.233 回答