总结前端高并发优化方案

237 阅读2分钟

原文链接

前端优化之高并发处理

什么是高并发

高并发是指在极短的时间内,大数量的用户同时访问同一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秒内刷新页面只发起一次请求,减少刷新页面发起的请求数量。