在构建现代网页应用时，JavaScript 无疑是不可或缺的工具，它赋予了网站动态和交互能力。 然而， JavaScript 代码也可能成为性能的瓶颈，导致网站加载缓慢，用户体验下降。 为了打造一个快速、流畅、响应迅速的网站，我们需要掌握一些 JavaScript 优化技巧。 以下 10 个技巧，将带你深入了解提升前端性能的最佳实践，揭秘“为什么”和“怎么做”背后的奥秘，让你不再为网站速度而烦恼！

1. DOM 操作：减少重绘，提升效率

频繁的 DOM 操作会触发浏览器重新渲染页面，导致页面卡顿，影响用户体验。

如何优化：

// 使用 DocumentFragment 批量添加元素
const fragment = document.createDocumentFragment();
const data = ['Item 1', 'Item 2', 'Item 3'];
data.forEach(item => {
  const element = document.createElement('div');
  element.textContent = item;
  fragment.appendChild(element);
});
document.body.appendChild(fragment);

2. 事件监听器：防抖与节流，巧妙控制

频繁的事件触发会让浏览器不堪重负，导致页面卡顿。

如何优化：

function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}
// 使用防抖函数监听输入事件
const input = document.getElementById('search-input');
input.addEventListener('input', debounce(search, 500)); // 500ms 延迟

function throttle(func, delay) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}
// 使用节流函数监听滚动事件
window.addEventListener('scroll', throttle(handleScroll, 100)); // 100ms 间隔

3. 延迟加载：优化用户体验，加速首屏

对于一些用户暂时不需要的资源，例如图片或脚本，我们可以采用延迟加载的方式，等到用户需要的时候再加载。 这样可以减少页面初始加载时间，提高用户体验。

如何优化：

<img src="image.jpg" loading="lazy" alt="延迟加载的图片">

<script src="script.js" defer>script>

4. Web Workers：解放主线程，提升性能

JavaScript 通常在主线程上运行，如果遇到一些性能密集型任务，例如复杂的计算或数据处理，就会导致页面卡顿。 为了避免这种情况，我们可以使用 Web Workers 将这些任务转移到独立的线程中执行，从而释放主线程的压力，提升用户体验。

如何优化：

// 在 worker.js 中定义要执行的任务
// 创建 Web Worker 对象
const worker = new Worker('worker.js');
// 向 worker 发送消息
worker.postMessage('start');
// 监听 worker 的消息
worker.onmessage = (e) => {
  console.log(`Worker said: ${e.data}`);
};

5. 原生 JavaScript：精简代码，提高效率

虽然一些 JavaScript 库，例如 jQuery，可以简化开发流程，但它们也会带来额外的负担，例如增加文件大小和加载时间。 现代的原生 JavaScript 已经拥有了丰富的功能，能够满足大多数开发需求。 因此，我们应该尽可能使用原生 JavaScript，减少对库的依赖。

示例：

// 使用原生 JavaScript 获取元素，然后使用 classList.add 添加类名
const element = document.getElementById('myElement');
element.classList.add('active');
// 使用 jQuery 获取元素，然后使用 addClass 添加类名
$('#myElement').addClass('active');

6. 异步加载：并行下载，提高速度

如果页面上有多个 JavaScript 文件，而且它们都在主线程上执行，那么它们可能会阻塞页面渲染，导致页面加载速度变慢。 为了解决这个问题，我们可以使用 async 和 defer 属性来控制脚本的加载和执行顺序。

示例：

<script src="script1.js" defer>script>
<script src="script2.js" async>script>

7. 代码分割：按需加载，减轻负担

当网站越来越庞大时，JavaScript 代码也会越来越多，这会导致页面加载时间变长。 为了解决这个问题，我们可以使用代码分割将 JavaScript 代码分成多个模块，只加载用户需要的模块。

如何优化：

// 仅在需要的时候加载模块
if (condition) {
  import('./module.js').then(module => {
    module.someFunction();
  });
}

8. 全局变量：减少依赖，避免冲突

全局变量就像共享的玩具，如果大家都不注意，很容易发生冲突，导致程序出现错误。 为了避免这种情况，我们应该尽可能减少对全局变量的依赖，尽量使用局部变量或函数闭包来管理变量。

示例：

// 使用局部变量
function myFunction() {
  let localVariable = 'This is a local variable';
  console.log(localVariable);
}
// 使用函数闭包
function outerFunction() {
  let outerVariable = 'This is an outer variable';
  function innerFunction() {
    console.log(outerVariable);
  }
  innerFunction();
}

9. 循环优化：提高效率，节省时间

循环和迭代是程序中常见的操作，但如果处理不当，也会成为性能瓶颈。 为了提升性能，我们可以采取一些优化措施。

如何优化：

示例：

// 缓存循环次数
const array = [1, 2, 3, 4];
for (let i = 0, len = array.length; i < len; i++) {
  console.log(array[i]);
}
// 避免不必要的 DOM 操作
const items = [];
for (let i = 0; i < 10; i++) {
  items.push(`
${i}
`);
}
const container = document.getElementById('container');
container.innerHTML = items.join('');

10. 浏览器缓存：加速访问，提升体验

浏览器自带缓存机制，可以将用户访问过的网页内容存储在本地，下次用户访问时，可以直接从本地加载内容，而不需要重新向服务器请求。

如何优化：

示例：

// 设置缓存时间为一年
Cache-Control: public, max-age=31536000

总结

这 10 个 JavaScript 优化技巧只是前端性能优化的冰山一角。 为了打造一个快速、流畅、响应迅速的网站，前端开发者应该深入理解这些最佳实践，并将其应用到实际项目中。 记住，一个高效的网站可以提升用户体验，留住用户，并为你的业务带来成功。

最后，如果这篇文章对你有所帮助，请 “点赞、收藏+关注”，感谢支持！祝您编码愉快！