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

Question

在 chrome 开发人员工具中运行灯塔审计时，我收到了以下关于 javascript 执行的报告。我发现与Script Parse (5 ms)相比， main.js 在Script Evaluation (455 ms)中花费了很多时间。但我无法弄清楚这个脚本评估时间是多少？是下载脚本所花费的时间吗？我怎样才能减少它？

Answer 1

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

• 网络成本

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

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

• 内存成本

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

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

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