聊聊强缓存与协商缓存

聊聊强缓存与协商缓存

  • 前言
  • 一、强缓存
  • 二、协商缓存
  • 三、如何设置强缓存和协商缓存

前言

在学习强缓存与协商缓存之前,我们先聊聊什么是缓存?

缓存是指浏览器(客户端)在本地磁盘中对访问过的资源保存过的副本文件。

那么浏览器缓存有什么优点呢?

  1. 减少重复请求数据,避免通过网络再次加载资源,节省流量。
  2. 降低服务器的压力,提升网站性能。
  3. 加快客户端加载网页的速度,提升用户体验。

浏览器的请求流程:

浏览器在第一次请求后缓存资源,再次请求时:

1、浏览器获取该缓存资源的 header 中的信息,根据response header中的expirescache-control来判断是否命中强缓存,如果命中直接从缓存中读取资源。

2、如果没有命中强缓存,浏览器就会发送请求到服务器,这次请求会带上IF-Modified-Since或者IF-None-Match,它们的值分别是第一次请求返回Last-Modified或者Etag,由服务器来对比这一堆字段来判断是否命中。

3、如果命中,则服务器返回304状态码,并且不会返回资源内容,浏览器会从缓存中获取;否则服务器最终会返回资源的实际内容,并更新header中的相关缓存字段。

聊聊强缓存与协商缓存_第1张图片

一、强缓存

强缓存是根据返回头中的Expires或者Cache-Control两个字段控制的,都表示资源的缓存有效时间。如果二者同时存在,Cache-Control的优先级高于Expires

Expires:是http 1.0 的规范,值是一个GMT格式的时间点字符串,例如:Expires:Mon,18 Oct 2066 23:59:59 GMT。

这个时间点代表资源失效的时间,如果当前时间戳在这个失效时间之前,则判断命中缓存。

缺点: 由于失效时间是一个绝对时间,所以当服务器时间与客户端时间偏差较大时,就会导致缓存混乱。

Cache-Control:是http 1.1的规范,一般使用该字段的max-age值来进行判断。

优点: 这个值是一个相对时间,例如:Cache-Control:max-age=3600代表资源有效期为3600秒,并且返回头中的Date表示消息发送的时间,表示当前资源在 Date ~ Date +3600s 这段时间里都是有效的。

关于Cache-Control的其他值:

  • no-cache:不使用本地内存,需要使用协商缓存。
  • no-store:禁止浏览器缓存数据,每次请求资源都会像服务器要完整的资源。
  • public:可以被所有用户缓存,包括终端用户和cdn等中间件代理服务器。
  • private:只能被终端用户的浏览器缓存。

二、协商缓存

协商缓存由服务器决定缓存资源是否可用。

主要涉及到两对属性字段,都是成对出现的,即第一次请求的响应头带上某个字, Last-Modified 或者 Etag,则后续请求则会带上对应的请求字段 If-Modified-Since或者 If-None-Match,若响应头没有 Last-Modified 或者 Etag 字段,则请求头也不会有对应的字段。

Last-Modified/If-Modified-Since 二者的值都是GMT格式的时间字符串。Last-Modified标记最后文件修改时间,下一次请求时,请求头会带上If-Modified-Since,用来告诉服务器本地缓存的文件最后修改的时间,服务器根据文件的最后修改时间判断资源是否有变化。若没有则返回 304 Not Modified,请求不会返回资源内容,浏览器直接使用本地缓存。若有变化,就正常返回资源内容,新的 Last-Modified会在 response header 返回,并在下次请求之前更新本地缓存的 Last-Modified,下次请求时,If-Modified-Since会启用更新后的 Last-Modified

Etag/If-None-Match:只要资源有变化就这个值就会改变。服务器根据文件本身算出一个哈希值并通过 ETag字段返回给浏览器,接收到 If-None-Match 字段以后,服务器通过比较两者是否一致来判定文件内容是否被改变。

Last-Modified 不一样的是,当服务器返回 304 Not Modified 的响应时,由于在服务器上ETag 重新计算过,response header中还会把这个 ETag 返回,即使这个 ETag 跟之前的没有变化。


三、如何设置强缓存和协商缓存

1、后端服务器,写入代码逻辑中:

res.setHeader('max-age': '3600 public')
res.setHeader(etag: '5c20abbd-e2e8')
res.setHeader('last-modified': Mon, 24 Dec 2018 09:49:49 GMT)

2、Nginx 配置:

add_header Cache-Control "max-age=3600"

一般来说,通过 nginx 静态资源服务器,会默认给资源带上强缓存、协商缓存的 header 字段。
聊聊强缓存与协商缓存_第2张图片

你可能感兴趣的:(网络知识,缓存,网络,强缓存,协商缓存)