前端静态资源如何实现缓存

缓存分类

强缓存 （一般不会向服务器发起请求）

** 服务端通过Cache-control(http1.1) Expires(http1.0)字段设置, Cache-control优先级高于Expires**

Cache-control 常用属性值：

private: 私有缓存设备（浏览器）
public: 公有缓存设备（cdn ）
max-age: 时间段，指定缓存最大有效时间,秒为单位如（360000） 在private设备中取资源,状态码200
s-maxAge: 时间段，指定缓存最大有效时间,秒为单位如（360000） 在public设备中取资源 同时设置的时候优先级高于max-age.状态码304
no-cache: 会把强缓存机制改为协商缓存，会像服务端发起请求，资源是否取缓存取决于服务端响应头字段（last-modifed等）
no-store: 该资源不会读取缓存

Expires: 属性值为通常为UTC时间格式

协商缓存 （会向服务端发起请求，向服务端询问是否可以使用缓存）

对应的http header字段 Last-modifed, Etag

Last-modifed

原理：通过读取文件最后修改日期和请求头中'if-modified-since'做比较，如果相等的话就返回304，客户端就可以使用缓存文件，如果不相等就返回200和最新的文件，同时响应头加上'Last-Modifed'字段。
属性值：UTC格式的时间

Etag （优先级高于Last-modifed）

原理：一般使用文件的版本号为属性值，通过对比请求头中的if-none-match字段的版本号字符与文件的版本号字符对比，如果没有变化就告诉客户端可以使用缓存。
属性值：能标识请求文件的字符串
总结一下流程图：