带宽、浏览器同域并发数、性能优化

• 带宽简介

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

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

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

而 带宽 是用来传输信息的，信息肯定有一个具体的量值，我们称它为 数字信息流 。 数字信息流 的单位是 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 * 2400) K b/s = (100 * 2400 / 8) KB/s = 12800 KB/s = 12.5 M/s

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

• 浏览器同域并发数

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

图片来自：地址

• 性能优化

雪碧图

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

减少 HTTP 请求-加缓存等

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

路由异步加载

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

图片资源转 CDN

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

压缩静态资源和分包

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

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