JavaScript性能优化

优化 JavaScript 的下载

最高效、最不阻塞的JavaScript是根本不使用JavaScript。你应该尽量少使用JavaScript

并非总是需要框架：你可能熟悉使用某个 JavaScript 框架。如果你对使用该框架有经验和信心，并且喜欢它提供的所有工具，那么它可能是你构建大多数项目的首选。然而，框架会增加 JavaScript 的负担。如果你创建的是一个相对静态的体验，对 JavaScript 的要求很少，那么你可能不需要那个框架。也许你可以使用几行标准 JavaScript 来实现你需要的功能。
考虑更简单的解决方案：你可能有一个华丽、有趣的解决方案要实现，但请考虑用户是否会喜欢它。他们是否更喜欢简单的东西？
删除未使用的代码：这听起来很明显，但令人惊讶的是很多开发者忘记清除在开发过程中添加的不会被用到的功能。你需要谨慎并有意识地添加和删除代码。所有脚本都会被解析，无论它是否被使用；因此，加快下载速度的一个快速方法是摆脱任何不会被使用的功能。此外，要考虑通常只会使用框架中的一小部分功能。是否有可能创建一个仅包含你所需部分的框架的自定义构建版本？
考虑使用浏览器内置特性：也许你可以使用浏览器已经具备的特性，而不是通过 JavaScript 自己创建

处理解析和执行

通常首先解析 HTML，按照页面上出现的顺序进行解析。
遇到 CSS 时，解析 CSS 以了解需要应用于页面的样式。在此期间，开始获取链接的资源，如图像和网络字体。
遇到 JavaScript 时，浏览器解析、评估并执行它。
稍后，浏览器根据应用于每个 HTML 元素的 CSS 来确定每个元素的样式。
然后将经过样式处理的结果绘制到屏幕上。

这里关键的步骤是第 3 步。默认情况下，JavaScript 的解析和执行会阻塞渲染。这意味着浏览器在遇到 JavaScript 之后，会阻塞解析任何出现在其后的 HTML 代码，直到脚本处理完成。因此，样式和绘制也会被阻塞。因此，你不仅需要仔细考虑你要下载的内容，还要考虑代码何时以及以何种方式执行

尽早加载关键资源
推迟非关键 JavaScript 的执行
分解长任务
处理 JavaScript 动画
优化事件性能
编写更高效代码的技巧

减少 DOM 操作
批量进行 DOM 更改
简化 HTML 代码
减少循环代码的数量
将计算任务移到主线程之外