用户对页面响应速度的耐心Yi经降到了冰点。试想一下当你兴致勃勃地打开一个网页，结果页面滚动起来像是在幻灯片播放，或者你在搜索框输入几个字，浏览器就卡死不动，那种挫败感简直让人抓狂。这背后的罪魁祸首，往往不是代码写得有多烂，而是我们忽视了一个潜伏在暗处的“性Neng杀手”——高频事件。

Ru果不Zuo任何处理，任由这些事件像脱缰的野马一样狂奔，就会出现两个核心问题：一是浏览器主线程被大量的计算任务阻塞，导致页面掉帧、卡顿，用户交互体验极差；二是Ru果涉及到网络请求，短时间内发送成百上千个请求，不仅浪费客户端资源，还极有可Neng直接把后端服务打挂。这简直是灾难。

认识“高频事件”这个磨人的小妖精

到底什么是高频事件？说白了就是那些触发频率高到离谱的交互行为。在现代Web应用中，scrollresizemousemoveinput以及touchmove是典型的代表。

尤其是scroll和resize，它们简直就是性Neng黑洞。以滚动为例，当你轻轻滑动一下鼠标滚轮，浏览器在一秒钟内可Neng触发了几十甚至上百次滚动事件。Ru果每次触发我们dou去执行一段复杂的DOM操作或者发起一次AJAX请求，那CPU占用率瞬间就Neng飙升到100%。这时候，电脑风扇狂转，页面却纹丝不动，用户除了关掉页面别无选择。

防抖：忍一时风平浪静

面对这种狂轰滥炸，我们 祭出的第一件法宝就是“防抖”。防抖的核心思想其实特别符合人类的某种心理——拖延症，或者说“等待尘埃落定”。

防抖的底层逻辑

所谓的防抖，其核心逻辑Ke以概括为：在规定的时间窗口内，无论事件被触发了多少次我们dou只执行Zui后一次回调。

这就像是一个不耐烦的电梯门。你走进电梯，门准备关上，结果又有人进来了门就得重新打开等待。Ru果一直有人进出，门就一直不会关上。只有当Zui后一个人进来后过了一段时间没人再动，门才会真正关上并运行。

在代码实现上，当我们触发高频事件时函数并不会立即执行，而是设置一个定时器，开始倒计时。若在这段倒计时的期间内，事件又一次被触发了我们就毫不留情地清除上一个定时器，重新开始倒计时。只有当事件停止触发，并且倒计时结束，函数才会真正执行那一次。

/**
 * 防抖函数封装
 * @param {Function} fn 需要执行的回调函数
 * @param {Number} delay 延迟执行的时间
 */
function debounce {
  var timer = null; // 利用闭包保存定时器标识，这是关键所在
  return function {
    // 每次事件触发，先kankan有没有正在进行的倒计时
    // Ru果有，说明用户还在操作，之前的倒计时作废，清除之
    if clearTimeout;
    var that = this; // 保存当前this指向，防止在setTimeout中丢失上下文
    // 重新设定新的定时器
    timer = setTimeout{
      // 只有当这段延迟时间平安度过才会真正执行目标函数
      fn.call;
    }, delay);
  }
}

防抖的Zui佳拍档

既然知道了原理，那什么时候用Zui合适呢？记住一个原则：只关心“Zui终状态”的场景。

搜索框输入联想： 这是Zui经典的场景。用户在输入“前端性Neng”这四个字时可Neng触发了多次键盘事件。我们肯定不希望用户输个“前”字就去请求一次接口，输个“端”字又去请求一次。正确的Zuo法是等用户停下来比如停了300毫秒没再输入，这时候再去请求接口，展示联想词。

输入框实时校验： 比如手机号、邮箱格式的验证。不要在用户每敲一个字符时就弹出一个红色的错误提示，那样太让人心烦了。等用户输完一串数字，停下来后再去校验，体验会好hen多。

防止表单重复提交： 有些用户手抖，或者网络有延迟，可Neng会在短时间内连续点击“提交”按钮。通过防抖，我们Ke以确保只有Zui后一次点击才会真正触发表单提交逻辑，避免产生脏数据。

滚动条位置计算： 有时候我们需要知道用户滚动到了哪里从而显示“回到顶部”按钮。其实不需要滚动过程中一直算，等用户滚完了停下来再计算位置并显示按钮，完全来得及。

节流：把握节奏，张弛有度

防抖虽然好，但有时候它太“懒”了。有些场景下我们不Neng只等Zui后一次而是希望事件Neng按照一定的频率“有规律”地执行。这时候，就需要“节流”登场了。

节流的运作机制

节流是另一种优化高频事件触发的技术，其核心思想非常简单粗暴：确保在一定的时间单位内，某个事件Zui多只会触发一次。

这就像是一个滴水的水龙头，无论你把水龙头开得有多大，出水口每秒钟只滴一滴水。它不会因为水流湍急就加速，也不会因为水流细小就停止，它有自己的节奏，雷打不动。

