性能优化——函数节流

最新推荐文章于 2025-06-05 20:23:59 发布

Feb~

最新推荐文章于 2025-06-05 20:23:59 发布

阅读量275

点赞数

CC 4.0 BY-SA版权

分类专栏：前端性能优化

本文链接：https://blog.youkuaiyun.com/lilele0227/article/details/87451710

本文探讨了在JavaScript中如何通过函数节流优化性能，特别是在处理高频事件如mousemove、resize和scroll时。文章以一个拖动效果的实例为背景，说明未优化时造成的性能问题，并解释了函数节流的概念，将其比喻为限制游戏中的武器射速。接着，展示了具体的函数节流实现代码，对比优化前后的效果，强调了如何控制事件触发频率以节省浏览器资源。最后预告了函数防抖的相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

项目中遇到一个需要实现文字拖动的效果，用mousedown、mousemove、mouseup模拟拖动效果。但是实现的效果并不是很理想，原因是mousemove是一个高频事件，触发的频率非常高，会造成浏览器的性能问题。

场景

高频触发事件，对执行函数进行节流可以节省浏览器资源，以免造成不必要的性能浪费。具体的应用场景有：

DOM元素实现拖拽功能（mousemove）
window对象的resize、scroll事件
绝地求生中的武器射速（此处不是性能优化）
文字输入、自动完成的keyup事件

概念

以吃鸡游戏为例，假设M416的射速不用函数节流，理论上是无数次，分分钟秒杀敌军。而函数节流就是要实现这么一个效果——一定时间内，只能有效触发一次函数，即M416一秒内只能射出X发子弹（射出一次子弹可以理解为有效触发一次函数）。

实现

没有代码的博客都是耍流氓，我们以mousemove事件为例来看看函数节流的威力。

未优化代码

<script>
    let moveStatus = false;
    let startTime, lastTime;

    window.onmousedown = function(){
          console.log('down');
          moveStatus = true;
          startTime = new Date();
    }

    window.onmousemove = function(){
        lastTime = new Date() - startTime;
        if(moveStatus && lastTime <