大话前端:深入理解防抖和节流-前端性能优化良方

2023-12-16 14:38:52

聪明的电梯与定时发车的班车:理解防抖与节流

作为一名前端工程师,处理高频事件时,我们常常需要在流畅体验和性能效率之间找到平衡点。这时,"防抖"和"节流"技术应运而生,它们是优化页面性能的关键手段。让我们通过两个形象的比喻来深入理解这两个概念。

防抖(Debounce)原理

"防抖"这个术语,就像是一个敏感的电梯,它会防止因为多次信号而造成频繁启动。想象一下,你进入一座楼的电梯,电梯门准备关闭,这时又有人按下呼叫按钮。电梯门重新打开,等待新的乘客。如果不断有人加入,门就会一直开着。只有当一段时间内没有新的呼叫,电梯门才会关闭,并最终启动。

在这个比喻中,电梯的启动代表了函数的执行,电梯的等待时间对应于防抖中设定的延迟时间。我们通过设置一个计时器,只有在最后一次事件触发后的一段时间内没有新的触发,才执行目标函数。这样,无论事件触发得多频繁,最终执行的次数只有一次。

节流(Throttle)原理

而"节流"则像是一个定时发车的班车,它的任务是控制班车的流量,保证不会因为过多的班车而使车站管理混乱。不管车站里的人有多急切,班车始终按照固定的时间间隔出发。

在这个比喻里,班车的发车就是函数的执行,发车的时间间隔就是节流函数中设定的时间间隔。我们通过记录上一次函数执行的时间,并与当前尝试执行的时间进行比较,如果未达到设定的时间间隔,则不执行函数。这保证了即使事件触发得非常频繁,函数执行的频率也是固定的。

应用场景分析

防抖的应用场景与效果
  1. 搜索框搜索建议
    用户每输入一个字母就查询一次,导致过多无用请求。应用防抖技术,用户停止输入后才发起查询。减少请求次数,降低服务器负担,优化用户体验。

  2. 表单验证
    用户每次输入都触发验证,影响性能。输入结束后延时进行验证。提高了验证的效率,降低了性能消耗。

  3. 窗口大小调整(resize)
    用户调整窗口时频繁触发重绘,影响性能。调整结束后才执行重绘。避免不必要的计算和重绘,提升性能。

  4. 按钮提交
    用户连续点击提交按钮,造成多次提交。防抖限制连续点击。防止表单多次提交,避免数据混乱。

节流的应用场景与效果
  1. 滚动事件监听(scroll)
    滚动时频繁触发事件处理函数,造成滚动卡顿。限制事件处理函数的调用频率。平滑滚动体验,减少了重绘和重排。

  2. 游戏中的射击频率
    玩家能够无限制射击,影响游戏平衡。限制射击的最快频率。保持游戏平衡,提升游戏体验。

  3. 在线拖拽
    拖拽时位置计算过于频繁,造成性能瓶颈。控制位置计算的频率。拖拽操作流畅,减少性能消耗。

  4. 性能监控
    高频率监控可能会对性能本身造成影响。限制数据采集频率。准确监控性能而不影响性能本身。

代码实现

// 防抖函数
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// 节流函数
function throttle(func, interval) {
  let lastTime = 0;
  return function throttledFunction(...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      lastTime = now;
      func(...args);
    }
  };
}

文章来源:https://blog.csdn.net/weixin_43903608/article/details/134999704
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。