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

版权声明:如果喜欢,就收藏吧 O(∩_∩)O~ https://blog.csdn.net/caseywei https://blog.csdn.net/caseywei/article/details/89841574

缓存分类

强缓存 (一般不会向服务器发起请求)

** 服务端通过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字段的版本号字符与文件的版本号字符对比,如果没有变化就告诉客户端可以使用缓存。
属性值:能标识请求文件的字符串
总结一下流程图:

猜你喜欢

转载自blog.csdn.net/caseywei/article/details/89841574