前端性能优化（一）

网络请求过程示意图：

网络通信的过程示意图：

1. 发送请求前，要确定IP地址：1.本地有ip地址，2.本地无ip地址，没有ip要求dns服务器上解析出来ip地址
2. 三次握手，建立链接
3. 发送请求
4. 四次挥手，关闭链接

寻找能够优化的地方：

• 客户端请求的发送时间：更快
• 服务器接收到请求后，处理请求的时间（找数据...）：更快
• 服务端响应数据发送给客户端的时间：更快
• 客户端拿到数据后渲染成页面的时间：更快

那么总结起来就是两个部分：

1. 更快的网络通信
2. 更高效的数据处理

具体实现性能优化的手段：

1. DNS（全局的负载均衡+缓存系统）

原理：建立了多个服务器，其中有一台主服务器，主服务器会挑选一个最佳（如：离你最近/负载情况较好）的服务器给你响应请求，以达到提升速度的目的。

全局的负载均衡：如果有一台服务器请求的人数过多，而其他的较远服务器空闲，那么可能会优先使用空闲的服务器响应数据。

缓存系统

• 命中率

除主服务器外，其他的服务器会定时向主服务器同步数据，那么可能当前请求的服务器没有所需要的资源，那么则说命中率低。

• 回源率

那如果服务器没有需要的数据，就会去主服务器去同步数据，那么就说回源率高。

2. 资源合并（雪碧图）不推荐用！

每一个发送请求结束之后，建立的链接就会被断开，那么再次链接是比较耗时的，所以尽量减少发送的次数。

3. 域名分片（多域名）不推荐用！

• 关于并发请求
  标准：规定同一个域名只能同时并发2个请求。但是浏览器实现的时候并没有按照标准去做，现在浏览器的并发请求的个数为6-8个，其中chrome为6个。后面标准就被取消了。
  那么就可以对域名进行分片，也就是可以建立二级域名。

4. 数据传输层面-缓存（没有请求的请求，一定是最快的）（一般是前端的中间层去实现）

强缓存

协商缓存

会多一个字段，目的是用来对比数据是否发生了改变，改变就重传

5. 数据传输层面-压缩

• 传输更小的数据，需求的时间更短，br目前只有chrome支持
• webpack:treeshaking...
• 用字体图标替代图片，元数据与图片的显示无关，但是比较占用内存
• http1的头部有很多数据，http2头部会压缩。

• 通过存储一张表，减少发送过程中的数据大小，只需要发送一个标志的字段，转为去表中查询相应的数据。

• 对数据流的形式进行了更改

• 链接已经建立，但没有使用（可能在处理数据...），那么就是一个浪费，可以让其他的请求去使用这一个链路。