提升前端性能优化：巧用防抖和节流

前端

2024-02-07 11:12:56

巧用防抖和节流优化前端性能

在前端开发中，优化性能至关重要。防抖和节流函数作为性能优化工具，能够有效提升用户体验。本文将深入探讨它们的工作原理、应用场景以及最佳实践。

防抖和节流：概念解析

防抖：防抖函数只会在指定时间间隔结束后，才执行一次回调函数。这可以防止回调函数在事件频繁触发时被重复调用，从而提高效率。

节流：节流函数会在指定时间间隔内，只执行一次回调函数。这可以防止回调函数在事件持续触发时被频繁调用，从而避免不必要的资源消耗。

应用场景

防抖：

搜索输入框：防止在用户快速输入时频繁触发搜索请求。
窗口调整：防止在用户快速调整窗口大小时频繁触发重新渲染。

节流：

滚动事件：防止在用户快速滚动页面时频繁触发滚动事件处理程序。
鼠标移动事件：防止在用户快速移动鼠标时频繁触发鼠标移动事件处理程序。

最佳实践

防抖：

确定合适的延迟时间：延迟时间应足够长，以防止频繁触发回调函数，但又不能太长，以至于影响用户体验。
考虑取消功能：如果事件在指定延迟时间内被取消，则取消回调函数的执行。
立即执行：如果需要，可以考虑在初始化时立即执行一次回调函数。

节流：

确定合适的延迟时间：延迟时间应足够长，以避免不必要的回调函数调用，但又不能太长，以至于影响响应性。
考虑立即调用：如果需要，可以考虑在初始化时立即调用一次回调函数。

示例代码

防抖函数 ：

function debounce(func, delay) {
  let timer;
  return (...args) => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      func(...args);
      timer = null;
    }, delay);
  };
}

节流函数 ：

function throttle(func, delay) {
  let last = 0;
  return (...args) => {
    const now = new Date().getTime();
    if (now - last < delay) {
      return;
    }
    last = now;
    func(...args);
  };
}