美文网首页
浏览器的缓存机制

浏览器的缓存机制

作者: McDu | 来源:发表于2018-03-18 14:59 被阅读9次

缓存作用:

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

浏览器第一次请求

image

协商策略:

  1. 是否缓存 Expires,Cache-Control
  2. 缓存时间
  3. Etag
  4. Last-Modified
请求文件最近有修改吗,返回最后修改时间 statusCode:200 第一次请求资源,服务端返回 Etag,因为 none match 如果文件未变化,请求后状态码变为304

浏览器第二次请求

1. 通过 Last-Modified 来判断缓存是否可用

  • Last-Modified: 响应时告诉客户端资源的最后修改时间
  • If-Modified-Since: 当资源过期时( Cache-Control: max-age 过期),发现资源具有 Last-Modified 声明,则再次向服务器请求时带上 Last-Modified

  • 服务器收到请求后发现请求头里有 If-Modified-Since,则与被请求资源的最后修改时间做对比,如果最后修改时间较新,说明资源又被修改过,响应最新的资源并返回 200状态码
  • 如果最后修改时间和 If-Modified-Since 一样,说明资源没有修改,返回 304状态码 并告知浏览器继续使用所保存的缓存文件。

最后修改时间存在的问题

  1. 某些服务器不能精确得到文件的最后修改时间,这样就无法通过最后修改时间来判断文件是否更新
  2. 某些文件的修改非常频繁,在秒一下时间里进行修改,比如股票,Last-Modified 只能精确到秒
  3. 一些文件最后修改时间变了,但是内容并未改变
  4. 如果同一个文件位于多个CDN服务器上的时候,内容虽然一样,修改时间不一样

2. 通过 ETag 来判断缓存是否可用

  1. ETagweb服务端 产生的,然后发给浏览器客户端。类似 md5
    无论是长度多少的数据,得到一个固定的字符串长度的值,对原始数据的任何修改都会导致值的不同。实体标签的缩写,根据实体内容生成一段字符串,可以标识资源的状态,当资源发生改变时,ETag 随之发生改变。
  2. 客户端想判断缓存是否可用,可以先获取缓存中的 ETag,然后通过 If-None-Match 发送请求给 Web服务器,询问此缓存是否可用。
  3. 服务器收到请求,将服务器文件中的 ETag 跟请求头中的 If-None-Match 比较,如果值是一样的,说明缓存还是最新的,web服务器 将发送 304状态码
    给客户端表示缓存未修改过,可以使用。如果值不一样,web服务器 将发送该文档的最新版本给浏览器客户端。

3. 如何不发请求

浏览器将文件缓存到 cache目录,第二次请求时浏览器会先检查 cache目录 下是否有该文件,如果有,并且还没有到 expires 设置的时间,以及文件还没有过期,那么,此时浏览器将直接从 cache 目录 中读取文件,不再发送请求.
cache-control(相对时间) 优先级高于 expires(绝对时间)


参考资料:
浏览器的缓存管理
九种浏览器端缓存方法知多少

相关文章

  • 【转载】彻底理解浏览器的Http缓存机制

    转自:彻底理解浏览器的缓存机制(http缓存机制) 概述 浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是...

  • 让我们学习了解浏览器的缓存,提高页面的流畅度

    浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是根据HTTP报文的缓存标识进行的,所以在分析浏览器缓存机制...

  • 浏览器缓存机制

    浏览器缓存机制:浏览器缓存机制,其实主要就是http协议定义的缓存机制(如:Expires;Cache-contr...

  • Web浏览器的缓存机制

    原文转载【Web缓存机制系列】2 – Web浏览器的缓存机制 浏览器端的缓存规则 对于浏览器端的缓存来讲,这些规则...

  • 2020-08-14 彻底理解浏览器的Http缓存机制

    彻底理解浏览器的Http缓存机制 概述 浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是根据HTTP报文的...

  • http的缓存机制(个人笔记)

    本文来源:彻底理解浏览器的Http缓存机制 概述 浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是根据HT...

  • nginx 缓存(11)

    介绍nginx是如何设置缓存之前,我们还是先聊聊web浏览器的缓存机制。 1.浏览器缓存 浏览器的缓存机制也就是我...

  • http 缓存机制

    概述 浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是根据HTTP报文的缓存标识进行的,所以在分析浏览器缓...

  • 浏览器缓存

    浏览器的缓存机制 浏览器的缓存机制实际上就是HTTP缓存机制,其实就是根据请求报文中的缓存标识符进行识别然后进一步...

  • 浅谈浏览器缓存机制

    概述 在面试的过程中会常常提到浏览器的缓存机制,那么什么是浏览器的缓存机制?浏览的缓存机制也就是我们常说的HTTP...

网友评论

      本文标题:浏览器的缓存机制

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