网页性能优化实战之带宽优化处理

简介: 最近用户反馈页面加载慢,系统首页刚打开的时候要等上一两分钟才能进入到登录页面,进入到系统之后部分查询的页面加载过慢.问题收到之后就是各种定位,经过一番操作,终于还用户了一个丝滑柔顺的操作体验,下面总结了一下页面性能优化的经验,希望对有同样需求的同学有所启示!

背景说明


   最近用户反馈页面加载慢,系统首页刚打开的时候要等上一两分钟才能进入到登录页面,进入到系统之后部分查询的页面加载过慢.问题收到之后就是各种定位,经过一番操作,终于还用户了一个丝滑柔顺的操作体验,下面总结了一下页面性能优化的经验,希望对有同样需求的同学有所启示!


处理过程


首先思考影响网页加载速度的最常见原因(以下排名不分先后):

1.网速

   最先考虑网速是因为自己的网络不好再怪人家的网站性能不好是很不地道的,哈哈!当然这也是最容易排除的一个因素,换一台不在同一网络的其他电脑试一下,如果网站加载仍然不给力,那恭喜你应该不是本地网速的问题,顺利摆脱背锅的命运,继续往下看.


2.带宽

   这个可以说是最容易导致网络加载慢的原因,因为大部分的服务器在最初采购的时候都是以廉价、够用为采购标准进行购买的,所以可以看到很多的服务器都是2M、3M的带宽进行配置,刚开始用户不多的情况下没有问题,但是随着用户访问数量的增多,原有的带宽越来越紧张!处理这个问题的方式也很简单,就是升级带宽呗,下面会结合具体场景详细说下如何升级带宽。


3.数据库连接

   关于数据库性能优化问题一定是后端开发难以逾越的大山,每想到这里都会心疼后端的同学三秒钟,要处理复杂的业务逻辑,又得懂运维,还得会数据库调优,为什么不能像前端的小姐姐一样美美的只关注页面,哈哈!一般业务相对复杂的项目中,数据库查询肯定存在多表关联查询,刚开始的时候还看不出来,但随着数据量的增多,一定会碰到慢sql,这种慢sql一定会影响接口访问速度,继而给用户带来非常不好的操作体验.所以如何进行sql优化确实需要下功夫研究总结.那执行多长时间的算是慢sql,这个没有标准.就目前接触的项目来看,数据量都是在十万级别左右的,用时在毫秒级别算是比较合理,对于超过十几秒钟的算是慢sql,需要进行优化了.原谅我给身处一线处理千万级别的后端开发拖了后腿,毕竟小公司做不到啊!


4.前端代码问题,比如说图片过大

   关于这个不想多说,常见的代码规范问题,不做前端,不做过多评价,另外前端只负责岁月静好,不用负重前行!


结合项目实际情况说下处理过程

   先说一下怎么科学的进行判断带宽是否够用.F12打开控制台,输入目标网址,如果显示的蓝色进度条过大,说明静态文件太大了,要么前端需要优化一下,要么加一下带宽吧!

7fb4d65e594e13ccf184182afcc071f0_7ae45ca693174bcca5c19b794add63cd.png


加载慢具体表现为:首次加载很慢,但是第二次打开之后就没有这么慢,原因是浏览器已经缓存的部分信息.关于绿色的进度条一般表示的是请求服务端的时间,如果绿色的响应时间很长,说明需要考虑一下服务端的问题了,就好比是下图,结合目前接触的主要考虑数据库查询耗时的问题.

87ecea7c24dcc993591acbed66b0ca14_d1bfc22942894318941517fa38e5b788.png

   当然可以结合阿里云控制台看是否需要加带宽以及加多少带宽合适.

   进入到阿里云服务器的实例页面,点击监控部分,主要看公网带宽就可以,客户访问网站 主要看这个 公网的out 带宽(就是绿色的部分), 我的服务器的带宽也是3M带宽,如果长时间内绿色部分在3M 持平(可以选择时间范围),这个的意思就是带宽跑满了,需要加带宽.

5e4ae0015035b191fb18d57e67178b46_9c82522b9ee64466aa244b0abce832b4.png


至于加多少合适,可以参考蓝色部分.蓝色部分表示公网进入的带宽消耗,如果是超过ecs服务器配置的带宽,就基本上可以确定要加带宽了.然后考虑加多少的问题,可以把监控的时间范围拉的长一些,看下蓝色部分的峰值一般在多少,基本上可以确定提升的带宽数.

59ec25a51cb913f16355335c1b6ed9d1_f736dcfc9be641d9945afb918b597271.png

   最后是如何加带宽的问题.阿里云提供多种带宽升级的方式,在不确定是否是带宽影响的前提下,可以选择临时带宽,这里可以指定临时带宽的时间,需要最低是三个小时,提升到6M当时好像是不到一元钱,是不是很划算.自己加了临时带宽之后,首页加载速度是上来了,页面中部分接口中查询速度还是慢,就排除带宽的影响,安心处理sql耗时过多问题了.不要再让带宽背锅.关于sql性能优化实战可以参考: mysql查询优化实战:查询用时一分半降到三毫秒.关于升级带宽具体的操作步骤可以参考下图:

