前端性能优化5:缓存协议
前面所讲的缓存都是我们前端手动操作的缓存，但是在大规模的项目中，手动缓存显得非常的麻烦，我们希望通过一些前后端协商好的策略 进行自动缓存
不同的缓存策略的文件加载所用的时间.png
HTPP Header中控制缓存的属性：
Cache-Control
既可以存在于request header中，也可以存在于reponse header中
- max-age 有效时间，有效期内不会再进行请求
max-age的优先级是高于expires的 - s-maxage
指定的是public的有效时间 - private
- public
- no-cache
会发请求到服务端，然后由服务端去判定浏览器当前的缓存有没有失效 - no- store
配置了这个属性，则代表完全不适用缓存策略
Expires
缓存过期时间，用来指定资源到期的时间，是服务器端的具体的时间点
告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求
expires是http1.0的标准，当有1.1标准的max-age属性的时候，expires自动失效
Cache-Control和Expires豆属于强缓存，可以不经过服务端的同意，直接从客户端缓存拿数据。
但是服务端的文件的更新是无法去完全预料的。
Last-Modified / If-Modified-Since
基于客户端和服务端协商的缓存机制
Last-Modified ———— response header
If-Modified-Since ———— request
需要与cache-control共同使用
客户端在请求头中添加If-Modified-Since属性，属性值是一个时间，询问服务端此文件从属性值时间开始是否有更新，如果没有更新的话，服务端返回一个状态码304，告诉客户端可以直接使用缓存中的数据。
如果服务端发现文件已更新，就会把文件返回来的同时在返回头中添加上文件的最新更新时间Last-Modified属性，此时的状态码是200
但Last-Modified也有一些缺点
1.某些服务端不能获取精准的修改时间
2.文件修改时间改了，但是文件内容却没有变
接下来讲能够克服上述缺点的：
Etag / If-None-Match
文件内容的hash值
etag ———— response header
if-none-match ———— request header
需要与cache-control共同使用
不以更新时间为文件是否需要更新的依据，而是以hash值
分级缓存策略.png
缓存匹配流程
- 1.浏览器发送请求前，根据请求头的expires和cache-control判断是否命中（包括是否过期）强缓存策略，如果命中，直接从缓存获取资源，并不会发送请求。如果没有命中，则进入下一步。
- 2.没有命中强缓存规则，浏览器会发送请求，根据请求头的last-modified和etag判断是否命中协商缓存，如果命中，直接从缓存获取资源。如果没有命中，则进入下一步。
-
如果前两步都没有命中，则直接从服务端获取资源。
image.png
from disk cache和from memory cache
Chrome的网络请求的Size会出现三种情况from disk cache(磁盘缓存)、from memory cache(内存缓存)、以及资源大小数值。
| 状态 | 类型 | 说明 |
|---|---|---|
| 200 | form memory cache | 不请求网络资源，资源在内存当中，一般脚本、字体、图片会存在内存当中 |
| 200 | form disk ceche | 不请求网络资源，在磁盘当中，一般非脚本会存在内存当中，如css等 |
| 200 | 资源大小数值 | 从服务器下载最新资源 |
| 304 | 报文大小 | 请求服务端发现资源没有更新，使用本地资源 |
浏览器读取缓存的顺序为memory –> disk。
访问网页的三种情况
- 1.打开网页，地址栏输入地址： 查找 disk cache 中是否有匹配。如有则使用；如没有则发送网络请求。
- 2.普通刷新 (F5)：因为 TAB 并没有关闭，因此 memory cache 是可用的，会被优先使用(如果匹配的话)。其次才是 disk cache。
- 3.强制刷新 (Ctrl + F5)：浏览器不使用缓存，因此发送的请求头部均带有 Cache-control:no-cache(为了兼容，还带了 Pragma:no-cache),服务器直接返回 200 和最新内容。
服务端性能优化
vue渲染面临的问题是什么
下载vue.js
执行vuejs代码
生成html页面
以前没有前端框架的时候，用jsp/php在服务器端进行数据的填充，发送给客户端就是已经填充数据的html
使用jquery异步加载数据
使用react和vue等前端框架
怎么在vue这个层面对性能进行提升
多层次的优化方案
1.构建层模板编译
2.数据无关的prerender的方式
3.服务端渲染SSR
Vue的Server Side Rendering流程图.png
