http緩存方式簡介
- 強緩存:強緩存使用Expires(老版本)和cache-control(新版本)來控制
- 協(xié)商緩存:協(xié)商緩存使用if-Modified-Since 與 Last-Modified配對、If-None-Match與Etag配對來控制
緩存機制
- 優(yōu)先級
- 強緩存:cache-control -> expires
- 協(xié)商緩存:Etag > Last-Modified
- 參數(shù)介紹
- Expires:服務器設置資源過期時間,在http/1.1中無效
- Last-Modified:資源最新修改時間
- Etag:唯一標識,Etag優(yōu)先級高于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
案例
強緩存文章來源地址http://www.zghlxwxcb.cn/news/detail-450925.html
1. Expires老版本的方式:
// 在響應頭中設置
// toUTCString根據(jù)世界時 (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相同,則走協(xié)商緩存
- 第一次
- 第二次
- 第一次
- 否則,不走協(xié)商緩存
- 第一次
- 第二次
- 第一次
- 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時間
文章來源:http://www.zghlxwxcb.cn/news/detail-450925.html
到了這里,關于http強緩存和協(xié)商緩存的介紹和應用案例,簡介明了的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網(wǎng)!