美文网首页
浏览器强缓存与协商缓存

浏览器强缓存与协商缓存

作者: 老Daaa | 来源:发表于2022-04-13 15:34 被阅读0次

首先缓存的优点:

  1. 减少请求次数
  2. 减少了冗余的数据传输,节省网费
  3. 减少服务器的负担,提升网站性能
  4. 加快了客户端加载网页的速度

强缓存

主要看response headers中Cache-Control的值
Cache-Control取值含义:
private:仅浏览器可以缓存
public:浏览器和代理服务器都可以缓存
max-age=xxx 过期时间(秒)
no-cache:不进行强缓存
no-store:不强缓存也不协商缓存

协商缓存

f2c1faca83514b82885fa5958dfff8bc.png

触发条件:
1、Cache-Control的值为no-cache(不强缓存)
2、max-age 设置的时间导致文件过期了

协商缓存相关规则:

ETag:每个文件都有一个,改动文件就会变(类似md5)
Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符。
Last-Modified:文件修改时间

每次http返回来response headers中都会带ETag和Last-Modefied ,下次请求时在request header就把这两个给带上但是名字有了变化(ETag->If-None-Match,Last-Modified->If-Modified-Since),服务端把带过来的标识与之前的标识进行对比 判断是否更改过了


7602ac469e094e4e8caff6ac1d25f15f.png
f6a72e4c4f834375a8d0079c2254240f.png

协商缓存步骤总结:

请求资源时,把用户本地该资源的 ETag 同时带到服务端,服务端和最新资源做对比。
如果资源没更改,返回304,浏览器读取本地缓存。
如果资源有更改,返回200,返回最新的资源。

如何查看是否命中缓存?

1.从服务器获取新的资源
2.命中强缓存,且资源没过期,直接读取本地缓存(请求成功 文件大小size会显示 from disk cache)
3.命中协商缓存,且资源未更改,读取本地缓存。
注意:协商缓存无论如果,都要向服务端发请求的,只不过,资源未更改时,返回的只是header信息,所以size很小;而资源有更改时,还要返回body数据,所以size会大。

怎么配置资源的缓存规则?

可以有后端服务器配置,也可以在nginx中配置


a00c0fa60acd47d7a472755012533ff1.png 82fe0440e09e4f36ba09a65dd07f7827.png

总结

2c5548e48f6a4d9aa9b1b36ae1cfb57d.png bf0cb32545b64490936e67453436d7c9.png

参考链接:https://blog.csdn.net/Amnesiac666/article/details/121101165

疑问1:max-age时间是怎么来的 从什么时候开始计时
疑问2:为什么是response header中的而不是request header中

相关文章

  • 了解一下浏览器的协商缓存以及nginx如何配置

    强缓存与协商缓存的区别 强缓存:浏览器不与服务端协商直接取浏览器缓存协商缓存:浏览器会先向服务器确认资源的有效性后...

  • 协商缓存和强缓存

    浏览器缓存主要有两类:缓存协商和彻底缓存,也有称之为协商缓存和强缓存 浏览器缓存机制浏览器缓存(Brower Ca...

  • 浏览器缓存机制

    浏览器缓存分为强缓存和协商缓存。 强缓存 浏览器加载资源时,会先根据本地缓存资源 header 中的信息(expi...

  • 快速理解浏览器缓存

    快速理解浏览器缓存知识。 浏览器缓存主要为两类:强缓存、协商缓存。 和缓存相关的HTTP头有6个。 强缓存: Ca...

  • 浏览器缓存

    浏览器缓存分为两种,强缓存和协商缓存。浏览器缓存的流程大致如下: 强缓存 强缓存就是图中第一个判定条件。有两种方式...

  • 浏览器缓存

    强缓存和协商缓存:强缓存优先于协商缓存进行;协商缓存失效,返回200,重新返回资源和缓存标志;协商缓存生效,返回3...

  • http缓存

    http缓存分为强缓存和协商缓存。 ● 每次发起请求,浏览器都会先在浏览器缓存中查找该请求的结果以及缓存标识。● ...

  • 怎么解决页面缓存

    一、我们先来认识一下浏览器缓存 浏览器缓存分为:强缓存和协商缓存。1、强缓存:浏览器加载资源时,第一步先判断它是否...

  • 浏览器缓存详解

    来源于《前端分享》 一、浏览器缓存策略: 1、强缓存 2、协商缓存 强缓存:当浏览器去请求某个文件的时候,服务端就...

  • 浏览器缓存

    浏览器缓存 浏览器处理网页的方式 走到协商缓存会返回 304 走到强缓存会返回 200 合理使用浏览器缓存 页面连...

网友评论

      本文标题:浏览器强缓存与协商缓存

      本文链接:https://www.haomeiwen.com/subject/ocrasrtx.html