了解 HTTP 缓存机制,看这篇文章就够了!

云栖号资讯:【点击查看更多行业资讯】
在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来!


1、前端缓存

前端缓存可分为:

了解 HTTP 缓存机制,看这篇文章就够了!

  • 今天主要讲的就是 http 缓存

2、HTTP 缓存

(1).什么是 HTTP 缓存

HTTP 缓存指的是,客户端向服n ( E G X务器请求数K - r据时,会先抵达浏览器缓存,如果= 1 Q u g 2 * J浏览器有这个需要请求的资源s F , d n ! i的副本,就可以直接从浏览器的缓存中提取这个资源,而不用花费更多时间再从对应的服务器获取数据。

常见的 HTTP 缓存只能缓存 get 请求响应的资源

HTTP 缓存都是从第二次请求开始n q ) R . C 2 U的。第一次请求资源时,服务器返回对应资源q ( * o,并在 rej 4 bsponse header 头中回传资源的q - *缓存数据;第二次请求,浏览器通过判断请求参数,命中强缓U e V 8 ` ( 2存就直接 200,否则就把请求参数到 request header 头中传给服务器,查看是Z + 1 x f s否命中协商缓存,命中则返回 304,否则服务器会返回全~ n p G l r新的H G c资源

(2).HTTP 缓存分类

  • 根据是否需要再次向服务器发起请求来判断分类,分为强缓存和协商缓存。
  • 强缓存如果生效,就无须再与服务器发生交互
  • 协商缓存不管是否生效,都需要与服务器发生交互
  • 强缓存 与 协商缓存 的对比:

了解 HTTP 缓存机制,看这篇文章就够了!

(3).关于强缓存

强缓存在缓存数据还未失效的情况下(也就是 Cache-Control 的 max-age 或者 Expires 的事件没有过期、失效),那么就会直接使用浏览器的缓存数据,不会再向服务器发送任何请求。

强缓存生效时,u U 2 h . l L 1返回的 http 状态码是 200,这种响应下的页面的加载速度是最快的。

但是,如果o ~ c在这个设定的时间内,服务器端的资源进行修改,那么页面上是拿不到这部分更新的数据的,因为它不会再与浏览器产生交互。

强缓存相关 headf U % W fer 头属性

  • Pragma (在 HTTP 1L ] . ~ n % % m U.1 中被遗弃)
  • Cache-Control:设置过& t s U 1 0 I期时间(绝对时间、时间点),超过了这个时间点就代表N / 8 9 5 R 0 t资源过期。但l } ` 0 Z k ] W是用户的本地时间是可以自行调整的,所以会出现问题
  • Expires:设置过期时长(相对时间、时间段),指定一个时间长度,跟本地时间无关,在这个时间段内缓存是有效的。

三者的优先级为(从高到低)? 7 H:Pragma > Cache-Control > Expires

(4).关于协商缓存

当第一次请求服务器时,返回的响应头中没有设置 Cache-Control 和 Expires,或者是 Cache-Control 和 Expires 已经r ; 4 ; R 3过期的情况下,浏览器的第二次请求就会与服务器进行协商,与服务器端资源对比,判断是使用浏览器中的缓存数据还是重新发送资源给浏览器。

如果服务器端的资源没有更新修改,那么返回的 http 状态码为 304,告诉浏览器可以使用缓存的数据。t b c

如果服务器的资源更新了,就会返回状态码 200,把更新后的资源与缓存信息一起发送给浏览器。

协商缓存的相关 header 头属性有:

  • ETag
  • If-Not-Match

协商缓存的执行流] E 1 v i程:

  • 浏览器第一次向服务器发送请求时,0 t M 9 0 : B o .会在响应头返回协商缓存的头属性:ETga 和 Last-Modified(目前不再使用)
  • 其中 ETag 是浏览器当前资源在服务器的唯J G ` w ] j Z c 2一标识,其生成规则由服务K g J R t $器决定。
  • 当浏览器在第二次向服务器发送请求时,会在请求7 F ! [ u m k头上带上与 ETag 对应的值。
  • 服务器在接收到 ETag 值后会进行比k d Z较,如果返回 304,则说明资源没有更改,浏览器可以在缓存中读j 0 N 5 T取数据。否则,服务器会直接返回更新后的资源

3、为什么要使用 HTTP 缓存

HTTP 缓存的好处?

  • 减少亢余的数据传输,节约资源
  • 缓解服务器压力,提高网站性能
  • 加快客户加载网页的速度

4、不想使用缓存的几种方式

  • Ctrl + F5强制刷新,都会直接向服务器提取数据。
  • 按F5刷新或浏览器的刷新按钮,默认加上Cache-Control:max-age=0,即会走协商缓存。

5、HTTP缓存的注意点

尽量减少 304 的请求,因为我们知道,协商缓存每次都会与3 M e K W 5后台服务器进行交互,所以性能上不是很好。从性能上来看尽量多使用强缓存。

6、总结:

对于强制缓存,服务器通知浏览器一个缓存时间,在缓存时间内,下次请求,直接用缓存,不在时间内,执行协商缓存策略。

对于协商缓存,将缓存信息中的 Etag 通过请求发送给服务器,由服务器校验,返回304状态码时,浏览器直接使用缓存,否则服务器重新发送数据资源k A +给浏览器。

流程图

  • 第一次请求

了解 HTTP 缓存机制,看这篇文章就够了!

  • 第二次请求

了解 HTTP 缓存机制,看这篇文章就够了!

【云栖号在线课堂】每天都有产品技术专家分享!
课程地址:https://yqh.aliyun.com/live

立即加入社群,与专家面对面,及时了解v T 1 w H 4 =课程最新动k k 7 T I B W - !态!
【云栖号在线课堂 社群】https://c.tb.cn/F3.Z8gvnK

原文发布时间J o p #:2020-07-30
本文作者:wbh爱吃西瓜
本文来自:“掘金”B u H 7 E : 7,了解相关信息可以关注“掘金”