阅读 6404

换一个角度分析,网页性能优化

本篇篇幅不长,主要是讲清楚两件小事。这两件小事,基本上涵盖80%网页性能优化体系(不敢说全部),让大家看到一些现象后面的本质。

前言

事情都要从我买的那个狗屁服务器说起,便宜是挺便宜的,99 块,但是只有 1 M 的带宽。

image.png

今天给大家扯一个 网络带宽 (以下简称“带宽”)的知识,你可能觉得我做前端的,关我屁事。但是这件屁事,总有一天会跟你产生微妙 🤏 的关系。本文主旨是通过讲解 带宽 的知识,结合浏览器并发请求数有限 特性 ,来分析那些如雪碧图、减少 HTTP 请求、路由异步加载、图片转 CDN、压缩静态资源等等等等前端优化性能的做法,做这些事情最终是为了什么。

带宽简介

我想着自己硬扯,可能不够准确,于是我去搜了百度看看有什么好的定义。嚯喔~~~唧唧歪歪长篇大论 。这里我通过百科里的一个例子简单总结一下。

image.png

“把城市交通道路比作网络,道路会出现单车道、双车道、四车道、八车道。你开着一辆车,在路上行驶,途径单车道、双车道、四车道、把车道,最后到达目的地。”

上述场景中出现了几个关键词:

  • 城市交通: 网络
  • 整个车道的宽度: 带宽
  • 单车道、双车道、四车道、八车道: 带宽大小
  • 你开的车子: 网络传输的信息

带宽 是用来传输信息的,信息肯定有一个具体的量值,我们称它为 数字信息流 。 数字信息流 的单位是 bit (比特),时间单位是 s (秒),所以描述 带宽 的单位是 bit/s (比特/秒)。想象一下每秒 1 bit/s 的下载速度,是不是要亲妈爆炸 💥 。现在的电信宽带上网,速度在 512 K bit/s (千比特每秒) 至 10 M bit/s (兆比特每秒) 之间。以太网就更快了,速度在 10 M bit/s (兆比特每秒) 以上。

KB 和 Kb 实际上是不一样,很多资料都没有严格区别,实际上这是不严谨的。大写 B 和小写 b 不同,大写 B 代表 Byte,字节;小写 b 代表 bit,比特。1 B = 8 b

也就是说我们平时办理的 100 M宽带,换算一下的话就是:

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

吹牛逼呢,我家办理的就是 100 M 的宽带,我咋没发现有 12.5 MB/s 的网速呢(直接闭气,中国移动你给我出来)。

image.png

后来发现,误会一场 😂 。上面一顿算,只是理想状态下的,而现实是,受“用户计算机性能、网络设备质量、资源使用情况、网络高峰期、网站服务能力、线路损耗,信号衰减”等多种因素的影响,会造成实际网速并没有理想的那么快。

一段操作猛如虎,腚睛一算,我可怜的 1 M 带宽服务器,传输数据的速度是 128 KB/s(理想状态下)。

image.png

浏览器并发请求的限制

说完带宽,我们来了解一下,一个浏览器,同域 下能并发多少个网络资源请求。 我们以谷歌浏览器为例子,是 6 个。我找到一份 2008 年的权威数据😱(惊了):

image.png

图片来自:地址

注意我上面说了一个关键词 同域 下的并发数。你要问我 同域 是什么,你可以放弃前端了(不会还不去查!!)。

开始点题

了解完上面两个知识点,我就开始点题了。

雪碧图

为什么要做雪碧图?一张雪碧图里,图标多的情况下,有几十个小图标。如果把这些图标都换成单图加载,假设首页需要 100 个这样的小图标,同时加载 100 张图片。谷歌浏览器并发请求是 6 个,你说炸不炸(当然没有这么夸张,我就是说得夸张一点,吓唬吓唬你)。

减少 HTTP 请求-加缓存等

为什么要减少 HTTP 请求?还不是 服务器带宽大小 和 浏览器并发数 摆在那儿。如果频繁的并发请求,在某一时刻同时有多人完成大量的并发请求,服务器带宽不大(车道很窄)的情况下,会造成交通拥堵现象。(当然,负载均衡和启动多进程能解决这个问题)。

路由异步加载

异步加载的目的,就是减少首次加载的静态资源大小,在不需要其他页面资源的情况下,就无需在首页加载。而减少静态资源的体积的目的,一个是网速慢,加载会很慢;另一个是静态资源太大,服务器带宽小的情况下,响应时间也会变长。

图片资源转 CDN

图片资源转 CDN,目的就是不和网站 主域 抢资源。前面提到了谷歌浏览器 同域 下的并发请求数是 6 个,敲黑板!!!你把图片资源放在 主域 下,它会去抢网络资源啊。所以你会看到很多网站,就比如掘金,会把图片放在另外一个域下的 CDN 链接。甚至还会放在多个不同的域下。

image.png

image.png

压缩静态资源和分包

压缩静态资源和分包操作,就是考虑到服务器 带宽 传输信息的量在单位时间内是有限的,所以压缩完之后,单次请求的资源体积变小了,自然速度就会变快。

还有很多,我不举了(别瞎想),去掘金搜索框内输入“性能优化”,多如牛毛。

总结

网页性能优化博大精深,我也只是站在我的角度去分析这个问题,有更深见解的大佬,可以在评论区指教一二,不要阴阳怪气的那种,如果说了阴阳怪气的话,我特么直接怼你(逃)。

文章分类
前端
文章标签