Lighthouse 审计：脚本评估与脚本解析

Question

运行 在 chrome 开发人员工具中进行灯塔审计时，我收到了以下 javascript 执行报告。我发现与 [=15= 相比，main.js 在 脚本评估 （455 毫秒） 中花费了大量时间]脚本解析 （5 毫秒）。但我无法弄清楚脚本评估 时间是多少？下载脚本需要时间吗？我怎样才能减少它？

Answer 1

根据以下 Lighthouse 参考资料https://web.dev/bootup-time/，执行任何 JS 文件有四个主要成本：

• 网络费用

• 解析和编译成本：JavaScript 在主线程上进行解析和编译。当主线程繁忙时，页面无法响应用户输入。

• 执行成本：JavaScript也在主线程上执行。如果您的网页 运行 是 在真正需要之前编写大量代码，这也会延迟您的时间 交互性，这是与用户如何使用相关的关键指标之一 感知您的页面速度。

• 内存开销

我相信 Lighthouse 术语中的评估时间是解析脚本后将整个文件加载到内存中的时间。换句话说，您必须检查繁重的文件并尝试优化文件本身的代码。以下是我在研究您正在检查的同一问题时了解到的一些事实：

• 脚本评估是解析脚本和执行脚本之间的阶段，主要是将代码加载到内存中。
• 未使用的代码会对解析时间产生负面影响，但不会影响评估和执行时间。
• 解析时间随着脚本代码的增加而增加。
• 脚本评估时间随着使用代码量的增加而增加。
• 只有在影响 TTI 时，Lighthouse 才会将脚本标记为阻塞主线程。例如，如果 10 MB 的脚本文件作为渲染阻塞资源添加到任何页面但未被使用，Lighthouse 会将其标记为渲染阻塞资源而不是阻塞主线程问题。
• 脚本评估是 运行 页面需要多少代码的指标。

解决方案可以是将文件拆分成两个文件，一个是最开始应该加载的关键文件，另一个可以延迟加载以优化性能。