强缓存和协商缓存

缓存

1. 静态资源访问时，正确设置资源的缓存可以提高用户体验和网站性能
2. 缓存的优点

• 减少不必要的数据传输，节省宽带
• 减少服务器的负担，提高网站性能
• 提高客户端的加载网页速度

3. 缓存的缺点

• 资源如果更新了，客户端端更新不及时会导致用户信息滞后

强缓存和协商缓存

强缓存过期或者不设置(即失效)，才进入协商缓存

强缓存

服务端设置response header的cache-control

1. cache-control: max-age=xxxx, public

• 客户端和代理服务器都可以缓存该资源；
• 在有效期内, 发生请求则读取浏览器的缓存，若触发刷新操作，发起服务器请求
• statu code:200

2. cache-control: max-age=xxxx, private

• 只让客户端可以缓存该资源；代理服务器不缓存
• 在有效期内, 发生请求则读取浏览器的缓存
• statu code:200

3. cache-control: max-age=xxxx, immutable

• 在有效期内, 发生请求则读取浏览器的缓存，若触发刷新操作，不会发起服务器请求
• statu code:200

4. cache-control: no-cache

• 不设置强缓存, 每次请求都回询问服务端

5. cache-control: no-store

• 客户端和服务器都不缓存, 没有进行强缓存和协商缓存, 即不缓存

协商缓存

强制缓存cache-control为过期或者no-cache, 就会进入协商缓存，若cache-control为有效期或no-store则不会进入协商缓存

1. 每次请求返回来 response header 中的 Etag 和 Last-Modified, 在下一次请求在request header中对应的If-none-matched和If-modified-since带上
2. 服务器把请求的和当前文件的Etag和Last Modified进行对比文件是否更新了，先对比Etag，Etag一致后再对比Last Modified.
3. 若更改了就返回新资源，并更新response header的Etag和Last Modified，返回status code 200.
4. 若没有改动，status code返回304，客户端拿浏览器缓存的老资源。
5. 标识字段

• Etag/If-none-match: 每个文件有一个，文件修改时Etag会变化，就是一个文件hash
• Last Modified/If-modified-since: 文件的修改时间, 精确到秒

设置强缓存和协商缓存

1. nodejs

res.setHeader('max-age': '3600 public')
res.setHeader('etag': '5c20abbd-e2e1')
res.setHeader('last-modified': 'Mon, 24 Dec 2018 09:49:50 GMT')

2. nginx配置

location = /index.html {
  add_header Cache-Control "no-cache, no-store"
}

• nginx会自动返回Etag和Last Modified

对于前端项目打包后的index.html文件

• 使用协商缓存，不能使用强缓存，这样客户端才能保证拿到新资源
• 使用协商缓存若返回304，再拿浏览器的缓存的index.html

刷新

• f5 强缓存无效，协商缓存有效
• ctrl + f5 强缓存无效，协商缓存无效