http缓存机制

93次阅读

共计 1422 个字符,预计需要花费 4 分钟才能阅读完成。

强缓存

如果浏览器中存在缓存数据并且数据没有过期,那么直接从缓存中读取数据,无需向服务器发起询问

流程:

相关头部字段:

  • Cache-Control

    • max-age=<seconds> 设置缓存存储的最大周期,超过这个时间缓存被认为过期(单位秒)。与 Expires 相反,时间是相对于请求的时间
    • public 表明响应可以被任何对象(包括:发送请求的客户端,代理服务器,等等)缓存,即使是通常不可缓存的内容
    • private 表明响应只能被单个用户缓存,不能作为共享缓存(即代理服务器不能缓存它)。私有缓存可以缓存响应内容
    • no-cache 告诉浏览器、缓存服务器,不管本地副本是否过期,使用资源副本前,一定要到源服务器进行副本有效性校验
    • no-store 缓存不应存储有关客户端请求或服务器响应的任何内容
  • Expires

expires 字段规定了缓存的资源的过期时间,在此时间之前,缓存中的资源都是有效的,该字段的 value 是一个格林威治时间格式(GMT)的时间, 即世界标准时间,js 通过 new Date().toUTCString()可得到,形如 Tue, 27 Feb 2018 06:37:48 GMT。缺点很明显,时间期限是服务器生成,存在着客户端和服务器的时间误差,固定时间,HTTP 1.0 时的规范。相比较 cache-control 优先级较低。

协商缓存

流程:

资源未失效

资源已失效

相关头部字段:

  • Last-Modified 响应头和 If-Modified-Since 请求头

Last-Modified 的值表示的是资源的最后修改时间,在浏览器第一次发起 HTTP 请求时,服务器会返回该响应头。
浏览器在下次发起 HTTP 请求时,会带上 If-Modified-Since 请求头,其值就是第一次发送 HTTP 请求时,服务器设置在 Last-Modified 响应头中的值
服务器收到请求后如果发现有请求头 If-Modified-Since 则与被请求资源的最后修改时间进行比对。若资源的最后修改时间大于 If-Modified-Since,说明资源有被改动过,则响应完整的资源内容,返回状态码为 200;若资源的最后修改时间小于或等于 If-Modified-Since,说明资源未被修改,则响应 HTTP 状态码为 304,告知浏览器继续使用所保存的缓存。

  • Etag 响应头和 If-None-Match 请求头

Etag 响应头的值为当前资源在服务器的唯一标识(生成规则由服务器决定),在浏览器第一次发起 HTTP 请求时,服务器会返回该响应头。
当浏览器下次向服务端请求该资源时,会带上 If-None-Match 请求头,其值为第一次请求时服务器返回的 Etag 响应头的值。
服务器收到请求后如果发现有请求头头 If-None-Match 则与被请求资源的唯一标识进行比对。如果不同,说明资源有被改动过,则响应完整的资源内容,返回状态码为 200;如果相同,说明资源未被修改过,则响应 HTTP304,告知浏览器继续使用所保存的缓存。

总结

对于强缓存,服务器通知浏览器一个缓存时间,在缓存时间内,下次请求,直接用缓存,不在缓存时间内,执行比较缓存策略。
对于协商缓存,将缓存信息中的 Etag 或者 Last-Modified 通过请求发送给服务器,由服务器校验,如果未过期返回 304 状态码时,浏览器直接使用缓存;如果已过期,返回 200 状态码以及最新资源。

原文链接:http://huaweiup.com/FE-DOCS/#/fe/web/http-cache

正文完
 0

HTTP缓存机制

93次阅读

共计 568 个字符,预计需要花费 2 分钟才能阅读完成。

HTTP 缓存机制
HTTP 缓存分两种 强制缓存和对比缓存
我们再了解这些之前先简单了解 HTTP 报文,HTTP 报文就是浏览器和服务器通信时发送及响应的数据快。
请求头部 header 附加信息(cookie,缓存信息等)与缓存相关的规则信息,均包含在 header 中
和请求主体 body HTTP 请求真正想要传输的部分
简单了解了这些我们再来看看强缓存和对比缓存

强缓存 关键字 expires cache-control max-age = 设置过期时间
对比缓存 关键字 response header 中 last-modified 记录最后请求时间 request header if-modified-since 与最后请求时间做对比。etag 记录唯一标识 if-none-match 与 etag 对比是否一致 一致返回服务端返回唯一标识 可以获取缓存数据 状态码 304

如何设置请求缓存
前端设置 http 缓存, 前端设置 html 页面缓存方法:静态的 html 页面想要设置使用缓存需要通过 HTTP 的 META 设置 expires 和 cache-control
设置如下网页元信息:
<meta http-equiv=”Cache-Control” content=”max-age=7200″ />
<meta http-equiv=”Expires” content=”Mon, 20 Jul 2013 23:00:00 GMT” />

正文完
 0