http缓存方式简介
- 强缓存:强缓存使用Expires(老版本)和cache-control(新版本)来控制
- 协商缓存:协商缓存使用if-Modified-Since 与 Last-Modified配对、If-None-Match与Etag配对来控制
缓存机制
- 优先级
- 强缓存:cache-control -> expires
- 协商缓存:Etag > Last-Modified
- 参数介绍
- Expires:服务器设置资源过期时间,在http/1.1中无效
- Last-Modified:资源最新修改时间
- Etag:唯一标识,Etag优先级高于Last-Modified
- Cache-Control
- private // 私人的,
- no-store,
- no-cache,
- max-age=0 // 过期时间,单位秒
- must-revalidate,
- proxy-revalidate
- Cache-Control的mdn地址:https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
案例
强缓存文章来源地址https://www.toymoban.com/news/detail-450925.html
1. Expires老版本的方式:
// 在响应头中设置
// toUTCString根据世界时 (UTC) 把 Date 对象转换为字符串:Mon, 15 May 2023 01:04:13 GMT
res.setHeader('Expires', new Date('2023-5-15 12:00:00').toUTCString())
2. cache-control新版本的方式:
// 设置响应头
res.setHeader('Cache-Control', 'max-age=30')
- 设置了强缓存之后请求:
- 到期后就不会走强缓存
3.Etag和If-None-Match
- 默认情况下,浏览器会设置If-None-Match为上一次返回的Etag
- 如果If-None-Match和Etag相同,则走协商缓存
- 第一次
- 第二次
- 第一次
- 否则,不走协商缓存
- 第一次
- 第二次
- 第一次
- Last-Modified和If-Modified-Since
- 后端配置
// 后端设置Last-modified res.setHeader('last-modified', new Date('2023-5-16 12:00:00').toUTCString())
- 第一次请求
- 第二次请求时,浏览器的If-Modified-Since会自动携带上上一次请求的:Last-Modified时间
文章来源:https://www.toymoban.com/news/detail-450925.html
到了这里,关于http强缓存和协商缓存的介绍和应用案例,简介明了的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!