掌握 JavaScript 代码优化之道，打造高效网页

1. 减少 JavaScript 文件大小

JavaScript 文件的大小与网页的加载速度成反比，因此减少 JavaScript 文件的大小是提升网页加载速度的关键。您可以使用各种工具来压缩 JavaScript 代码，例如 UglifyJS、Closure Compiler 和 Babel。此外，您还可以使用 HTTP 头中的 Gzip 压缩功能来进一步减小 JavaScript 文件的大小。

// 使用 UglifyJS 压缩 JavaScript 代码
const uglify = require("uglify-js");
const result = uglify.minify("my-script.js");

// 使用 Closure Compiler 压缩 JavaScript 代码
const compiler = new ClosureCompiler();
const options = {
  compilationLevel: "ADVANCED",
  languageIn: "ECMASCRIPT_NEXT",
  languageOut: "ECMASCRIPT5"
};
const result = compiler.compile(files, options);

// 使用 Babel 压缩 JavaScript 代码
const babel = require("babel-cli");
const options = {
  presets: ["env"]
};
const result = babel.transformFileSync("my-script.js", options);

2. 避免使用阻塞 JavaScript

阻塞 JavaScript 是指阻止浏览器解析和渲染页面的 JavaScript 代码。这通常发生在使用 document.write() 方法或使用同步 AJAX 请求时。避免使用阻塞 JavaScript 可以显著提升网页的加载速度。

// 避免使用 document.write() 方法
document.write("<p>Hello, world!</p>");

// 避免使用同步 AJAX 请求
const xhr = new XMLHttpRequest();
xhr.open("GET", "my-script.js", false);
xhr.send();

3. 使用异步 JavaScript

异步 JavaScript 是指不会阻止浏览器解析和渲染页面的 JavaScript 代码。这通常发生在使用 defer 或 async 属性或使用 promises 或 async/await 语法时。使用异步 JavaScript 可以显著提升网页的加载速度和交互性。

// 使用 defer 属性
<script src="my-script.js" defer></script>

// 使用 async 属性
<script src="my-script.js" async></script>

// 使用 promises
const promise = new Promise((resolve, reject) => {
  // 异步操作
  resolve("Hello, world!");
});

promise.then((result) => {
  // 处理结果
  console.log(result);
});

// 使用 async/await
async function myFunction() {
  const result = await promise;
  // 处理结果
  console.log(result);
}

4. 使用缓存

缓存 JavaScript 代码可以减少浏览器每次加载页面时需要下载的代码量，从而提升网页的加载速度。您可以使用浏览器内置的缓存机制或使用第三方缓存服务来缓存 JavaScript 代码。

// 使用浏览器内置的缓存机制
const cache = window.caches.open("my-cache");
cache.add("my-script.js");

// 使用第三方缓存服务
const cache = new CacheService();
cache.put("my-script.js", "...");

5. 使用 CDN

CDN（内容分发网络）可以将 JavaScript 代码缓存到全球各地的服务器上，从而减少用户访问网站时的延迟。使用 CDN 可以显著提升网页的加载速度，尤其是在用户与服务器距离较远时。

// 使用 CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>