浏览器的缓存机制

飞翔的波斯猫

已于 2023-06-06 17:24:20 修改

阅读量271

点赞数

分类专栏： js 浏览器文章标签：缓存服务器运维

于 2023-01-09 17:46:40 首次发布

本文链接：https://blog.csdn.net/weixin_44416058/article/details/128611921

版权

js 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

浏览器

1 篇文章 0 订阅

订阅专栏

一、浏览器的缓存步骤

当浏览器在加载资源时，会先判断根据https header中的Cache-Control和Expires字段，Cache-Control的优先级高于Expires，如果存在Cache-Control且未过时，则强缓存生效，浏览器从本地缓存中加载该资源；
如果强缓存未生效，浏览器会向服务器发送请求，并携带If-Modified-Since,If-None-Match字段，服务器会先判断If-None-Match，若未失效，则说明协商缓存生效，则服务器返回304，浏览器仍旧从本地缓存获取资源，若没有If-None-Match，则判断If-Modified-Since，亦是同理；
如果以上两步都未生效，则浏览器会直接从服务下载资源。

二、浏览器缓存类别

2.1 用于判断的字段

浏览器请求头	对应的服务器响应头	说明
Expires	Expires	以服务器的时间为标准，但是由于浏览器的时间和服务器的。
Cache-Control	Cache-Control	采用绝对时间Cache-Control:max-age=60，单位是秒。
If-Modified-Since	Last-Modified	Last-Modified表示上一次修改的时间。
If-None-Match	Etag	Etag是与内容相关的字段，是对文件内容进行Hash排列后得到的值，比Last-Modified可靠。

2.2 强缓存

定义：当浏览器第一次请求资源时，服务器会以一些方式通知浏览器该资源保存在本地，且在某一段时间内再次调用该资源时，可以直接从本地获取，这种缓存方式被称为强缓存。

服务器会返回Expires（实体首部字段）或者Cache-Control（通用首部字段）两个字段，这两个字段可以控制强缓存的有效时间，需要注意的时，即使浏览器判断此时应该用强缓存，其返回的status依旧为200，在Chrome浏览器中可以通过size来区分是从服务器获得还是从本地强缓存获取的资源。

Expires

这是浏览器第一次请求服务器后，服务器返回响应头中的字段，它是一个绝对时间的GMT格式的时间字符串，当浏览器再次请求资源时，会先通过缓存中的该值进行判断，如果当前请求时间小于该值，那么说明强缓存依旧有效，否则无效，直接从服务器端请求资源。
但是该值是服务器上的时间值，可能与浏览器上的时间有较大误差，所有有些时候并不准确。

Cache-Control:max-age

该字段是http1.1的规范，该属性的单位是秒，强缓存用max-age来判断资源过期时间，与Expires类似，浏览器也是在第一次请求资源后，缓存下从服务器返回的响应头中的该值，待第二次请求时，从缓存中去除date（第一次资源请求时间）和max-age，通过date+max-age计算出有效期，将该值与当前浏览器请求时间对比，以此判断强缓存是否过期。由于Cache-Control:max-age使用的是相对时间，所以比Expires更准确。

2.3 协商缓存

协商缓存是在强缓存已失效的情况下才去判断的，当浏览器首次请求资源时，服务器会同时返回一些信息（最后修改时间、文件摘要）给浏览器，当浏览器再次向服务器请求资源时，通过对比该请求携带的信息和服务器中对应信息，判断是否更新资源，此时的缓存被称为协商缓存。
协商缓存利用[Last-Modified , If-Modified-Since] 和 [ETag , If-None-Match]这两对Header来管理。

Last-Modified & If-Modified-Since

Last-Modified是服务返回的响应中携带的参数，当浏览器第一次请求后，就将该值保存在本地；
当第二次请求时，浏览器的请求头会带上If-Modified-Since，这个值就是第一步中保存的Last-Modified；
当请求到服务器端时，将请求头中的If-Modified-Since和服务器上的Last-Modified进行比较，如果二者一致，这说明协商缓存生效，服务器返回304状态码，浏览器依旧从本地获取资源，否则重新从服务器上获取资源。