前言
在工作中,前端代码打包之后的静态需要部署到服务器上,这时就需要对一些静态资源做一些运维配置,其中缓存是必不可少的。
缓存的优点:
- 减少了不必要的数据传输
- 减轻了对服务器的压力,提升系统的性能
- 加快了用户加载网页的速度
- 提升了用户体验
缓存的缺点:
- 无法保证缓存数据与数据库中的数据保持同步
- 可能会出现缓存失效
一、强缓存
强缓存其实就是强制缓存的意思。当浏览器去请求某个文件的时候,服务端就在respone header里面对该文件做了缓存配置。缓存的时间、缓存类型都由服务端控制,具体表现为:
respone header 的cache-control,常见的设置是max-age public private no-cache no-store等
强制缓存主要取决于两个字段 Expires 和 Cache-Control 中的 max-age 字段, 在
在的情况下, 其流程如下图所示
由图可知,当强制缓存中的两个字段同时存在的时候,Cache-Control中的max-age优先级要高,只有当Cache-Control失效时才会校验Expires字段。
强缓存总结
- cache-control: max-age=xxxx,public
max-age:表示缓存的时间(有效期)
public:表示客户端和代理服务器都可以缓存该资源;但是,当用户重新刷新页面时,就会重新 发送请求,获取资源 - cache-control: max-age=xxxx,private
private:表示只让客户端可以缓存该资源;代理服务器不缓存 - cache-control: max-age=xxxx,immutable
immutable:表示即使用户重新刷新页面,也不会重新发送请求,还是直接读取缓存 - cache-control: no-cache
no-cache:表示不走强制缓存,但可以走协商缓存 - cache-control: no-store
no-store:表示不走缓存
二、协商缓存
当强制缓存时间过期后,这是客户端就会去请求服务器,在请求服务器的过程中可以设置协商缓存。
协商缓存主要由 ETag 和 Last-Modified 两个字段来实现
-
ETag 是一个用于映射 web 资源的映射 token,具有唯一性
-
Last-Modified 则通常是文件最后更新的日期时间戳
协商缓存的工作流程如下图所示:
- 浏览器首次向服务器请求数据时, 服务器正常返回数据,同时在响应头中放入 ETag 和 Last-Modified 两个新字段
- 浏览器第二次向服务器请求数据时, 浏览器会自动地在请求头附上 If-None-Match 和 If-Modified-Since 两个字段(分别对应的是 ETag 和 Last-Modified 的值,主要校验两者是否相等), 然后由服务器端进行校验, 校验通过的话(表明数据有效), 服务器会直接返回 状态码 304 ,且不携带响应体的报文段, 这相当于告诉浏览器:当前缓存有效, 可以直接使用! 校验失败则会和首次请求一样, 返回状态码为200且携带数据响应体的报文段, 同时这个响应头会带上新的ETag 和Last-Modified, 为下一次协商缓存做好铺垫
总结
- 强制缓存发生在浏览器端, 协商缓存发生在服务器端
- 强制缓存在浏览器强制刷新的情况下不会生效, 而协商缓存则不受影响。
- 强制缓存返回的报文状态码为 200, 协商缓存返回的报文状态码为 304