Lighthouse之减少javaScript执行时间简单说明

1,263 阅读2分钟

当我们的项目的 JavaScript 需要很长时间来执行时,它会以多种方式降低项目的页面性能:

1、网络成本

更多的字节等于更长的下载时间。

2、解析和编译成本

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

3、执行成本

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

4、内存成本

如果页面的 JavaScript 持有大量引用,则可能会消耗大量内存。页面在消耗大量内存时会出现卡顿或缓慢。内存泄漏会导致我们的项目页面完全冻结。

我们可以通过Lighthouse来分析JavaScript对执行时间影响最大的因素

Lighthouse 报告了执行、评估和解析页面加载的每个 JavaScript 文件所花费的时间。当 JavaScript 执行时间超过 2 秒时,Lighthouse显示警告。当执行时间超过 3.5 秒时审计失败:

1、Script parse(脚本解析时间)

浏览器读取整个文件并“理解”其中准备编译/评估部分所需的时间

2、Script evaluation time(脚本评估时间

解析脚本和将脚本加载到内存/执行脚本之间所花费的时间。这是浏览器尝试优化准备执行的代码的地方。

3、Total CPU time(总 CPU 时间)

脚本使用的总 CPU 时间(在主线程上),包括解析、评估、编译和运行任何函数。

如何加快 JavaScript 执行速度

通过实施代码拆分只发送用户需要的代码

缩小和压缩代码

删除未使用的代码

通过使用 PRPL 模式缓存代码来减少网络旅行