传输加载优化
1. 启用压缩Gzip
我们可以在浏览器的http响应头中 Content-Encoding: gzip字段看出是否开启了Gzip压缩
- 对传输资源进行体积压缩，可高达90%
- 如何配置Nginx启动Gzip
2. 启用Keep Alive
http1.1之后，Keep Alive这个参数是默认开启的。
在浏览器中的Network工具中，瀑布流的Initial connection字段就是http连接时间。也可在http响应头中看到 Connection: keep-alive判断是否开启了keep alive
- 对http的tcp连接进行复用
HTTP资源缓存
http的缓存就是我们常说的强缓存、协商缓存、Service Worker三种
（网上已经有很多相关的知识点了，这边就不一一详细记录。）
1. 强缓存
我们打开许多网站会发现，强缓存有两种缓存策略：
- disk cache（磁盘缓存）
- memory cache（内存缓存）
disk cache一般存储的是css等资源，memory cache一般存储的是脚本、字体、图片资源。
那么这两种存储方案有什么区别：
- memory cache 读写速度比 disk cache 快很多
- memory cache 在页面关闭时会释放掉
为什么css要存在disk cache中？
因为CSS文件加载一次就可渲染出来，我们不会频繁读取它，所以它不适合缓存到内存中，但是js之类的脚本却随时可能会执行。如果脚本在磁盘当中，我们在执行脚本的时候需要从磁盘取到内存中来，这样IO开销就很大了，有可能导致浏览器失去响应
2. 协商缓存这里不叙述
3. Service Worker
Service Worker作用：
- 加速重复访问
- 离线支持
Service Worker注意事项：
- 延长了首屏时间，但页面总加载时间减少
- 兼容性
- 只能在localhost或https下使用
HTTP2的提升
如何查看我们所采用的http版本
在chrome浏览器中的 Network 工具栏中，我们鼠标右击勾选 Protocol 这个选项，就可以看到使用的协议了。
http2的优势
- 二进制传输（安全、压缩效率高）
- 请求响应多路复用
- Server push
（依旧可以在Nginx配置中开启http2）
相较于http1.1的复用不同点：
虽然在http1.1中，我们已经可以复用tcp的链接了，但是每个资源依旧是排列发送的。而http2中，真正做到异步并发请求，不同的资源可以通过一个请求传回给客户端。
Server push
服务端可以直接配置需要推送的资源，不需要主动去请求。如果Network选项卡中的Initiator中显示的是Push，就说明是通过Server push提前推送的资源。
这些推送的资源，浏览器拿到后会直接存储在本地。等需要的时候就直接读取本地存储的资源。
相对于客户端请求来说，优势在于减少了TTFB的过程，减少了请求时间。
http2的限制
- 必须HTTPS下
- 适合较高的请求量
服务端渲染SSR
- 加速首屏渲染
- 利于SEO
vue的预渲染方案
