缓存
- 静态资源访问时，正确设置资源的缓存可以提高用户体验和网站性能
- 缓存的优点
- 减少不必要的数据传输，节省宽带
- 减少服务器的负担，提高网站性能
- 提高客户端的加载网页速度
- 缓存的缺点
- 资源如果更新了，客户端端更新不及时会导致用户信息滞后
强缓存和协商缓存
强缓存过期或者不设置(即失效)，才进入协商缓存
强缓存
服务端设置response header的cache-control
- cache-control: max-age=xxxx, public
- 客户端和代理服务器都可以缓存该资源；
- 在有效期内, 发生请求则读取浏览器的缓存，若触发刷新操作，发起服务器请求
- statu code:200
- cache-control: max-age=xxxx, private
- 只让客户端可以缓存该资源；代理服务器不缓存
- 在有效期内, 发生请求则读取浏览器的缓存
- statu code:200
- cache-control: max-age=xxxx, immutable
- 在有效期内, 发生请求则读取浏览器的缓存，若触发刷新操作，不会发起服务器请求
- statu code:200
- cache-control: no-cache
- cache-control: no-store
客户端和服务器都不缓存, 没有进行强缓存和协商缓存, 即不缓存
协商缓存
强制缓存cache-control为过期或者no-store, 就会进入协商缓存，若cache-control为有效期或no-store则不会进入协商缓存
- 每次请求返回来 response header 中的 Etag 和 Last-Modified, 在下一次请求在request header中对应的If-none-matched和If-modified-since带上
- 服务器把请求的和当前文件的Etag和Last Modified进行对比文件是否更新了，先对比Etag，Etag一致后再对比Last Modified.
- 若更改了就返回新资源，并更新response header的Etag和Last Modified，返回status code 200.
- 若没有改动，status code返回304，客户端拿浏览器缓存的老资源。
- 标识字段
- Etag/If-none-match: 每个文件有一个，文件修改时Etag会变化，就是一个文件hash
- Last Modified/If-modified-since: 文件的修改时间, 精确到秒
设置强缓存和协商缓存
- nodejs
res.setHeader('max-age': '3600 public')
res.setHeader('etag': '5c20abbd-e2e1')
res.setHeader('last-modified': 'Mon, 24 Dec 2018 09:49:50 GMT')
- nginx配置
location = /index.html {
add_header Cache-Control "no-cache, no-store"
}
- nginx会自动返回Etag和Last Modified
对于前端项目打包后的index.html文件
- 使用协商缓存，不能使用强缓存，这样客户端才能保证拿到新资源
- 使用协商缓存若返回304，再拿浏览器的缓存的index.html
刷新
- f5 强缓存无效，协商缓存有效
- ctrl + f5 强缓存无效，协商缓存无效
|