Raydenm-文章

前端性能优化：深入理解防抖与节流

2024/05/18

前端开发中，高频事件（如窗口滚动、输入框内容变化、窗口大小调整等）可能会频繁触发，导致性能问题。为了解决这些问题，防抖（Debouncing）与节流（Throttling）应运而生，它们是两种常见的优化技术，旨在减少频繁事件触发时的处理次数。

一、防抖

防抖是一种在用户停止触发事件后的一段时间内，才执行回调函数的技术。其目的是避免在短时间内多次执行相同的操作。防抖的应用场景通常是基于用户操作的输入处理（如搜索框输入、表单提交等），其核心思想是：只在操作停止后才执行一次回调。

实现细节

延迟执行：当事件被触发时，启动一个计时器（定时器），等待指定的时间（例如 300 毫秒）。
计时器重置：如果在等待时间内再次触发事件，则取消之前的计时器，并重新启动新的计时器。
执行回调：当设定的时间内没有新的事件触发，回调函数才会被执行。

防抖的实现

以下是一个常见的防抖函数实现，它使用 setTimeout 和 clearTimeout 控制函数执行时间：

function debounce(fn: Function, delay: number) {
  let timer: number | null = null;
  return function (...args: any[]) {
    if (timer) clearTimeout(timer);
    timer = window.setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

timer 是一个变量，用来保存当前正在等待的定时器。
clearTimeout(timer) 清除之前的定时器，确保在新的触发事件时重置计时器。
setTimeout 延迟执行回调函数 fn，只有在设定的时间 delay 过去后没有新的事件触发时，回调才会执行。

应用场景

输入框实时搜索：用户在输入框中键入内容时，如果每次输入都立即触发搜索请求，系统将执行大量无意义的请求。防抖可以确保在用户输入停止后再发起一次搜索请求。
调整窗口大小时的重绘：当用户拖动窗口改变大小时，不希望频繁触发页面重新渲染。防抖可以确保只在调整结束后执行一次重绘。

节流

节流的核心思想是：在一定时间间隔内，限制回调函数的执行频率。即使事件频繁触发，节流也会确保在规定时间内最多执行一次。这种技术常用于滚动、拖拽等需要频繁触发的事件，目的是减少函数的调用次数，优化性能。

实现细节

时间控制：节流通过记录上次函数执行的时间，来控制当前时间与上次执行时间的间隔。
条件判断：如果当前时间与上次执行时间的差值超过了设定的间隔时间，则执行回调函数；否则忽略此次触发。

节流的实现

节流函数的实现通常使用 Date.now() 来记录时间，并通过比较时间差值来决定是否执行回调：

function throttle(fn: Function, interval: number) {
  let lastTime = 0;
  return function (...args: any[]) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}

lastTime 保存上一次函数执行的时间戳。
Date.now() 获取当前时间戳，用来与 lastTime 进行比较。
如果当前时间与上一次执行时间的差值大于等于 interval，则执行回调函数 fn。

应用场景

页面滚动事件：页面滚动可能每毫秒触发数百次，导致页面性能问题。通过节流，可以限制滚动事件的处理频率，每 100 或 300 毫秒执行一次事件回调。
鼠标拖拽事件：在元素的拖拽过程中，频繁计算元素的位置可能会导致页面卡顿。节流可以控制拖拽事件的回调频率，减少计算量。

三、第三方库及实践

Lodash

Lodash 是一个流行的 JavaScript 实用库，它提供了防抖和节流的实现，可以直接用于项目中，且具备非常高的灵活性。

Debounce 实现：

import _ from 'lodash';

const handleInputChange = _.debounce((event) => {
  console.log("Input value:", event.target.value);
}, 300);

Throttle 实现：

import _ from 'lodash';

const handleScroll = _.throttle(() => {
  console.log("Scroll event triggered");
}, 1000);

Lodash 的 debounce 和 throttle 提供了丰富的配置选项，如是否立即执行、是否取消函数等。

RxJS

RxJS 是另一个强大的响应式编程库，特别适合复杂的异步流数据处理，它也内置了防抖和节流功能。

DebounceTime：

import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

const input = document.querySelector('input');
fromEvent(input, 'input')
  .pipe(debounceTime(300))
  .subscribe(event => {
    console.log("Input value:", (event.target as HTMLInputElement).value);
  });

ThrottleTime：

import { fromEvent } from 'rxjs';
import { throttleTime } from 'rxjs/operators';

fromEvent(window, 'scroll')
  .pipe(throttleTime(1000))
  .subscribe(() => {
    console.log("Scroll event triggered");
  });

四、防抖与节流的深入探讨

立即执行选项

在防抖函数中，有时希望在事件第一次触发时立即执行函数，然后在延迟时间内不再执行。这可以通过设置 immediate 参数来实现。

function debounce(fn: Function, delay: number, immediate: boolean = false) {
  let timer: number | null = null;
  return function (...args: any[]) {
    if (timer) clearTimeout(timer);
    if (immediate && !timer) {
      fn.apply(this, args);
    }
    timer = window.setTimeout(() => {
      if (!immediate) fn.apply(this, args);
      timer = null;
    }, delay);
  };
}

最后一次执行

节流函数的标准实现是根据时间间隔执行一次，但有时我们希望在用户最后一次操作后再执行一次函数，这可以通过 trailing 参数来实现。

function throttle(fn: Function, interval: number, trailing: boolean = true) {
  let lastTime = 0;
  let timer: number | null = null;
  return function (...args: any[]) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      fn.apply(this, args);
      lastTime = now;
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
    } else if (trailing && !timer) {
      timer = window.setTimeout(() => {
        fn.apply(this, args);
      }, interval - (now - lastTime));
    }
  };
}