作为一个网站管理员,你真的懂网页性能优化吗?

作为一个网站管理员,你真的懂网页性能优化吗?

首页模拟经营网站管理员更新时间:2024-04-29

事情还要从我买了个啥也不是服务器说起,便宜是挺便宜的,几十块钱,但是带宽根本不够用……

后面我也不知道我从哪里走漏了风声,很多商家都来联系我买他们的大带宽,其中印象最深的就是网盾的客服了,四点多还在跟我斗图…

文章着重讲一下网络带宽(下面简称带宽),你可能觉得跟你一个不是管理员的人没啥关系,但就是这个“没啥关系” 总有一天会影响到你。

讲解带宽的同时,我们需要结合各个浏览器并发请求数的有限特性,来分析web前端的雪碧图(雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片,对内存和带宽更加友好。)、减少HTTP请求、路由异步加载、图片转CDN、压缩静态资源等前端优化性能的做法,来明确做这些事情的最终目的

啥是带宽?

我白了看了一下,都是长篇大论,讲起来都是写理论没有灵魂的,而且都可以查到,我需要体现我的价值,我干脆直接用百科里的一个简单例子总结。

你想去一个某个城市旅游,这座城市的交通道路就是网络,道路上有各种各样的车道,单车道、双车道、四车道、八车道。你从你的城市出发,驾驶着一辆车,在路上飞速行驶着,路上会分别经过单车道、双车道、四车道、八车道,最终到达心怡的城市。

我们像做阅读理解一样,首先挑出关键词:

城市交通:网络

车道的宽度:带宽

单车道、双车道、四车道、八车道:带宽空间

开的车子:网络上传输的信息

带宽是用于传输信息的,信息有一个具体的值,我们称之为数字信息流。它的单位是bit(比特),时间传输单位是s(秒),自然而然带宽的单位也就是bit/s(比特/秒)。

我们常在网络上传下载信息,就需要提到传输速度。

传输速度指的是将数据从源地址传送至目的地址的速度。根据传输设备和媒介的不同,传输速度有不同的含义。

针对传输网,传输速度是指将数字信号从起始地传输到终止地的传输速率。如SDH的一对光纤的传输速度为2.5Gbps或10Gbps。WDM的传输速度可以达到1.6T甚至更高。

交换机的传输速度是指交换机端口的数据交换速度。目前常见的有10Mbps、100Mbps、1000Mbps等几类。除此之外,还有10GMbps交换机,但目前很少。

试想一下,下载速度是1bit/s的速度,会不会原地爆炸。

但现在的电信宽带上网,速度基本保持在512K bit/s(千比特每秒)至10M bit/s(兆比特每秒)之间。

以太网就更快了,速度保持在10M bit/s 以上。

其实KB和kb是不一样的,就像我们常说1k=1024B,实际上并非1024B,而是1000B。而且在使用中,B和b是不一样的,B代表的是Byte,字节;b代表的是bit,比特,1B=8b。

这里换算一下单位:

100 M b/s = (100 * 1024) K b/s = (100 * 1024 / 8) KB/s = 12800 KB/s = 12.5 MB/s。

跟闹着玩似得,我家办理的百兆宽带,我测试发现根本没到12.5MB/s。(我想去营业厅跟他们聊聊……)

经过一系列搜集信息,我发现,我错了。

计算出来的结果只是理想状态下的,这就体现了现实总是和理想有很大的差距。现实受“用户计算机性能、网络设备质量、资源使用情况、网络高峰期、网站服务能力、线路大小、信号强度”等多种因素的影响,这都是影响到网速。

一顿操作猛如虎,腚晴一看,我可怜的带宽,速度根本满足不了我的需求啊。(我觉得大家已经隔着屏幕感受到我的“气氛”了)

说完带宽,我们再来了解一个浏览器,同域下能并发多少个网络资源请求。这里以谷歌为例。

图片来源于网络

你要问我同域是啥,去查。查了看不懂,找前端工作人猿。

准备小本本啦,干货来了。

雪碧图(不是我们喝的雪碧奥,前面说了这个是web前端的)

雪碧图有啥用?一张雪碧图里,图标多的情况,会有十几个小图标。我们把这些图都想成网页里的单图加载,架设首页需要加载一百多个这样的小图标,需要保证同时加载完成,谷歌浏览器并发请求是6个,就问你怕不怕……(当然啦,也不会有这么夸张,夸张一点让你认识到事态的严重性)

减少HTTP请求——加缓存

减少这个请求有用吗?受服务器带宽大小浏览器并发数的限制,某一时刻多人同时频繁地发起大量的并发请求,带宽不足,自然而然就会形容拥堵的情况。当然啦,负载均衡和启动多进程能够化解这个问题。

路由异步加载

异步加载的目的,就是为了减少首次加载的静态资源不平衡,在其他页面不需要资源的情况下,就无需在首页加载。静态资源太小,网速慢,加载也会很慢;但是太大,服务器带宽小的话,也会影响响应时间

图片资源转CDN(敲黑板啦,彩色笔拿出来)

这一目的就是为了合理分配网站主域的资源,像我们前面说的谷歌浏览器并发数是6个,你如果把图片放在主域下面,会出现网络资源被抢占的情况。一般大型网站的图片,都放在多个域下面。

在单位时间内,传输信息是有限的。压缩就是缩小体积,自然而然传起来就快了。

目前我的看法是这些,大家有不同看法的可以一起讨论。说错的也欢迎大家指正,一起加油。

查看全文
大家还看了
也许喜欢
更多游戏

Copyright © 2024 妖气游戏网 www.17u1u.com All Rights Reserved