浏览器的缓存机制

一.缓存的资源去哪了?
memory cache 将资源缓存到内存中 退出进程时数据会被清除
disk cache 将资源缓存到磁盘中 退出进程时数据不会被清除

三级缓存的原理:
先在内存中找,内存中没找到去磁盘中寻找,如果还没找到就发送网络请求,请求的资源缓存到内存和磁盘。像js类的缓存到内存,css缓存到磁盘。

二.浏览器如何缓存?

浏览器的缓存分为两种:强缓存、协商缓存

强缓存

:浏览器在加载资源时,会先根据本地缓存资源的 header 中的信息判断是否命中强缓存,如果命中则直接使用缓存中的资源不会再向服务器发送请求。

header 中的信息指的是 expires 和 cahe-control

1)expire:且当前时间还没超过资源的过期时间, 那么就直接使用这一个资源, 不会发送http请求。它的值为一个绝对时间的 GMT 格式的时间字符串,比如 Expires:Mon,18 Oct 2066 23:59:59 GMT。
缺点:由于失效时间是一个绝对时间,所以当服务器与客户端时间偏差较大时,就会导致缓存混乱。

2)Cache-Control:请求的 header 中,主要是利用该字段的 max-age 值来进行判断,它是一个相对时间,例如 Cache-Control:max-age=3600,代表着资源的有效期是 3600 秒。

几个常用的属性值:
no-cache:需要进行协商缓存,发送请求到服务器确认是否使用缓存。
no-store:禁止使用缓存,每一次都要重新请求数据。
public:可以被所有的用户缓存,包括终端用户和 CDN 等中间代理服务器。
private:只能被终端用户的浏览器缓存,不允许 CDN 等中继缓存服务器对其缓存。

注意:
Cache-Control 与 Expires 可以在服务端配置同时启用,同时启用的时候 Cache-Control 优先级高。

协商缓存

当强缓存没有命中的时候,浏览器会发送一个请求到服务器,服务器根据 header 中的部分信息来判断是否使用缓存。一种判断为Last-Modify/If-Modify-Since,另一种判断为ETag/If-None-Match。

浏览器第一个访问一个地址会缓存静态文件 css js html,下次访问时会看页面有没有过期,如果网站已经明确规定有过期,浏览器则会重新下载页面。

1)Last-Modify/If-Modify-Since
max-age:浏览器设置的页面过期时间,当过期了会不再使用缓存,重新请求。
Last-midified:浏览器访问一个页面,服务器会把这次访问页面的时间发给浏览器,浏览器储存在last-modified中。
if-modified-since:如果超过了max-age(即页面缓存时间已经过期),那么页面将if-modified-since发送给服务器,if-modified-since中携带的值就是Last-midified,服务器判断下此次的if-modified-since如果和上次的Last-midified一致,那么浏览器直接复用缓存,如果不一致那么就将新的资源发送给浏览器。

2)ETag/If-None-Match
和Last-Modify/If-Modify-Since不同的是,不需要设置一个过期的时间,每次资源变化,ETag序列都会变化,每次服务器都会比对浏览器这次发给我的If-None-Match/ETag值和上一次的是否一致,如果一致,页面没修改过,直接复用缓存,如不一致,资源修改过,则重新给你资源。