前端优化之高并发处理
大部分的高并发处理基本都是在后端处理,但是在部分特殊情况下,后端无法阻止用户行为,需要前端做配合。例如在抢购、秒杀等场景。
高并发是什么?
对此,我们首先需要简单的去了解一下,高并发是什么?
高并发是指在极短单位时间内,有很多用户同时的访问同一 API 接口或者 Url 地址,造成极多个请求同时发起到服务器。它经常会发生在有大活跃用户量,用户高聚集的业务场景中。
![](/assets/blank.gif)
浏览器请求限制
浏览器在向后端发送http请求是,就会有高并发处理。使用HTTP/2.0,理论上HTTP/2.0协议支持在同一个TCP连接上发送无限个HTTP请求,且这些请求的生命期可以重叠。但是实际上,浏览器并不会同时将所有请求就发过去,还是会有时间间隔。
前端可以做些什么?
虽然浏览器已经对 http 请求并发设置了限制,但是并不能很好的处理掉不必要的请求。而且在部分情况下,用户较多,并且在同一时间端多次请求,如图:
(浏览器到服务器部分的请求会被后台拒掉甚至可能会导致后台崩溃)
![](/assets/blank.gif)
浏览器并不会过滤掉一部分请求,只是会分批发送。这时候极有可能会造成卡顿,甚至崩溃。所以如果,在浏览器发送请求时,可以杜绝掉一部分非必要请求就好了。
![](/assets/blank.gif)
处理方法
图片方面
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.避免高频刷新页面获取数据
做一个限定,避免高频刷新带给服务器的压力。例如可以几秒内刷新页面中,只获取一次页面样式或者列表等数据。
前端优化之高并发处理相关推荐
- 面试篇:前端优化整理
故事背景 前端优化这种高概率出现的面试题,能背下来最好~技术小白的卤煮表示已经n多次听到大佬们面试会问到...... 作为一名前端开发工程师,前端逻辑上的优化可行性并不大,因为前端所涉及的逻辑相对于后 ...
- 高并发大流量专题---3、前端优化(减少HTTP请求次数)
高并发大流量专题---3.前端优化(减少HTTP请求次数) 一.总结 一句话总结: 图片地图:使用<map><area></area></map>标签. ...
- 高并发访问服务器时前端优化
高并发访问服务器时前端优化 高并发的痛点:数据流动过程两端失衡了,会导致前端到后台部分的请求会被后台拒掉甚至可能会击垮后台.需要把两端重新回到数据流动的平衡状态.前端层面尽可能地加强其作为用户与后台之 ...
- 浅谈高并发-前端优化
前言 最近接到个任务,业务场景是需要处理高并发. 原谅我第一时间想到的居然是前段时间阮一峰的博客系统遭到了DDoS攻击,因为在我的理解中,它们的原理是想通的,都是服务器在一定时间内无法处理所有的并行任 ...
- 高并发处理之商品详情页
首页 博客 专栏·视频 下载 论坛 问答 代码 直播 能力认证 高校 会员中心 收藏 动态 消息 创作中心 高并发处理之商品详情页 卜大伟 2019-01-18 11:13:47 2488 收藏 ...
- 分布式架构 高并发处理
分布式架构 高并发处理 高并发介绍 在同时或者极短时间内,有大量请求到达服务端,每个请求都需要服务端耗费资源进行处理,并做出相应反馈 服务端比如同时开启进程数,能同时运行的线程数.网络连接数.CPU运 ...
- 关于大型网站技术演进的思考(二十)--网站静态化处理—web前端优化—中(12)...
Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳 ...
- Web前端优化最佳实践及工具集锦
摘要:前端的性能对于Web应用的用户体验来说非常重要.不要以为你的Web应用的性能已经足够好了,其实还会有很多可以提升的地方.本文将介绍Google和雅虎关于前端优化的最佳实践以及工具,你可以逐一检验 ...
- 前端笔记-前端优化简要大总结
个人对前端优化的一些简要总结,参考了一些别人写得资料 服务器方面: 提高自己服务器质量,带宽等方面 开启浏览器缓存,减少http请求 开启gzip压缩 使用内容分发网络cdn html界面 css文件 ...
最新文章
- java 数据存储到什么地方?
- spring boot 整合mongoDb
- 分布式云+dubbo+zookeeper+Springmvc整合
- javascript 常量_JavaScript中的常量
- python+OpenCV图像处理(一)读取、复制、显示、保存
- 条件信息熵的决策表约简
- shell执行perl_TOOLFK工具-在线Perl代码执行工具
- 如何固定电脑桌面便签 win7便签怎么设置?
- 【设计鉴赏】张艺谋《影》震撼人心的海报设计
- 基于新浪微博API生成短链接的15款在线工具
- 慢就是快的人生哲理_快和慢人生感悟
- 今日头条信息流 - 广告策略
- php取余函数,php 取余数详解
- HOW UNREAL RENDERS A FRAME
- Euler配置yum源
- python立体图形_Python 立体图形的画法(一)
- 创建一个 PHP 程序来扫描主机名上的开放端口。
- 8086系统中 BHE# 和 A0 引脚
- notepad++ 多行批量 标序号
- 【CIKM 2020】基于多视图协作学习的人岗匹配研究
热门文章
- ISO9001质量管理体系内容
- 【48期分享】4款产品发布PPT模板免费下载
- Ambire KuCoin 发起 ADX 交易竞赛,提供价值 50,000 美元的奖池
- WPF数据模板之Item Template
- 一张金融IC卡的交易流程(一)-----基本数据Tag
- 初刻拍案惊奇读书心得
- 英语口语254之每日十句口语
- C++软件工程师笔试题附答案
- 播放器技术演进与探索,Web开播系统的技术演进,大屏终端音视频播放,音视频效果插件开放平台建设...
- “生命游戏”的多线程算法思考[转]