首页 > 文章 > 前端

防抖节流技巧，提升JS性能方法

时间：2026-02-05 09:35:36 339浏览收藏

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《防抖与节流：JavaScript性能优化技巧》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

防抖指事件频繁触发时仅执行最后一次，适用于搜索联想等场景；节流则保证在固定时间间隔内最多执行一次，适合滚动监听等连续操作，两者均通过降低函数执行频率提升性能。

JavaScript性能调优_防抖与节流

在前端开发中，JavaScript的性能优化是一个不可忽视的话题。特别是在处理高频触发事件时，比如窗口滚动、输入框输入、鼠标移动等，如果不加以控制，很容易造成页面卡顿甚至崩溃。防抖（Debounce）和节流（Throttle）是两种常用的优化手段，能有效减少函数执行次数，提升应用性能。

什么是防抖（Debounce）

防抖的核心思想是：当事件被频繁触发时，只执行最后一次操作。也就是说，只要事件持续触发，函数的执行就会被不断推迟，直到事件停止触发一段时间后才真正执行一次。

适用于搜索框输入联想、窗口大小调整后重新渲染、按钮重复点击等场景。

实现方式：

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

// 使用示例
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function(e) {
  console.log('搜索:', e.target.value);
}, 300));

什么是节流（Throttle）

节流的策略是：在一定时间间隔内，无论事件触发多少次，函数最多只执行一次。可以理解为“稀释”函数的执行频率。

常用于监听页面滚动、鼠标移动、窗口resize等连续触发但不需要每次都响应的场景。

实现方式（定时器版本）：

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

也可以使用时间戳方式实现，逻辑略有不同但效果类似。