浏览器缓存机制
浏览器请求数据过程
浏览器在多次访问同一个网页的时候,有时候并不会每次访问都去请求值,而是会对一些固定的数据进行缓存,如图片、js
文件、css
文件等。这些很大程度上都是不会改变的,所以需要有缓存机制。
1.浏览器请求数据的流程
- 首先查看本地是否有缓存,如果有缓存,则进行读取缓存,否则跳到3
- 读取缓存的时候进行判断是否过期,如果没有过期的话,直接进行读取,流程结束。如果过期的话,则会进行协商缓存,也就是带个特定的请求头表示进行协商缓存。
- 请求,如果状态码是304的话,协商成功,直接读取本地缓存,否则就是常规请求。
- 将返回来的数据进行保存。
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.磁盘缓存
- 存放区域:磁盘,优点是不占用内存,容量大,但是缺点就是读取较慢
- 刷新浏览器的网页、重启浏览器都会存在。