10 个 JavaScript 代码优化技巧，让你的网站速度飙升

1. 减少不必要的 JavaScript 文件加载

尽量避免加载不必要的 JavaScript 文件，特别是对于页面加载速度非常关键的页面。可以使用一些工具来分析 JavaScript 文件的加载顺序和影响，并根据分析结果移除不必要的加载。

<script class="lazy" data-src="script1.js"></script>
<script class="lazy" data-src="script2.js"></script>
<script class="lazy" data-src="script3.js"></script>

2. 使用工具进行代码压缩

JavaScript 代码压缩工具可以帮助你减少代码体积，从而加快加载速度。可以使用诸如 UglifyJS 或 Terser 等工具来压缩 JavaScript 代码。

uglifyjs script.js -o script.min.js

3. 启用 JavaScript 缓存

通过启用 JavaScript 缓存，可以避免每次页面加载时都重新下载 JavaScript 文件， thereby improving load times. 可以在 标签中添加以下代码启用 JavaScript 缓存：

<script class="lazy" data-src="script.js"></script>

4. 使用异步和 defer 属性

异步属性允许 JavaScript 代码在页面加载时异步加载，而 defer 属性则允许代码在页面加载完成后再加载。这两种属性都可以帮助提升页面加载速度，但应根据具体情况合理使用。

<script class="lazy" data-src="script.js" async></script>
<script class="lazy" data-src="script.js" defer></script>

5. 优化 JavaScript 执行顺序

通过优化 JavaScript 执行顺序，可以避免阻塞页面渲染。可以使用诸如 async 和 defer 属性来控制脚本的执行顺序，或使用 Webpack 等工具来对代码进行打包和优化。

<script class="lazy" data-src="script1.js" async></script>
<script class="lazy" data-src="script2.js" defer></script>
<script class="lazy" data-src="script3.js"></script>

6. 使用 CDN 加载 JavaScript 文件

CDN 可以帮助提升 JavaScript 文件的加载速度。将 JavaScript 文件上传到 CDN，然后在页面中使用 CDN 的 URL 引用该文件。这样可以使 JavaScript 文件从离用户最近的服务器加载，从而减少加载时间。

<script class="lazy" data-src="https://cdn.example.com/script.js"></script>

7. 避免使用过大的 JavaScript 库

过大的 JavaScript 库会减慢页面加载速度。选择 JavaScript 库时应注意其大小，并避免使用不必要的库。可以使用诸如 BundlePhobia 等工具来查看 JavaScript 库的大小。

<script class="lazy" data-src="https://unpkg.com/library@1.0.0/dist/library.min.js"></script>

8. 使用代码分割

代码分割是一种将 JavaScript 代码拆分成更小块的技术。这样可以减少每次加载的 JavaScript 代码量，从而提升加载速度。可以使用诸如 Webpack 或 Rollup 等工具来实现代码分割。

<script class="lazy" data-src="script1.js"></script>
<script class="lazy" data-src="script2.js"></script>
<script class="lazy" data-src="script3.js"></script>

9. 优化 JavaScript 语法

优化 JavaScript 语法可以提高代码的可读性和可维护性，从而减少调试和修改代码所需的时间。也可以帮助减少 JavaScript 代码的大小，从而提升加载速度。

function add(a, b) {
  return a + b;
}

10. 使用工具进行代码审查

使用代码审查工具可以帮助你发现代码中的错误和潜在问题。这可以帮助你提高代码的质量，从而减少网站出现故障的可能性。可以使用诸如 ESLint 或 JSHint 等工具来进行代码审查。

eslint script.js