第一篇讲了 强缓存和协商缓存发生的时间顺序,
这里抛出一个问题,强缓存与协商缓存什么关系?
强缓存和协商缓存
浏览器缓存是浏览器将用户请求过的静态资源存储到电脑本地磁盘中,当再次访问时,就可以直接从本地缓存中加载而不需要去向服务器请求了。但是缓存也有缺点,如果服务端资源更新了,客户端没有强制刷新的情况下,看到的内容还是旧的。所以,前端需要根据项目中各个资源的实际情况,做出合理的缓存策略。这就出现了强缓存和协商缓存。
强缓存: 通过http的response header中的Cache-Control和Expire两个字段控制。
主要看Cache-Control:
private:仅浏览器可以缓存
public:浏览器和代理服务器都可以缓存
max-age=xxx:过期时间
no-cache:不进行强缓存
no-store:不强缓存,也不协商缓存
强缓存步骤:1,第一次请求文件时,缓存中没有该信息,直接请求服务器。
2,服务器返回请求的文件,并且http response header中cache-control为max-age=xxx
3,再次请求该文件时,判断是否过期,如果没有过期,直接读取本地缓存,如果已经过期了,则进行协商缓存。
协商缓存:它的触发条件有两点、
第一点是 Cache-Control 的值为 no-cache,则会促发协商缓存。
第二点是 max-age 过期了,触发协商缓存。
后端需要怎么设置
以nodejs为例,如果需要浏览器强缓存,可以这样设置:
res.setHeader('Cache-Control', 'public, max-age=xxx');
如果需要协商缓存,则可以这样设置:
res.setHeader('Cache-Control', 'public, max-age=0'); res.setHeader('Last-Modified', xxx); res.setHeader('ETag', xxx);