有人告诉我,我的脚本阻塞了我客户网站上的主线程。
它被标记为<script async...>不应该是网络块。
我运行了 Chrome 分析器,但我并不真正理解我在看什么,尽管在谷歌上搜索解释。
不明白整个蓝块的哪一部分是“线程阻塞部分”
从第一张图片来看,“细线”从大约 500 毫秒到大约 900 毫秒,即大约 400 毫秒的时间,但在自下而上的表格中,它显示“评估脚本”的总时间为 184.5 毫秒。
那么我可以假设脚本的“阻塞”时间应该取自自下而上的表,达到 184.5 毫秒吗?
有人告诉我,我的脚本阻塞了我客户网站上的主线程。
它被标记为<script async...>不应该是网络块。
我运行了 Chrome 分析器,但我并不真正理解我在看什么,尽管在谷歌上搜索解释。
不明白整个蓝块的哪一部分是“线程阻塞部分”
从第一张图片来看,“细线”从大约 500 毫秒到大约 900 毫秒,即大约 400 毫秒的时间,但在自下而上的表格中,它显示“评估脚本”的总时间为 184.5 毫秒。
那么我可以假设脚本的“阻塞”时间应该取自自下而上的表,达到 184.5 毫秒吗?
在第一个屏幕截图中,我们正在查看网络部分。您可以在此处阅读如何理解它。
简而言之:
- 左行是
Connection Start事件组的所有内容,包括在内。换句话说,它是之前的一切Request Sent,排他性的。- 条形图的浅色部分是
Request Sent和Waiting (TTFB)。- 酒吧的黑暗部分是
Content Download。- 右行本质上是等待主线程所花费的时间
所以这与执行时间无关。
我自己还不完全理解Bottom-Up网络部分的选项卡是什么意思......也许它甚至没有直接连接到网络请求:
该
Bottom-Up选项卡仅显示录制的选定部分期间的活动
during不一定意味着由.
但无论如何,它可能不是你要找的。看一下Main部分,在网络请求结束后,当最终等待主线程结束并且它是空闲的并且准备好执行脚本时,您可能会看到一个长条 - 那是您的脚本的时间阻塞主线程。
例如看截图
lux.js加载(在这种特殊情况下从缓存中加载)。Task的事实)lux.jsCompile Script您可以在此处的同一页面上阅读有关此内容的更多信息
还可以在此处和后续文章中找到有关优化性能监视器使用的一些额外信息和见解。