JavaScript性能

虽然图像和视频占了平均网站下载字节数的70% 以上，但是 JavaScript 对性能有更大的负面影响。本文将介绍由脚本引起的性能问题，并介绍为 Web 性能优化 JavaScript 的技巧和窍门。

与图像和视频类似，提高性能的最佳方法是省略实际上不必要的内容。但并非所有下载的字节都具有相同的影响。必须下载、解析和执行 JavaScript 字节。JavaScript 影响下载性能。我们将介绍一些技巧和窍门，以尽量减少对下载的影响。但是 JavaScript 也会消耗主线程、 CPU 和电池。它可以使用户界面感觉没有反应或者很糟糕。我们还将介绍处理这个问题的概念。

下载的影响

Web 应用程序包含很多 JavaScript。许多应用程序都是使用 JavaScript 框架或多个框架构建的，还有一些附加的依赖项。通常会添加第三方脚本和 API，包括 A/B 测试、跟踪像素以及地图和支持特性等特性。所有这些 JavaScript 都必须下载。最终会的。

性能优化应包括：

减少所需的 JavaScript 数量。一些需要复杂JavaScript的功能可以通过几行JavaScript来完成。需要一个用于其他功能的库可能会改善开发人员的体验，但这一切都需要JavaScript吗？有更轻的重量或自制的解决方案吗？有些功能可能不是必需的，尽管它们可能会增加一些闪光点，但就性能而言，该功能的成本值得吗？
删除未使用的代码。
将 JavaScript 拆分为较小的文件。将 JavaScript 代码拆分为关键部分和非关键部分。像webpack这样的模 module bundlers 支持代码拆分。
优化这些较小的文件。Mnification 减少了文件中的字符数，从而减少了 JavaScript 的字节数或占比。Gzipping 会进一步压缩文件，即使您不缩小，也应该使用。Brotli 类似于 Gzip，通常优于 Gzip 的压缩。