浏览器请求缓存机制以及流程

浏览器缓存机制

浏览器请求数据过程

​ 浏览器在多次访问同一个网页的时候，有时候并不会每次访问都去请求值，而是会对一些固定的数据进行缓存，如图片、js文件、css文件等。这些很大程度上都是不会改变的，所以需要有缓存机制。

1.浏览器请求数据的流程

1. 首先查看本地是否有缓存，如果有缓存，则进行读取缓存，否则跳到3
2. 读取缓存的时候进行判断是否过期，如果没有过期的话，直接进行读取，流程结束。如果过期的话，则会进行协商缓存，也就是带个特定的请求头表示进行协商缓存。
3. 请求，如果状态码是304的话，协商成功，直接读取本地缓存，否则就是常规请求。
4. 将返回来的数据进行保存。

2.浏览器缓存的分类

浏览器的读取缓存分成两种：强制缓存和协商缓存。

• 强制缓存就是在缓存没有过期的时候，直接读取浏览器内的缓存
• 协商缓存就是在强制缓存过期后，需要和后台协商说过期的文件是否有效，如果有效的话，则不会下载内容，返回304状态码

缓存机制标识

​ 在网页进行请求并且返回结果的时候，服务端会返回一个字段，这个字段表示数据/文件的缓存限制，有expires和cache-control两种，前者是在http1.0时代，而后者是在http1.1时代。

1.expires

​ expires的值是一个绝对值，也就是缓存的截至时间，如果客户端超过这个缓存的截至时间的话，则会使缓存失效。

​ expires会存在一个问题，就是当客户端和服务端的时间不一致的时候，则有时候会产生缓存还没开始生效就过期的问题，所以http1.1放弃了这个字段，采用了cache-control字段来进行表示。

2.cache-control

cache-control是在请求返回头进行填写的字段，主要的字段如下：

• public允许浏览器和代理服务器同时进行缓存
• private只允许浏览器进行缓存
• no-cache浏览器缓存，但是是否使用缓存则需要进行协商解决，也就是先存着，是否使用它的时候需要先去问一下服务器。
• no-store不允许缓存
• max-age：缓存存活时间（相对值），所以基准就是浏览器的当前时间，就不会考虑到浏览器和服务器的时间差。

cache-control的缓存请求信息如下：

• Last-Modified / If-Modified-Since：当确定及逆行请求的时候，会返回last-modified字段，浏览器每次进行协商请求的时候发送这个时间作为If-Modified-Since字段内容，含义是上次修改的时间。
• Etag / If-None-Match：上面两个是根据时间来进行判断是否读取缓存，下面是根据文件的唯一标识是否更改来进行判断是否使用缓存。会先进行标识判断再进行时间判断。

缓存存放区域

1.内存缓存

• 存放区域：内存，优点说是快速读取，但是缺点就是占内存
• 刷新浏览器的网页，还会存在，但是关闭浏览器就不存在了。所以是存放到浏览器这个进程的内存空间。

2.磁盘缓存

• 存放区域：磁盘，优点是不占用内存，容量大，但是缺点就是读取较慢
• 刷新浏览器的网页、重启浏览器都会存在。