565dde17edd2a23e44ed6fdbd441ed4c_77662739031944c2b34ab3a514c37781.png

d67256d9522d0b68c2f4809330ab5a0c_86722059f3ac432c8a489847207b984b.png



   一般在搞流量比较大的活动时,会最这种临时带宽的升级方案,经济划算,哈哈!当然也可以直接选择包年包月进行升级带宽.可以不用经受带宽的困扰,专注于业务问题.

   以上是处理网页加载慢的记录总结,希望对有同样需求的同学有所帮助,为你的问题排查提供一点点思路!


相关文章
|
8月前
|
域名解析 弹性计算 安全
零基础也会!阿里云建站完整流程,看完直接上手
阿里云建站全流程指南(2026最新版):零基础也能上手!涵盖域名注册与实名认证、ECS服务器选购配置、ICP备案(1-20工作日)、网站部署、DNS解析及HTTPS证书配置六大步骤,全程合规安全,助你快速上线个人或企业网站。
1686 2
|
10月前
|
JavaScript 前端开发 Java
Bootstrap5 快速上手指南
Bootstrap5 快速上手指南:告别 jQuery,拥抱原生 JS!新增 xxL 断点与 RTL 支持,优化栅格系统与组件样式。提供 CDN 引入、核心布局、常用组件及完整博客实例,零基础也能快速搭建美观响应式博客,含按钮、卡片、导航栏、表单等实战代码,即拷即用。
Bootstrap5 快速上手指南
|
人工智能 搜索推荐 定位技术
AddressCLIP:一张照片就能准确定位!中科院联合阿里云推出街道级图像地理定位模型
AddressCLIP 是由中科院和阿里云联合开发的端到端图像地理定位模型,通过图像-文本对齐和地理匹配技术,实现街道级精度的定位,适用于城市管理、社交媒体、旅游导航等场景。
2720 30
AddressCLIP:一张照片就能准确定位!中科院联合阿里云推出街道级图像地理定位模型
|
缓存 人工智能 NoSQL
Java中实现Token设置过期时间的方法
本文介绍了在Java应用中实现Token设置过期时间的多种方法,包括使用JWT和Redis缓存,并结合定时任务清理过期Token,以提升系统安全性与用户隐私保护。
1337 0
|
SpringCloudAlibaba Dubbo Java
【SpringCloud Alibaba系列】Dubbo基础入门篇
Dubbo是一款高性能、轻量级的开源Java RPC框架,提供面向接口代理的高性能RPC调用、智能负载均衡、服务自动注册和发现、运行期流量调度、可视化服务治理和运维等功能。
1048 1
【SpringCloud Alibaba系列】Dubbo基础入门篇
|
缓存 网络协议 网络架构
以太网数据链路层、Ethernet_II帧格式、IEEE802.3帧格式,以太网的MAC地址的组成,ARP地址解析协议的工作原理,单播帧、组播帧、广播帧的区别
数据链路层,Ethernet_II帧格式、IEEE802.3帧格式,帧格式的区分以及链路层每种帧格式有什么作用,怎么区别分辨帧格式,以太网MAC地址的组成,ARP地址解析协议原理、什么是单播帧?什么是组播数据帧?什么是广播帧?...............
2294 0
以太网数据链路层、Ethernet_II帧格式、IEEE802.3帧格式,以太网的MAC地址的组成,ARP地址解析协议的工作原理,单播帧、组播帧、广播帧的区别
|
SQL XML 安全
Mybatis分页方式详解
Mybatis分页方式详解
2415 0
|
存储 监控
显示器中的HDR10、HDR400、HDR600有什么区别?
HDR10是通用的HDR标准,无需支付版权费;HDR400、HDR600等是VESA的DisplayHDR等级,根据亮度、色域、色深等指标划分,数值越高代表性能越强,如HDR400要求400nit亮度,HDR600则需600nit以上。
|
机器学习/深度学习 人工智能 自然语言处理
机器之心开放人工智能专业词汇集(附Github地址)
作为最早关注人工智能技术的媒体,机器之心在编译国外技术博客、论文、专家观点等内容上已经积累了超过两年多的经验。
1921 0
机器之心开放人工智能专业词汇集(附Github地址)
|
数据采集 前端开发 JavaScript
数据采集Selenium中的弹窗处理
使用Selenium自动化处理网页弹窗,包括浏览器警告(alert、confirm、prompt)和HTML自定义弹窗。示例代码展示了如何接受警
1219 0
数据采集Selenium中的弹窗处理

热门文章

最新文章