Lighthouse审核:脚本评估与脚本解析

时间:2019-11-15 18:23:35

标签: javascript html performance google-chrome-devtools lighthouse

在chrome开发人员工具中进行灯塔审核时,我收到了以下有关javascript执行的报告。我发现与 Script Parse 相比,main.js在脚本评估 (455毫秒)中花费了很多时间。 (5毫秒)。但是我不知道这是什么时间 Script Evaluation ?是下载脚本花费的时间吗?我该如何减少呢?

Script Evaluation vs Script Parse

1 个答案:

答案 0 :(得分:3)

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

  • 网络费用
  • 解析和编译成本:JavaScript在主线程上被解析和编译。当主线程繁忙时,页面无法响应用户输入。

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

  • 内存成本

我相信Lighthouse术语中的评估时间是解析脚本以将整个文件加载到内存中之后的时间。换句话说,您必须检查沉重的文件并尝试优化文件本身中的代码。这是我通过研究要检查的相同问题中学到的一些事实:

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

解决方案可能是将文件拆分为两个文件,一个是关键文件,应首先加载该文件,而另一个则可以推迟以优化性能。