总结前端高并发优化方案

什么是高并发

高并发是指在极短的时间内，大数量的用户同时访问同一API接口或者资源，造成极多的请求同时发起到服务器。

当同一时间的请求过多，严重时可能导致后台服务器崩溃。

高并发的场景

大部分的高并发是在后端进行处理的，然而在一些情况下，后端无法阻止用户的行为，就需要前端的配合，例如抢购、秒杀等用户活跃度较高的场景。

处理方式

1.减少请求数量

这是前端最容易也是最普遍的高并发处理方式

1.1 节流、防抖

通过封装节流、防抖函数，减少用户的请求次数。

是不是忘记节流防抖怎么写了呢， 点击这里复习一下吧。

节流和防抖的手写及应用场景

1.2 利用缓存减少一些不必要的请求

将一些接口数据存储在本地，需要复用的时候从缓存中读取，而不是发起重复的请求，可以有效减少不必要的请求数量。

是不是也忘记了Cookie,localStorage,sessionStorage呢，点击这里复习一下吧。

详解cookie，session，localStorage，sessionStorage的区别

2. 压缩资源

2.1 通过webpack压缩JS、CSS等代码

不管你有没有忘记，都复习一下webpack吧 。

webpack前端优化方案

3. 图片处理

3.1 CSS spites

俗称精灵图、雪碧图、雪花图等等。将多张小图片合并成一张图片，请求一张图片相当于获取了多张图片。通过CSS中的background属性访问图片内容。同时该方案还可以减少图片总字节数、命名词汇。

3.2 图片压缩

同方案2.1，可以通过webpack实现压缩

3.3 图片资源使用base64编码

采用base64编码的方式渲染图片，而不是发起请求。但同时存在弊端：base64解码需要时间

4. 静态资源上传CDN

直接贴链接，详解CDN

5. 避免高频刷新页面

给请求接口加上限定条件，若n秒内刷新页面只发起一次请求，减少刷新页面发起的请求数量。