任何值得去的地方 都没有捷径
前言
大家好，我是柒八九。今天我们来谈点“屠龙之术”。
网页性能优化，其实是一个捉摸不定的话题。在平时工作中，尤其现在框架盛行的今天，大家常常在写组件的时候就已经将性能优化考虑进去了。
例如：React中的类组件中的shouldComponentUpdate,函数组件中useMemo等。 Vue中computed的计算属性，v-if与v-show的使用场景还有keep-alive保留组件状态并且避免重新渲染。
无论是React还是Vue在设计框架的时候，就考虑到一些优化方案。但是，这些优化方案仅仅是局限在组件内部。而一个页面的组成是由无数个小组件堆砌而成的。所以，在组件内部的优化只是局部小范围的。
如果，继续上升高度，有人会说利用打包工具的按需加载import()也算是一种优化；还有针对页面级别的路由懒加载也是一种页面范围的优化处理。
但是，这些都是一些细节点。要根据不同的项目进行合理利用。同时，一千个人眼中有一千个哈姆雷特，有些优化手段换了场景就不灵了。
所以，今天我们来谈点直击要害的优化角度。从更高的层面(网络通信方向)来分析一下。
时间不早了，干点正事哇。
简明扼要
- 对所有网络通信都有决定性影响的两个方面:延迟和带宽
- 传播延迟/传输延迟/处理延迟/排队延迟的时间总和，就是客户端到服务器的总延迟时间
- 光速与分组在介质中传播速度之比，叫做该介质的折射率
- 延迟中相当大的一部分往往花在了最后几公里
- 一条光纤连接的总带宽，等于每个信道的数据传输速率乘以可复用的信道数
- 用户可用带宽取决于客户端与目标服务器间最低容量连接
- 目标:高带宽和低延迟
面试点：目标:高带宽和低延迟
文章概要
- 速度是关键
- 延迟的构成
- 光速与传播延迟
- 延迟的最后一公里
- 网络核心带宽 VS 网络边缘带宽
- 目标:高带宽和低延迟
1. 速度是关键
对所有网络通信都有决定性影响的两个方面:延迟和带宽。
- 延迟 分组从信息源发送到目的地所需的时间 (单位：ms)
- 带宽 逻辑或物理通信路径最大的吞吐量 (单位：Mbit/s)
2. 延迟的构成
延迟是消息(message)或分组(packet)从起点到终点经历的时间。
延迟主要分为4类。
| 类型 | 解释 |
| 传播延迟 | 消息从发送端到接收端需要的时间 是信号传播距离和速度的函数 传播时间取决于距离和信号通过的媒介 |
| 传输延迟 | 把消息中的所有比特转移到链路中需要的时间 是消息长度和链路速率的函数 传输延迟由传输链路的速率决定，与客户端到服务器的距离无关 |
| 处理延迟 | 处理分组首部、检查位错误及确定分组目标所需的时间 这些检查通常由硬件完成，延迟一般非常短 |
| 排队延迟 | 到来的分组排队等待处理的时间 分组到达的速度超过了接收器的处理能力，分组就要在入站缓冲区排队 |
传播延迟/传输延迟/处理延迟/排队延迟的时间总和，就是客户端到服务器的总延迟时间
发送端与接收端的距离越远，传播时间就越长。
3. 光速与传播延迟
光速是所有能量、物质和信息运动所能达到的最高速度。这个结论给网络分组的传播速度设定了上限。
网络中的分组是通过铜线、光纤等介质传播的，这些介质会导致传播速度变慢。光速与分组在介质中传播速度之比，叫做该介质的折射率。这个值越大，光在该介质中传播的速度就越慢。
不管环境如何变化，速度依旧是刚性需求。 一个2秒内无法打开的web就意味着用户的流失。
Google提出1秒钟完成终端页面首屏的渲染。
| 耗时步骤 | 原因 |
| 1.服务器响应应该小于200ms 2. 尽量少的重定向 3. 尽量少的第一次渲染的请求数 |
网络消耗 |
| 4.避免过多堵塞的JS和CSS的堵塞 5. 给浏览器留200ms的渲染时间 6. 优化我们的JS执行效率和渲染时间 |
JS执行效率和渲染效率 |
4. 延迟的最后一公里
延迟中相当大的一部分往往花在了最后几公里，而不是在横跨大洋或大陆时产生的，这就是所谓的最后一公里问题。
为了让你家或你的办公室接入互联网，本地 ISP 需要在附近安装多个路由收集信号，然后再将信号转发到本地的路由节点。连接类型、路由技术和部署方法五花八门，分组传输中的这前几跳往往要花数十 ms 时间才能到达 ISP 的主路由器。
ISP：全称为Internet Service Provider，即因特网服务提供商，能提供拨号上网 服务、网上浏览、下载文件、收发电子邮件等服务，是网络最终用户进入Internet的入口和桥梁。
在国内就是大家耳熟能详的中国电信/移动/联通。
最后一公里的延迟与提供商、部署方法、网络拓扑，甚至一天中的哪个时段都有很大关系。作为最终用户，如果你想提高自己上网的速度，那选择延迟最短的 ISP 是最关键的。
5. 网络核心带宽 VS 网络边缘带宽
光纤就是一根光导管，比人的头发稍微粗一点，专门用来从一端向另一端传送光信号。金属线则用于传送电信号，但信号损失、电磁干扰较大，同时维护成本也较高。一般长距离的分组传输都是通过光纤完成的。
通过波分复用(WDM，Wavelength-Division Multiplexing)技术，光纤可以同时传输很多不同波长(信道)的光，因而具有明显的带宽优势。
一条光纤连接的总带宽，等于每个信道的数据传输速率乘以可复用的信道数。
构成因特网核心数据路径的骨干或光纤连接，每秒能够移动数百太比特信息。
然而，网络边缘的容量就小得多了，而且很大程度上取决于部署技术，比如拔号连接、 DSL、电缆、各种无线技术、光纤到户，甚至与局域网路由器的性能也有关系。
用户可用带宽取决于客户端与目标服务器间最低容量连接。
后记
分享是一种态度，这篇文章，大部分的篇幅来自于《Web性能权威指南》，算是一个自我学习过程中的一种记录和总结。主要是把自己认为重要的点，都罗列出来。同时，也是为大家节省一下排雷和踩坑的时间。当然，可能由于自己认知能力所限，有些点，没能表达的很好。如果大家想看原文，“墙裂推荐”看原文。
参考资料：
- Web性能权威指南
- 16ms的优化
- Google 性能优化
- ISP
