防抖 & 节流：前端性能优化的秘密武器

2024-01-09 05:30:53

防抖与节流：提升前端性能的利器

前言

在前端开发中，性能优化至关重要。随着应用程序变得越来越复杂，减少不必要的计算和网络请求以提升用户体验成为了一项重大挑战。防抖和节流是两种常用的性能优化技术，通过减少函数执行次数来提高代码效率。本文将深入探讨防抖和节流的原理、区别和应用场景，帮助你掌握这些优化利器，让你的代码运行更流畅、更快速。

防抖

工作原理

防抖是一个事件处理优化技术，当一个事件在指定时间间隔内连续触发时，仅执行一次对应的处理函数。它的工作原理是使用一个计时器来控制函数的执行时机。当事件第一次触发时，计时器启动。如果在计时期间事件再次触发，计时器将重新启动。只有当计时器完全结束后，函数才会执行一次。

应用场景

防抖适用于需要延迟执行的事件，例如文本输入、滚动事件等。在这些场景中，用户可能会在短时间内连续触发多次事件，但我们只需要在用户停止输入或滚动一段时间后才执行相应的处理函数。

代码示例

const debounce = (fn, delay) => {
  let timer;
  return (...args) => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, args);
      timer = null;
    }, delay);
  };
};

const input = document.getElementById('input');
const handleInput = (e) => {
  console.log('Input value:', e.target.value);
};

input.addEventListener('input', debounce(handleInput, 500));

节流

工作原理

节流也是一种事件处理优化技术，但其工作原理与防抖不同。节流的原理是：在指定时间间隔内，只允许函数执行一次。即使事件在指定时间间隔内连续触发多次，函数也只会在指定时间结束后执行一次。

它的工作原理是使用一个标记来控制函数的执行时机。当事件第一次触发时，标记设置为 true，函数执行。之后，如果在指定时间间隔内事件再次触发，标记仍然为 true，函数不会执行。只有当标记在指定时间间隔后变为 false，函数才会再次执行。

应用场景

节流适用于需要按一定时间间隔执行的事件，例如滚动加载、图片加载等。在这些场景中，如果用户在短时间内连续触发多次事件，但我们只需要在一定时间间隔后才执行相应的处理函数，就可以使用节流来优化性能。

代码示例

const throttle = (fn, delay) => {
  let flag = true;
  return (...args) => {
    if (!flag) {
      return;
    }
    flag = false;
    setTimeout(() => {
      fn.apply(this, args);
      flag = true;
    }, delay);
  };
};

const scrollHandler = (e) => {
  console.log('Scroll position:', window.scrollY);
};

window.addEventListener('scroll', throttle(scrollHandler, 500));