4 步缩减 Script Evaluation Time

4 步缩减脚本评估时间 (Script Evaluation Time)

https://touch.marfeel.com/resources/blog/reduce-script-evaluation-time#:~:text=Script evaluation is an indicator of how much,between parsing the script and executing the script

当你开始尝试优化你的站点运行更快一点的时候，从 Google Lighthost 测试开始可能应该是你的第一步。

总起来说，如果你希望从 Google 得到更多流量，除了遵循优化页面性能的建议之外，什么是更好的策略呢？不幸的是，它确实不是那么简单。

一旦你看到你的分数，你就不得不深入页面的细节去寻找隐藏的角度来找到问题。最常见的一个罪魁祸首，主线程的阻塞者和看不见的锚点，即 Script Evaluation。

在这里你可以看到，这个页面花费了将近 7 秒时间进行 Script Evaluation，它无疑需要被压缩掉。

这是目前花费时间最长的部分，它阻塞了主线程。对脚本的解析和求值的花费依赖于你的设备和 CPU。

检查解析的代价，这里是来自 Google developer 博客的在从低祷告的硬件上解析并求值一个 1Mb 的压缩的脚本的时间。

这显然严重影响到用户怎样才能快速开始使用该站点，所以删掉这个时间对于为用户提供快速体验至关重要。

在本文中，我们将涵盖 Script Evaluation 是什么，你如何可以压缩掉这个时间，已得到快速响应的页面和更高的 Lighthouse 分数。

什么是 Script Evaluation?

现代的浏览器使用编译器，优化和技巧来帮助你的页面执行尽可能的快速。但是这会实质上改变代码的执行。也就是说，对于你编写的简单代码来说，你编写的代码与实际执行的可能会很大不同。

伴随着下载的页面的尺寸，我们所使用的每个脚本都伴随一个相关的执行代价。Script Evaluation 是关于多少代码需要运行在页面上的指示器。实际上，脚本的评估是解析脚本步骤与执行脚本之间的一个阶段。

问题是脚本评估的时间会阻塞主线程的时间，伤害用户体验并影响到页面性能测试工具，像 Lighthouse 的分数。另外，这些脚本通常是在主线程上被解析和编译的。

如何缩减 Script Evaluation Time?

幸运的是，有多种方式来通过快速加载页面来使用 JavsScript 并不会损坏功能性。如果我们首先处理用户第一次需要的部分来加载页面，我们可以设置一个更为高效的加载顺序，特定的资源优先，删除无用代码来减少代码尺寸。

缩减 Script Evaluation time:

• 通过代码拆分来仅仅发送用户需要的代码
• 紧缩并压缩代码
• 删除无用代码
• 使用 PRPL 模式通过缓存来缩减网络流量

代码拆分

一开始的几秒钟对于用户至关重要。你需要制造良好的第一印象，考虑一下你需要如何做来制造第一印象，第一界面很少需要完全将 JavaSCript 加载到页面来提供功能。用户需要标题、图像以及菜单快速加载，让他们的第一次点击快速开始工作。

这意味着你可以拆分你的 JavaScript 块，仅仅发送初始路由需要的代码，使用模块化的脚本块，比如 webpack，当用户请求的时候，仅仅动态导入关键的代码片段。

通过仅仅提供需要解析和编译的代码，可以得到更小的脚本评估时间和更快的页面加载速度。

紧缩和压缩

页面上运行的脚本包含大量的冗余内容，空白以及其它不会增加任何功能的部分，但这些也需要被 Evaluated，紧缩可以删除这些内容。

就像压缩图片得到更小的尺寸但可以保持类似的质量，类似 Terser 这样的 JavaSCript 压缩工具将创建紧缩之后的版本。它可以为你提供更小但完全有效和工作的代码文件，这样可以缩减 Evaluation 时间。

压缩可以缩减网络传输时间。

删除无用代码

另一个方式是找到并删除任何不会使用的代码。

为了找到无用代码，你需要分析的代码包，打开 DevTools，点击 Network，选中 disable cache，并重新加载页面。

你将看到所有运行页面所使用的代码 - 以及有多少是不会被使用的。

类似 Webpack 这样的包分析器可以帮助你找到每块代码的作用。

如果你不能拆分一个库，还可能使用一个替换品来完成同样的功能，或者你的开发自己构建一个方案，这样的话，多数无用的库可以整个删除。

压缩网络

特别有效的一种方式是缩减网络时间。通过使用长时间的缓存来避免重新获取不会变化的资源。HTTP 缓存可以确保浏览器可以指出理想的时间来放置传输不变的内容。

使用这 4 种技术，你可以奇迹般的缩减你的脚本的 Evaluation 时间，放置阻塞主线程，