当我们的项目的 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 执行速度