前端性能优化利器：JavaScript 防抖和节流深度浅析

2023-09-10 14:32:22

在快节奏的数字世界中，用户体验至关重要。快速响应的应用程序和网站可以显著提高客户满意度并推动业务增长。前端性能优化是实现卓越用户体验的关键因素，而防抖和节流函数则是此优化工具箱中不可或缺的工具。

什么是防抖和节流？

防抖和节流是 JavaScript 中常用的函数，它们通过控制函数执行的频率来优化应用程序的性能。

防抖： 防抖函数确保在特定时间间隔内只调用一次给定的函数，即使该函数被触发多次。它适用于不需要频繁执行的事件处理程序，例如文本输入事件或窗口大小调整事件。
节流： 节流函数确保给定的函数在特定时间间隔内只能调用一次，无论函数被触发多少次。它适用于需要定期执行的事件处理程序，例如滚动事件或鼠标移动事件。

如何在工作中应用防抖和节流？

在 React、Vue 和 Angular 等流行的前端框架中，都可以轻松实现防抖和节流。以下是使用 JavaScript 原生实现防抖和节流函数的简单示例：

// 防抖函数
const debounce = (func, delay) => {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => { func.apply(this, args); }, delay);
  };
};

// 节流函数
const throttle = (func, delay) => {
  let lastCalled = 0;
  return (...args) => {
    const now = new Date().getTime();
    if (now - lastCalled < delay) return;
    lastCalled = now;
    func.apply(this, args);
  };
};

这些函数可以通过以下方式使用：

// 为文本输入事件应用防抖
const inputElement = document.querySelector('input');
inputElement.addEventListener('input', debounce((e) => { console.log(e.target.value); }, 500));

// 为滚动事件应用节流
window.addEventListener('scroll', throttle((e) => { console.log(window.scrollY); }, 100));