1.
了解哪些脚本影响最大并导致最严重的性能瓶颈是修复这些问题的第一步。以下工具可以帮助您快速识别并可视化 CPU 密集型脚本。
Lighthouse 脚本分解
在解决由脚本引起的性能问题时（您会在高 TBT 和 LCP 值中看到这种情况），我通常从“减少 JavaScript 执行时间”和“减少第三方代码的影响”中标记的脚本开始，这些脚本会在顶部突出显示影响最大的脚本。
灯塔树状图
脚本的影响可以通过树状图视图清 最近的手机号码数据 晰地呈现，该视图也可从 PageSpeed Insights 访问。脚本按文件大小排序，最大的脚本占据最大的方框，但这并不一定对应于执行时间最长的脚本。
在下面的示例中，很容易看到最大的脚本是实时聊天、Wistia 视频嵌入、几个 GTM 脚本，然后是 VWO A/B 测试工具。
第三方脚本的可视化
为了更详细地可视化来自第三方域的请求（通常但不总是 JS 脚本），我经常使用此映射工具，它将请求显示为节点及其之间的连接，其中较大的节点代表较大的文件，一般来说，较大的节点和更多的节点将导致性能下降。
节点的互连还可以帮助确定从哪个源调用哪些脚本，并且颜色编码显示不同类型的请求。
下图显示了来自同一示例站点的请求，其中多个 GTM 请求（绿色）、实时聊天和 VWO（红色）、Wistia（蓝绿色）和各种 HubSpot 脚本（洋 您的高管，以更好的方式培训协调 kpi 红色）有多个更大的节点。
Chrome 的性能监视器
如果从上述工具中无法明显看出哪些脚本导致了最大的性能瓶颈，那么使用 Chrome 的性能监视器进行更深入的了解可以提供更多有用的见解，例如：
- 哪些脚本在第一次和最大的绘制（如下所示的 FCP 和 LCP）之前执行；尽可能减少在 FCP 和 LCP 之前执行的 JS 非常重要
- 哪些脚本（以黄色突出显示）执行时间最长
- 什么是“长”任务（用红色对角线表示），即耗时超过 50 毫秒的任务将阻塞主线程并添加到 TBT
- 哪些函数构成了长任务，可以在 布韦岛商业指南 每个顶级 JS 任务下面深入研究