浏览器资源缓存策略

187 阅读3分钟

「这是我参与11月更文挑战的第14天,活动详情查看:2021最后一次更文挑战」。

什么是缓存

Http请求中,浏览器会对上一次请求的静态资源做一个缓存,再次请求时,文件没有过期则直接使用本地缓存。达到减缓服务器压力,节省带宽,提高页面响应速度的效果。但有时候缓存下来的文件可能不是服务器上最新的,这个时候需要有缓存策略去知道什么时候该情趣最新文件,什么时候直接读取浏览器缓存就可以了。

Http的缓存机制由: Etag, Expires , Cache-control 等头部字段来控制,主要分为强缓存跟协商缓存。

强缓存

强缓存指的是不发起任何请求直接从本地读取资源,请求返回 status 200 ,status 200 分两种

  • status 200 (from memory cache), 即资源是被缓存在浏览器内存中的,关闭浏览器资源会被释放,下次请求则不会命中缓存

  • status 200 (from disk cache), 即资源是被浏览器缓存在磁盘中的,重启浏览器后只要缓存的资源还没有过期且命中了缓存策略,则可以继续使用缓存。

主要依靠两个请求头:ExpiresCache-control

  • Expires 缓存过期的具体时间,GMT时间格式;

  • Cache-control 具有不同值,其中:

    • max-age越是表示允许缓存资源的时长,单位为秒,且优先级大于 Expires;

    • s-maxage:针对代理服务器的max-age;

    • no-cache: 强制协商缓存;

    • no-store: 禁止本地缓存;

    • public: 可以被任何请求方缓存;

    • private: 只能被个人用户缓存,不能被例如代理服务器缓存。

协商缓存

协商缓存指的是,“与服务器商量要不要更新缓存”,当没有命中强缓存,浏览器会带上缓存资源的信息发送请求到服务器,服务器会判断资源是否有更新,有更新则直接返回资源如果没有更新则服务器返回304(Not Modified),还是访问本地缓存。

主要依靠两组头部实现:

Last-Modified/Last-Modified-Since

属于HTTP1.0 的头部,精度为秒

  • Last-Modified 第一次请求资源时服务器返回的资源最后修改时间;

  • 协商请求时,如果第一次请求资源有返回Last-Modified 字段,则浏览器会带上Last-Modified的值存在Last-Modified-Since里提交给服务器去判断文件是否更新。

Etag/If-None-Match

Etag会比Last-Modified精度更高,且优先级更高

  • Etag是HTTP1.1 属性,是一段文件的Hash值,用于标识文件,对比文件是否更新。

  • If-None-Match 则是协商请求时,浏览器会把缓存资源的Etag值存在If-None-Match 头里发送给服务器。

参考

轻松学会HTTP缓存(强缓存,协商缓存) segmentfault.com/a/119000002…

http面试必会的:强制缓存和协商缓存      juejin.cn/post/684490…