原文链接
什么是高并发
高并发是指在极短的时间内,大数量的用户同时访问同一API接口或者资源,造成极多的请求同时发起到服务器。
当同一时间的请求过多,严重时可能导致后台服务器崩溃。
高并发的场景
大部分的高并发是在后端进行处理的,然而在一些情况下,后端无法阻止用户的行为,就需要前端的配合,例如抢购、秒杀等用户活跃度较高的场景。
处理方式
1.减少请求数量
这是前端最容易也是最普遍的高并发处理方式
1.1 节流、防抖
通过封装节流、防抖函数,减少用户的请求次数。
是不是忘记节流防抖怎么写了呢, 点击这里复习一下吧。
1.2 利用缓存减少一些不必要的请求
将一些接口数据存储在本地,需要复用的时候从缓存中读取,而不是发起重复的请求,可以有效减少不必要的请求数量。
是不是也忘记了Cookie,localStorage,sessionStorage呢,点击这里复习一下吧。
详解cookie,session,localStorage,sessionStorage的区别
2. 压缩资源
2.1 通过webpack压缩JS、CSS等代码
不管你有没有忘记,都复习一下webpack吧 。
3. 图片处理
3.1 CSS spites
俗称精灵图、雪碧图、雪花图等等。将多张小图片合并成一张图片,请求一张图片相当于获取了多张图片。通过CSS中的background属性访问图片内容。同时该方案还可以减少图片总字节数、命名词汇。
3.2 图片压缩
同方案2.1,可以通过webpack实现压缩
3.3 图片资源使用base64编码
采用base64编码的方式渲染图片,而不是发起请求。但同时存在弊端:base64解码需要时间
4. 静态资源上传CDN
直接贴链接,详解CDN
5. 避免高频刷新页面
给请求接口加上限定条件,若n秒内刷新页面只发起一次请求,减少刷新页面发起的请求数量。