关于前端节流的一点思考

基本介绍

节流,主要目的是减少一段时间内单个客户端对后端请求的次数,降低单个客户端的QPS,减轻服务器压力,为什么叫节流呢,感觉还是比较形象的,比如输入框输入,需要远程搜索的时候,不希望每输入一个字母都触发一次搜索,这时候就需要在输入期间每隔一定时间发一次请求,这就是节流。

节流可以放在触发的地方,也可以统一放在请求的地方,一般来说,有下面几种做法。

  • A:封装一个throttle工具函数,将触发方法直接丢进去,在throttle内部定时触发就完事儿
  • 在网络请求的地方处理,如果是短时间内的多次请求
    • B:取消最后一次之前的请求(cancel request)
    • C:定时取消后面的请求,大概与在触发的地方效果差不多

区别

那么,这几种做法有什么区别呢?我们就用输入搜索作为例子来看一下
A:隔一段时间发一次请求,服务器正常响应,结果返回正常更新页面。
B:一直发请求,但是前面的请求会被取消掉,当然,这个服务器如果没有支持取消请求的话,依然是会响应的,只不过客户端取消请求的话,是收不到返回的,也不会相应做页面更新,只会相应最后一次请求更新页面。所以其实这里是假性的节流的。
C:一直发请求,但是会取消掉中间的请求,隔一段响应一次,和B一样,如果服务端不支持取消,则还是会响应。

但是如果要服务端支持取消网络请求,取消请求的请求也可能有延迟,所以不如用websocket,一个普普通通的get请求,何必用到websocket呢。

综上,A最符合节流的目的,B是用户体验最好的,但是只是假节流,所以如果服务器没压力,可以用这种方式,C也是假节流,而且用户体验还差。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、第一部分 1.1值类型和引用类型 1.1.1 值类型都是变量,通过在栈中进行存储,值类型在内存中所占的空间小;...
    洛珎阅读 675评论 0 1
  • 前言 金九银十,又是一波跑路。趁着有空把前端基础和面试相关的知识点都系统的学习一遍,参考一些权威的书籍和优秀的文章...
    WEB前端含光阅读 633评论 0 2
  • 1、离职多久了 2、大约多久到岗 3、离这里多远 4、会考虑搬家吗 5、公司会加班 6、为什么要离职 7、你们这个...
    临渊鲸落阅读 1,247评论 0 1
  • 问题的引出 在一些场景往往由于事件频繁被触发,因而频繁地进行DOM操作、资源加载,导致UI停顿甚至浏览器崩溃。在这...
    Mica_马超阅读 2,301评论 0 2
  • HTML html5的新特性 文件类型声明(<!DOCTYPE>)仅有一型:<!DOCTYPE HTML>。 新的...
    嘤嘤嘤666阅读 1,306评论 0 29