防抖节流：性能优化的新技巧，拒绝卡顿，提升用户体验！

前端

2023-03-10 21:40:31

提升 Vue3 组件性能的妙招：防抖与节流

在构建交互式 Web 应用程序时，效率至关重要。Vue3，作为一种流行的 JavaScript 框架，提供了一系列优化组件性能的工具，其中包括防抖和节流。

防抖：减少不必要的渲染

想象一下，你在构建一个实时搜索框，每当用户输入时都会触发一个搜索查询。频繁的查询会给你的应用程序带来压力，导致性能下降。这就是防抖派上用场的时候。

防抖是一种技巧，它可以阻止函数在一段时间内重复调用。在我们的搜索框示例中，我们可以使用防抖来确保只有当用户停止输入 300 毫秒后才执行搜索。这样，我们可以大大减少不必要的查询，同时仍然为用户提供即时反馈。

节流：防止页面卡顿

现在想象一下，你正在处理一个处理大量滚动的应用程序。频繁的滚动事件会导致大量的函数调用，这会使你的页面卡顿。这就是节流发挥作用的地方。

节流是一种技巧，它可以限制函数在特定时间段内只执行一次。在我们的滚动事件示例中，我们可以使用节流来确保滚动函数每 300 毫秒只执行一次。这样，我们可以防止页面卡顿，同时仍然允许用户平滑滚动。

在 Vue3 中应用防抖和节流

使用 Lodash 库实现防抖和节流非常简单。只需导入 debounce 和 throttle 函数即可：

import { debounce, throttle } from 'lodash';

然后，你可以像这样使用它们：

// 防抖
const debouncedFunction = debounce(originalFunction, 300);

// 节流
const throttledFunction = throttle(originalFunction, 300);

自定义防抖和节流

你也可以自定义实现防抖和节流函数：

防抖：

function debounce(func, wait) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

节流：

function throttle(func, wait) {
  let lastTime = 0;
  return function () {
    const context = this;
    const args = arguments;
    const now = new Date().getTime();
    if (now - lastTime < wait) {
      return;
    }
    lastTime = now;
    func.apply(context, args);
  };
}