JavaScript 脚本优化的 10 个技巧

现在 WEB 应用包括网站，几乎都离不开 JavaScript ，可以大胆的说没有不使用 JavaScript 的 WEB 应用 。在本文中，将总结一些 JavaScript 在 WEB 渲染速度和性能方面优化技巧。

1. 将 JavaScript 提取到单独的文件中

将脚本提取为独立的.js 文件有很多优点，其中可以明显减小 HTML 代码的大小。

2. 异步

async 属性告诉浏览器该脚本不会影响 DOM 或 CSSOM，并且只能在整个页面加载和呈现后进行处理。async 属性仅适用于放置在单独文件中的脚本。

3. 阻塞 JavaScript

阻塞 JavaScript 是一个必须在构建 CSSOM 树之前执行的脚本，JS 脚本会阻止渲染，无论是作为带有 src 属性的标记还是作为内联脚本。

4. defer

defer 属性的工作方式与在正文结束标记之前添加的锁定脚本完全一样。它有效是因为即使带有 src 属性的 <script> 标记附加到页眉，它也会被添加到页脚。defer 属性可能会导致脚本放置在更高的位置，例如，在 body 标签中，这可能会停止工作，具体取决于添加了 defer 的脚本。

5. 压缩 JavaScript 脚本

通过删除多余的字符，例如空格、制表符、换行符甚至整个注释块，可以最小化任何文本资源。与 HTML 或 CSS 代码相比，JavaScript 代码可以被最小化。由于许多语法缩短技术，我们在这方面有更多的可能性。函数和变量的名称可以转换为单字母等价物，这不会改变编程功能的含义。阅读有关最小化文本资源和自动化此过程的技术的更多信息。

6. 浏览器缓存（Cache-Control、Expires、E-Tag）

下载后，包含 JavaScript 代码的 .js 文件可以保存在浏览器的缓存中：通常是在本地磁盘上。下一次子页面访问此文件时，它将不必再次下载并执行昂贵的 HTTP 和下载请求。

服务器可能会发送一个 Cache-Control 或 Expires 标头，它告诉浏览器复制文件并在指定的时间段内使用未更改的版本。

7. 压缩

JavaScript 文件是文本，众所周知，文本可以使用标准数据压缩算法进行压缩，在服务器端使用 Brotli、GZP 或 deflate 等模块执行的压缩对用户是不可见的，并可以节省高达 80% 的流量。Google 开发的 Brotli 模块或传统的 deflate 或 GZIP 模块应默认安装并启用在任何提供 JavaScript 文件和其他文本资源（CSS、XML）的服务器上。

8. 删除未使用的 JavaScript 代码

有时会在没有任何功能的页面上附加 JavaScript 脚本，这些可以是已在另一个子页面上使用的库或已在后续更新中撤回的功能。

9. 对外部服务的请求缓存

如果重复引用它并且知道它不会经常更改，可以将 JSON 或 XML 文件的内容存储在一个临时变量中。

10. 节流

在对延迟加载机制进行编程时可以使用节流技术，包括减少触发触发器的强度，使用带有条件语句和 setTimeout 的简单构造，可以使事件侦听器忽略某些事件，并且该功能仍然有效。

总结

在 JavaScript 方面利用页面优化是值得的，因为以不同方式实现的相同功能可能会显着减慢页面速度或对其加载时间没有影响。