浏览器的缓存机制笔记

浏览器的缓存机制

一.缓存的资源去哪了？
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值和上一次的是否一致，如果一致，页面没修改过，直接复用缓存，如不一致，资源修改过，则重新给你资源。