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

本篇篇幅不长，主要是讲清楚两件小事。这两件小事，基本上涵盖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 连接。甚至还会放在多个不一样的域下。

压缩静态资源和分包

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

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

总结

网页性能优化博大精深，我也只是站在个人角度去分析这个问题，有更深看法的大佬，能够在评论区指教一二，不要阴阳怪气的那种，若是说了阴阳怪气的话，我特么直接怼你（逃）。