如何清空浏览器缓存_有关于缓存那点事-浏览器缓存

作者：timCope

前言

什么是浏览器缓存？用通俗的话来说，浏览器缓存是为了加速浏览，把已经请求过的资源拷贝一份存储起来，当下次需要使用这份资源时，浏览器会根据缓存机制会判断是否向服务器重新请求。作为前端提升网页的访问速度的必备方法。了解浏览器的缓存命中原理，准确认清楚缓存的概念，是前端开发人员必须要去了解和学习的。接下来我们聊聊这个浏览器缓存（这边主要讲述HTTP协议定义的缓存机制，至于浏览器新增的storage、indexDb等缓存方法下篇文章会进行整理）

缓存仓库

既然叫资源缓存，那么存放资源的仓库又在哪里呢？浏览器的资源缓存大体分为Memory Cache 和Disk Cache两类。Memory Cache 也就是内存中的缓存，Memory Cache优点是读取速度快，但是缓存会随着进程的释放而释放。当用户关闭页面时，Memory Cache也会随之被清空。与Memory Cache想对应的就是Disk Cache，也就是硬盘中的缓存，它会根据 HTTP头字段去做判断，即使你关闭了页面，当下次打开时，如果判定缓存命中，浏览器任然可以从硬盘中读取缓存，它解决了内存缓存的小和无法持续缓存的缺点，但是也因此相对较慢。不同浏览器磁盘缓存的地址也不同，通过浏览器自带的清除缓存的功能可以对缓存进行清理，毕竟在开发过程中缓存并不是一个受人待见的朋友。访问顺序如下图所示：

缓存策略

浏览器缓存策略可以分为强制缓存和协商缓存两类，浏览器请求资源前会先判断是否命中强缓存，在判断是否命中协商缓存，两者的根本区别在于是否需要再次向服务器发送请求。

强缓存

我们把目光先聚焦在强缓存之上，强缓存就是不要通过服务器端来判断，利用http头中的Expires和Cache-Control两个字段来判断本地缓存的资源是否有效。

Expires

这个字段出现在HTTP/1.0时期，该字段表示缓存到期时间，这个时间代表着这个资源的失效时间（需要的缓存时长+服务器时间），在此时间之前所有的请求都算命中缓存。这种方式有一个明显的缺点，就是无法保证客户端时间和服务端时间是一致的。也就说可能因为客户端时间问题导致缓存出现问题。

Cache-Control

针对Expires带来的问题，在HTTP/1.1中新增加了一个字段Cache-Control，相对于Expires的绝对时间，Cache-Contro中max-age采用的是相对时间，即使客户端时间发生改变，相对时间也不会随之改变，这样可以保持服务器和客户端的时间一致性。因此在HTTP/1.1推广后Expires已经渐渐被取代，而当max-age和Expires同时存在，前者优先级高于后者。

no-cache

如果头字段中含有Pragma:no-cache,Cache-Control:no-cache或者Cache-Control:no-store。则代表不会命中强缓存

协商缓存

当强缓存未命中是，就会进入协商缓存阶段，此时客户端会向服务端请求，由服务端来来决定本地缓存资源是否可用，那么服务端又是通过什么来断定请求资源是否可以缓存访问呢？

Last-Modified和If-Modified-Since

首先出场的是Last-Modified和If-Modified-Since两兄弟，当浏览器第一次请求资源时，服务器返回的头字段中会包含Last-Modify字段，表示当时该资源最后的修改时间，是一个绝对时间。当第二次需要该资源时，会向服务端发送的请求头重包含If-Modify-Since字段，值为缓存之前返回的Last-Modify。服务端会根据收到的If-Modify-Since和当前的Last-Modified进行比较，如果命中缓存，则返回304，客户端使用缓存，如果不同则下载正确的数据。

ETag和If-None-Match

由于一些文件也许会周期性的更改，但是他的内容并不改变，这个时候希望能够命中缓存，为了解决这个问题ETag和If-None-Match出现了，ETag是一串可以代表该文件唯一的字符串，是通过对文件的某些值组合hash后的一个值，当客户端发现和服务器约定的直接读取缓存的时间过了（一般是Cache-Control的max-age），就在请求中发送If-None-Match选项，值即为上次请求后响应头的ETag值，该值在服务端和服务端代表该文件唯一的字符串对比（如果服务端该文件改变了，该值就会变），如果相同，则返回304，客户端使用缓存，如果不同则下载正确的数据。

为了加深印象我们对整个缓存流程用流程图来表示：

用户行为对缓存的影响

1）当强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存；

2）当刷新网页时，跳过强缓存，但是会检查协商缓存；

写在最后

本文主要介绍啦浏览器的缓存内容，计划里关于缓存大致会写四篇文章，大致是h5所带来的新的缓存方式，redis缓存策略，和缓存的实践。山水有相逢，我们下次再见。