在代码层面节流通常会记录上一次函数执行的时间戳。每次事件触发时dou会去检查当前时间与上一次执行时间的差值。Ru果差值超过了我们设定的间隔，那就立即执行函数，并geng新时间戳；Ru果没到时间，那就直接忽略，什么dou不Zuo。

/**
 * 节流函数封装
 * @param {Function} fn 需要执行的回调函数
 * @param {Number} interval 时间间隔
 */
function throttle {
    var lastTime = Date.now; // 记录上一次执行的时间点
    return function {
        var that = this;
        var currentTime = Date.now; // 获取当前时间点
        // 判断距离上次执行是否Yi经超过了设定的时间间隔
        if  {
            fn.apply; // 时间到了立即执行
            lastTime = Date.now; // geng新执行时间，开启下一个周期的等待
        }
        // Ru果时间没到，那就假装什么dou没发生，直接return
    }
}

节流的用武之地

节流适用于必须持续响应，但又不Neng太频繁的场景。

滚动加载geng多： 当用户快速向下滑动页面时我们不需要每滚动一像素就去检测是否触底。我们Ke以设置一个节流阀，比如每200ms检测一次。这样既保证了用户滑到底部时Neng迅速加载内容，又避免了中间过程产生无意义的计算。

按钮点击限制： 比如点赞、收藏或者抢购按钮。虽然防抖也Neng防止重复提交，但节流在这里的作用geng像是“限流”。比如限制1秒内只Neng点一次给用户明确的反馈，防止恶意刷接口。

鼠标移动与拖拽： 在实现拖拽功Neng或者跟随鼠标的动画效果时mousemove事件的触发频率高得吓人。Ru果每次移动dou重新计算坐标并渲染DOM，页面hen容易卡死。使用节流，Ke以让动画以固定的帧率geng新，既流畅又省资源。

进阶方案：requestAnimationFrame 的魔法

除了传统的防抖和节流，现代浏览器还为我们提供了一个geng强大的API：requestAnimationFrame。这玩意儿简直就是为动画和高频事件量身定Zuo的。

它的原理是利用浏览器的刷新机制。大多数屏幕的刷新率是60Hz，也就是每秒刷新60次大约16.7ms一次。RAF会保证回调函数在每一次屏幕刷新之前执行。这意味着，Ru果我们用RAF来Zuo节流，天然就Neng达到Zui流畅的动画效果，而且不会像setTimeout那样出现掉帧或时间不准的问题。

let isTicking = false;
function handleHighFrequencyEvent {
    if  return; // Ru果Yi经在等待下一帧，直接忽略
    isTicking = true;
    window.requestAnimationFrame => {
        // 在这里执行实际的DOM操作或逻辑
        changeWidth; 
        // 执行完毕，重置锁
        isTicking = false;
    });
}
window.addEventListener;

这种方式在处理视觉相关的geng新时性Neng往往优于传统的节流函数，因为它与浏览器的渲染周期完美同步。

防抖 vs 节流：到底该选谁？

说了这么多，Zui后还是得回到实际开发中。hen多新手容易混淆这两个概念，不知道该用哪个。我们Ke以通过一个简单的对比来加深记忆。

特性维度	防抖	节流
核心逻辑	只有当事件停止触发一段时间后才执行一次。	在固定的时间间隔内，无论触发多少次只执行一次。
执行时机	事件结束后的“延迟时刻”。	事件触发过程中的“固定频率”。
触发频率	不确定，取决于用户什么时候停下来。	确定，由开发者设定的时间间隔决定。
核心目的	过滤掉中间过程的所有无效触发，只保留Zui终结果。	降低执行频率，稀释高密度的触发，保证有节奏地响应。
通俗比喻	就像电梯关门，一直有人进出就一直不关，没人了才关。	就像地铁发车，不管站台挤了多少人，每隔5分钟只发一班。

性Neng优化的本质是取舍

防抖和节流，虽然名字听起来hen学术，但它们解决问题的核心目的其实是一致的：通过牺牲一部分实时性，来换取整体性Neng的稳定和流畅。

防抖只执行Zui后一次节流是固定时间间隔内只执行一次。在实际运用过程中，千万不要生搬硬套。你需要根据具体的业务场景来合理选择。Ru果用户需要即时的反馈，用节流；Ru果用户只在乎Zui终结果，用防抖。

这一切kan似神奇的实现，dou离不开JavaScript中一个重要的特性——闭包。正是因为闭包Neng够保存变量，函数才Neng“记住”之前的执行状态，从而实现精准的触发控制。这就是前端技术的魅力所在用Zui精简的逻辑，解决Zui复杂的性Neng难题。

下次再遇到页面卡顿，别急着怪硬件，先kankan你的代码里是不是忘了给那些疯狂触发的事件加上一道“阀门”。优化好了这些细节，你的用户体验绝对Neng提升一个档次。

---