什么是缓存?
当第一次访问网站的时候,比如www.baidu.com,电脑会图片,文件等下载下来,当第二次访问网站的时候,网站就会直接被加载出来.
缓存的好处?
- 减轻服务器压力,减少请求的放松.
- 提高性能,在本地打开资源肯定比在服务器上获取要快
- 减少宽带的消耗,当我们使用缓存时,只会产生很少的网络消耗
**浏览器缓存有俩种方式:**强缓存、协商缓存
浏览器缓存存储的地方:Service Worker、Memory Cache、Disk Cache、push Cache
缓存位置
1.Service Worker
是浏览器背后的独立线程,一般可以作为缓存。使用Service Worker,首先必须是HTTPS协议,因为Service Worker中间涉及到一些请求的拦截,所以必须要用HTTPS来保证安全。
Service Worker和其他浏览器缓存不同,它可以选择缓存那些文件,读取那些文件,并且还有持续性。
2.Memory Cache
是内存中的缓存,主要是当前页面已经下载过的资源,比如页面上已经下好的样式、脚本、图片之类。在内存中读取速度肯定比磁盘中快,内存虽然读取高效,但是持续性很短,随着进程的释放而释放,如果关闭tab页面就会消失。
3.Disk Cache
是硬盘中的缓存,他和Memory Cache相比,读取比内存的要慢,但是什么都能存储到硬盘上。在容量和时效性更好一些。
Disk Cache是浏览器大多会使用的,他会根据HTTP header上的字段来判断那些资源需要被缓存,那些缓存可以不用去请求,那些缓存过期需要重新请求。
如果一旦被硬盘缓存下来,就不会去请求数据,大多数的缓存都在Disk Cache
4.push Cache
是HTTP2中的内容,如果以上三种缓存都不是,就会使用push Cache,它的只会在session(会话)中出现,它的持续性也非常短,随着会话的结束就会被释放。一般在谷歌中,存储的时间也只有5分钟,而push Cache也并非遵从HTTP头中的缓存指令
缓存方式
1.强缓存
强缓存就是当URL访问页面时,不会去请求服务器,而是返回200,拿缓存中的资源进行渲染。
如何去设置强缓存?
当我们第一次进入页面的时候,会向服务器发送请求,通过服务器返回的响应头进行判断是否进行缓存,如果响应头中有 expries 或者 Cache-Control的字段就是强缓存,接着浏览器就将缓存存储在Memory Cache和Disk Cache。
当第二次进行请求,浏览器就会判断参数是否符合,如果符合就返回200状态码,渲染本地资源;否则就会把响应参数存在请求头,判断是否是协商缓存,如果是则返回304状态码,渲染缓存;否则就重新请求。
expries
是HTTP1.0控制页面缓存的字段,值为一个时间戳,服务器会返回到期时间,如果没有到期就从缓存拿数据,如果过期则重新请求
Cache-Control
是HTTP1.1控制页面缓存的字段,它的值有很多,当Cache-Control存在时,Cache-Control的优先级更高。
public:服务器和浏览器都可以缓存
privite:只允许浏览器缓存
no-store:都不缓存
no-cache:可以缓存,但会立即失效
max-stale=30 :30s内,即使缓存过期也使用该缓存
min-fresh=30 :希望30s内获取最新的响应
pragma
这个是HTTP1.0中禁用网页缓存的字段,其取值为no-cache,和Cache-Control的no-cache效果一样。
2.协商缓存
协商缓存就是当强缓存失效后,会带这缓存标识去向服务器去请求,如果符合就返回304状态码,并且会更新缓存的标识;否则返回200,并重新请求数据。
协商缓存使用俩种HTTP header实现
- Last-Modified
- ETag
** Last-Modified**
浏览器发起请求访问目标资源,服务器在返回资源的同时,会在response header中添加 Last-Modified这个header,表示这个资源在服务器上的最后修改时间
浏览器下一次请求这个资源,浏览器检测到有 Last-Modified这个header,于是会添加If-Modified-Since这个header其值就是Last-Modified中的值
服务器再次收到这个资源请求,会根据 If-Modified-Since 中的值与服务器中这个资源的最后修改时间对比
- 若服务器的资源最后被修改时间不等于于If-Modified-Since中的值的话就会将新的资源发送回来
- 否则返回 304 状态码
缺点:
- 如果本地打开缓存文件,即使没有对文件进行修改,但还是会造成 Last-Modified 被修改,服务端不能命中缓存导致发送相同的资源
- Last-Modified 只能以秒计时,如果在不可感知的时间内修改完成文件,那么服务端会认为资源还是命中了,不会返回正确的资源
因为以上这些弊端,所以在 HTTP / 1.1 出现了 ETag
ETag
Etag是服务器在响应请求时,返回的当前资源文件一个唯一标识(由服务器生成),只要资源有变化,Etag就会重新生成
浏览器在向服务器发送请求时,会将上一次返回的Etag值放到请求头的If-None-Match字段里
服务端比较 If-None-Match 中的值跟目标资源的ETag是否一致
- 一致,响应状态码为304
- 不一致,响应状态码为200,并返回新的资源
特点:
- ETag 优先级比 Last-Modified 高
- ETag 是服务端通过算法计算得出,需要损耗一定时间