写点什么

前端性能优化常问面试题 - 防抖节流

作者:肥晨
  • 2022-11-02
    江苏
  • 本文字数:521 字

    阅读完需:约 2 分钟

防抖:


定义:当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。


存在的意义:如果事件处理函数调用的频率无限制,会加重浏览器的负担,浏览器的性能是有限的,导致用户体验非常糟糕。需要减少调用频率,同时又不影响实际效果。


实现效果:如果短时间内大量触发同一事件,只会执行一次函数。


如何实现:利用 setTimeout()和 clearTimeout()

节流:


定义:当持续触发事件时,保证一定时间段内只调用一次事件处理函数。


存在的意义:如果事件处理函数调用的频率无限制,会加重浏览器的负担,浏览器的性能是有限的,导致用户体验非常糟糕。需要减少调用频率,同时又不影响实际效果。


实现效果:如果短时间内大量触发同一事件,那么在函数执行一次之后,该函数在指定的时间期限内不再工作,直至过了这段时间才重新生效。


如何实现:利用 setTimeout()和 clearTimeout()


差距:


防抖:过了时间才会触发第一次


   常用于:搜索框input事件、页面resize事件、拖动滚动条事件等
为什么:因为都是只需要最终值的事件
复制代码


节流:第一次触发过后 过了时间才会触发第二次


   常用于:按钮、鼠标移动事件等
为什么:需要先触发一次
复制代码


发布于: 刚刚阅读数: 7
用户头像

肥晨

关注

还未添加个人签名 2021-04-15 加入

平台:InfoQ、阿里云、腾讯云、CSDN、掘金、博客园等平台创作者 领域:前端 公众号:农民工前端

评论

发布
暂无评论
前端性能优化常问面试题-防抖节流_防抖_肥晨_InfoQ写作社区