几个方面：

1.客户端到服务器要缩短时间
2.服务器处理数据要缩短时间
3.客户端拿到数据展示页面的时间

性能优化处理主要的两个因素更快的网络通信、更高的数据处理

更快的网络通信

1. CDN(服务器通信层面)【全局负载均衡/缓存系统】

- 负载均衡：

会找最佳结点，但是不一定是最近的，比如，北京访问网址，北京的结点有10000在访问，但是天津的结点有10人访问，那负载均衡就会用天津的结点

- 缓存系统：【命中率、回源率】

命中率越高越好，回源率越低越好【回源就是去源站拉取】

2. 请求次数(服务器通信层面)【针对http1.0 http2.0已经优化了这个问题】

http1的时候，请求发起一次结束之后就断开链接了，请求资源过多的话，就经常发起链接断开链接，浪费时间，但是http2.0有改进，后面再讲，浏览器最多同时并发6-8个http请求，Chrome6个，Firefox是8个，

- 资源合并-雪碧图

- 域名分片-多域名-多加二级域名

多个二级域名就可以多个并发6-8次了，2个二级域名就12-16次了

3. 缓存【数据传输层面】

- 强缓存

（客户端 <-- 服务端） cache-control:maxage:600 【可以缓存多长时间】

（客户端 <-- 服务端） expires: mon 14 sep 2022 【时间点】

两个同时写，浏览器认识那个用哪个；现在一般都用中间层、nginx控制

- 协商缓存

（客户端 <-- 服务端） last-modified: Mon, 24 Dec 2018 09:49:49 GMT【唯一值】

（客户端 --> 服务端） if-modified-since: Mon, 24 Dec 2018 09:49:49 GMT【一致的话就告诉浏览器你还用你之前那个缓存里面的就行，没变】

（客户端 <-- 服务端） etag: '5c20abbd-e2e8'

（客户端 --> 服务端） if-none-matched: '5c20abbd-e2e8'

成对出现 last-modified服务端发给客户端、if-modified-since服务端发给用户端

4.压缩【数据传输层面】

数据压缩

gzip
全新的br（无损的压缩算法，性能高于gzip20%，但是Chrome支持还行，其他支持的不行，应用广泛度低）

代码文件压缩

开发版 // 代码还看得懂的
线上版 // webpack压缩过的，treeshaking

静态资源

字体图标
去除元数据
缩小尺寸以及分辨率
jpg、webp格式

头与报文

http1 的头部
cookie 数据量

5.HTTP2【通信协议层面】

头部压缩

HPACK压缩算法

二进制帧

http1 是字符传输，http2是二进制帧

帧长度
帧类型
帧标识

链路复用【大学学的，现在才明白】

http1前面不是说需要资源合并是因为小的资源建立断开太多次http链接，浪费时间嘛，原因是http发出去的时候，这个时候链接在，但是服务器处理数据去了，其实没有数据通信，这个时候就是空档，别人还用不了`
http2就是链路复用，你不用的时候就我来用，绝不让他闲着，但是注意不一定是一条链路，可能很多条，哪条空闲就去哪条，是并发的；好处就是，不需要重复的建立连接

性能优化