本篇篇幅不长，主要是讲清楚两件小事。这两件小事，基本上涵盖80%网页性能优化体系（不敢说全部），让大家看到一些现象后面的本质。
前言
事情都要从我买的那个狗屁服务器说起，便宜是挺便宜的，99 块，但是只有 1 M 的带宽。
今天给大家扯一个 网络带宽 （以下简称“带宽”）的知识，你可能觉得我做前端的，关我屁事。但是这件屁事，总有一天会跟你产生微妙 🤏 的关系。本文主旨是通过讲解 带宽 的知识，结合浏览器并发请求数有限 特性 ，来分析那些如雪碧图、减少 HTTP 请求、路由异步加载、图片转 CDN、压缩静态资源等等等等前端优化性能的做法，做这些事情最终是为了什么。
带宽简介
我想着自己硬扯，可能不够准确，于是我去搜了百度看看有什么好的定义。嚯喔～～～唧唧歪歪长篇大论 。这里我通过百科里的一个例子简单总结一下。
“把城市交通道路比作网络，道路会出现单车道、双车道、四车道、八车道。你开着一辆车，在路上行驶，途径单车道、双车道、四车道、把车道，最后到达目的地。”
上述场景中出现了几个关键词：
- 城市交通： 网络
- 整个车道的宽度： 带宽
- 单车道、双车道、四车道、八车道： 带宽大小
- 你开的车子： 网络传输的信息
而 带宽 是用来传输信息的，信息肯定有一个具体的量值，我们称它为 数字信息流 。 数字信息流 的单位是 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 的网速呢（直接闭气，中国移动你给我出来）。
后来发现，误会一场 😂 。上面一顿算，只是理想状态下的，而现实是，受“用户计算机性能、网络设备质量、资源使用情况、网络高峰期、网站服务能力、线路损耗，信号衰减”等多种因素的影响，会造成实际网速并没有理想的那么快。
一段操作猛如虎，腚睛一算，我可怜的 1 M 带宽服务器，传输数据的速度是 128 KB/s（理想状态下）。
浏览器并发请求的限制
说完带宽，我们来了解一下，一个浏览器，同域 下能并发多少个网络资源请求。 我们以谷歌浏览器为例子，是 6 个。我找到一份 2008 年的权威数据😱（惊了）：
图片来自：地址
注意我上面说了一个关键词 同域 下的并发数。你要问我 同域 是什么，你可以放弃前端了（不会还不去查！！）。
开始点题
了解完上面两个知识点，我就开始点题了。
雪碧图
为什么要做雪碧图？一张雪碧图里，图标多的情况下，有几十个小图标。如果把这些图标都换成单图加载，假设首页需要 100 个这样的小图标，同时加载 100 张图片。谷歌浏览器并发请求是 6 个，你说炸不炸（当然没有这么夸张，我就是说得夸张一点，吓唬吓唬你）。
减少 HTTP 请求-加缓存等
为什么要减少 HTTP 请求？还不是 服务器带宽大小 和 浏览器并发数 摆在那儿。如果频繁的并发请求，在某一时刻同时有多人完成大量的并发请求，服务器带宽不大（车道很窄）的情况下，会造成交通拥堵现象。（当然，负载均衡和启动多进程能解决这个问题）。
路由异步加载
异步加载的目的，就是减少首次加载的静态资源大小，在不需要其他页面资源的情况下，就无需在首页加载。而减少静态资源的体积的目的，一个是网速慢，加载会很慢；另一个是静态资源太大，服务器带宽小的情况下，响应时间也会变长。
图片资源转 CDN
图片资源转 CDN，目的就是不和网站 主域 抢资源。前面提到了谷歌浏览器 同域 下的并发请求数是 6 个，敲黑板！！！你把图片资源放在 主域 下，它会去抢网络资源啊。所以你会看到很多网站，就比如掘金，会把图片放在另外一个域下的 CDN 链接。甚至还会放在多个不同的域下。
压缩静态资源和分包
压缩静态资源和分包操作，就是考虑到服务器 带宽 传输信息的量在单位时间内是有限的，所以压缩完之后，单次请求的资源体积变小了，自然速度就会变快。
还有很多，我不举了（别瞎想），去掘金搜索框内输入“性能优化”，多如牛毛。
总结
网页性能优化博大精深，我也只是站在我的角度去分析这个问题，有更深见解的大佬，可以在评论区指教一二，不要阴阳怪气的那种，如果说了阴阳怪气的话，我特么直接怼你（逃）。
