标签：control 缓存 协商 cache Etag 客户端
缓存
- 静态资源访问时，正确设置资源的缓存可以提高用户体验和网站性能
- 缓存的优点
- 减少不必要的数据传输，节省宽带
- 减少服务器的负担，提高网站性能
- 提高客户端的加载网页速度
- 缓存的缺点
- 资源如果更新了，客户端端更新不及时会导致用户信息滞后
强缓存和协商缓存
强缓存过期或者不设置(即失效)，才进入协商缓存
强缓存
服务端设置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 强缓存无效，协商缓存无效
标签：control,缓存,协商,cache,Etag,客户端 来源： https://blog.csdn.net/rongmingye/article/details/121774480
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。