前端优化之高并发处理

简介: 大部分的高并发处理基本都是在后端处理,但是在部分特殊情况下,后端无法阻止用户行为,需要前端做配合。例如在抢购、秒杀等场景。

网络异常,图片无法展示
|

大部分的高并发处理基本都是在后端处理,但是在部分特殊情况下,后端无法阻止用户行为,需要前端做配合。例如在抢购、秒杀等场景。

高并发是什么?

对此,我们首先需要简单的去了解一下,高并发是什么?

高并发是指在极短单位时间内,有很多用户同时的访问同一 API 接口或者 Url 地址,造成极多个请求同时发起到服务器。它经常会发生在有大活跃用户量,用户高聚集的业务场景中。

网络异常,图片无法展示
|

浏览器请求限制

浏览器在向后端发送http请求是,就会有高并发处理。使用HTTP/2.0,理论上HTTP/2.0协议支持在同一个TCP连接上发送无限个HTTP请求,且这些请求的生命期可以重叠。但是实际上,浏览器并不会同时将所有请求就发过去,还是会有时间间隔。

前端可以做些什么?

虽然浏览器已经对 http 请求并发设置了限制,但是并不能很好的处理掉不必要的请求。而且在部分情况下,用户较多,并且在同一时间端多次请求,如图:

(浏览器到服务器部分的请求会被后台拒掉甚至可能会导致后台崩溃)

网络异常,图片无法展示
|

 

浏览器并不会过滤掉一部分请求,只是会分批发送。这时候极有可能会造成卡顿,甚至崩溃。所以如果,在浏览器发送请求时,可以杜绝掉一部分非必要请求就好了。

网络异常,图片无法展示
|

 

处理方法

图片方面

1.CSS sprites

俗称 CSS 精灵、雪碧图,雪花图等。即将多张小图片合并成一张图片,达到减少 HTTP 请求的一种解决方案。可通过 CSS中的background 属性访问图片内容。这种方案同时还可以减少图片总字节数,节省命名词汇量。

2.压缩图片

图片占据资源极大,因此尽量避免使用多余的图片,使用时选择最合适的格式大小,然后使用智图压缩,同时在代码中用Srcset来按需显示。(切记不要过分压缩 可能会导致图片迷糊)

3.图片使用Base64编码

减少页面请求数,采用Base64的编码方式将图片直接嵌入到网页中。(但是这样做会有一个弊端,就是base64解码也是需要消耗时间的)

文件方面

1.合井脚本和样式表

将部分js和css模块合并,多个合并为单个。(无需过度合并,要考虑后期接你代码的兄弟)减少请求次数。

代码压缩

1.js 代 码 压 缩

JavaScript 压 缩 的 原 理 一 般 是 去 掉 多 余 的 空 格 和 回 车 、 替 换 长 变 量 名 、 简 化 一 些 代 码 写 法 等 (有的时候简化写法性能可能会降低,这点按照实际情况来吧)。

2.css 代 码 压 缩

原理和JS压缩原理类似,同样是去除空白符、注释井且优化一些css语义规则等。(去除注释这种阴间操作的话,咱尽量不做昂)

过滤请求

1.减少访问API或者不访问

使用防抖节流等方式,降低请求次数。例如1秒只许点击1次。

2.利用缓存存放数据

将一些实时性修改,但是不必须发送给后端存储的数据,放在缓存中。例如修改头像,但是还没点确定修改时。

3.避免高频刷新页面获取数据

做一个限定,避免高频刷新带给服务器的压力。例如可以几秒内刷新页面中,只获取一次页面样式或者列表等数据。

目录
相关文章
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
178 2
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
48 0
|
2月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
2月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
2月前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
124 1
|
2月前
|
前端开发 算法 测试技术
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
本文对比测试了通义千文、文心一言、智谱和讯飞等多个国产大模型在处理基础计数问题上的表现,特别是通过链式推理(COT)提示的效果。结果显示,GPTo1-mini、文心一言3.5和讯飞4.0Ultra在首轮测试中表现优秀,而其他模型在COT提示后也能显著提升正确率,唯有讯飞4.0-Lite表现不佳。测试强调了COT在提升模型逻辑推理能力中的重要性,并指出免费版本中智谱GLM较为可靠。
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
|
3月前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
4月前
|
存储 前端开发 JavaScript
前端语言串讲 | 青训营笔记
前端语言串讲 | 青训营笔记
50 0
|
6月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
117 2
|
6月前
|
前端开发 JavaScript 数据库
如何实现前后端分离-----前端笔记
如何实现前后端分离-----前端笔记
下一篇
DataWorks