浏览器缓存清理（缓存浏览器缓存）

浏览器缓存即http缓存，将数据缓存在浏览器(即客户端)，今天小编就来聊一聊关于浏览器缓存清理?接下来我们就一起去研究一下吧!

浏览器缓存清理

一.概述

浏览器缓存即http缓存，将数据缓存在浏览器(即客户端)。

服务端通过设置HTTP响应头来决定缓存策略，将资源缓存到本地浏览器。

二.工作流程

http缓存都是从第二次请求开始的。

第一次请求资源，服务器返回对应资源，并在response header响应头中添加缓存策略。

第二次请求时，浏览器判断请求参数，命中强缓存就直接200，从本地缓存中拿数据。否则把响应参数存在request header请求头中，看是否命中协商缓存，命中则返回304，否则服务器会返回全新资源。

强缓存与协商缓存

强缓存：无需与服务端发生交互

协商缓存：需要与服务端发生交互，判断是否使用本地缓存的文件。

三.缓存示例

分析

无缓存时，状态码200，传输size为6.9MB，传输时间8.63s。

设置协商缓存后，状态码304，传输size为350B，时间100ms，造成差异的原因时协商缓存发送的是304请求判断是否使用本地缓存，如果缓存命中，浏览器直接从本地拿缓存的文件，6.9MB的文件就不需要走网络传输了，因此响应时间会极大的缩短。

设置强缓存，传输时间为0ms。因为不需要走网络传输了，直接走本地缓存，因此响应时间为0。

四.几个控制缓存策略的响应头强缓存

4.1 Expires

Expires是HTTP/1.0控制网页缓存的字段，其值为服务器返回该请求的结果缓存的到期时间，即再次发送请求时，如果客户端的时间小于Expires的值时，直接使用缓存结果。到了HTTP/1.1，Expires已经被Cache-Control替代，原因在于Expires控制缓存的原理是使用客户端的时间与服务端返回的时间做对比，如果客户端与服务端的时间由于某些原因（时区不同；客户端和服务端有一方的时间不准确）发生误差，那么强制缓存将直接失效

4.2 Cache-Control

在HTTP/1.1中，Cache-Control是最重要的规则，主要用于控制网页缓存，主要取值为：

public：所有内容都将被缓存（客户端和代理服务器都可缓存）

private：所有内容只有客户端可以缓存，Cache-Control的默认取值

no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定

no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存

max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效

must-revalidate：告诉浏览器、缓存服务器，本地副本过期前，可以使用本地副本；本地副本一旦过期，必须去源服务器进行有效性校验。

在无法确定客户端的时间是否与服务端的时间同步的情况下，Cache-Control相比于expires是更好的选择。

4.3 Pragma

Pragma 是HTTP/1.0标准中定义的一个header属性，请求中包含Pragma的效果跟在头信息中定义Cache-Control: no-cache相同，但是HTTP的响应头没有明确定义这个属性，所以它不能拿来完全替代HTTP/1.1中定义的Cache-control头。通常定义Pragma以向后兼容基于HTTP/1.0的客户端。

注：以上三个响应头，优先级顺序为：Pragma>Cache-Control>Expires

协商缓存

4.4 ETag

ETag 值是一个字符串，其内容通常是数据的哈希值，每个数据都有一个单独的标志，只要这个文件发生了改变，这个标志就会发生变化。

服务器可以在响应中返回 ETag，然后浏览器会在后续的请求中携带上这个参数来确定缓存是否需要更新。如果 ETag 值相同，说明资源未更改，服务器会返回 304（Not Modified）响应码，浏览器就知道本地缓存仍然是可以使用的。

4.5 Last-Modified

服务器可以通过配置这个响应头，来向浏览器发送一个数据上次被修改的时间标签，例如：Last-Modified:Wed, 24 Apr 2019 02:54:16 GMT

这样浏览器就知道了该数据最后被修改的时间，后续请求中，会和服务器进行时间的比较，如果服务器上的时间比本地时间要新，说明数据有更改，浏览器需要重新下载数据。

五.实例

禁用缓存：

启用协商缓存：

强缓存：

分析

禁用缓存，就是设置响应头Cache-Control: no-store，max-age=0。浏览器收到响应头，就会指定制定禁止缓存的策略，下一次请求该资源，就会直接发送200请求。

协商缓存，图片中Cache-Controll设置的实际是强缓存，但Pragma:no-cache是协商缓存，且Pragma优先级更高，因此这里执行的是协商缓存的策略，发送304请求，把本地资源的版本号、过期时间等信息拼装到请求头，来确定是否使用本地缓存。

强缓存，这里干掉了Pragma响应头，浏览器就可以执行强缓存策略了，直接from memory cache。

浏览器缓存的优点

1、减少了冗余的数据传输

2、减少了服务器的负担，大大提升了网站的性能

3、加快了客户端加载网页的速度

状态码为灰色的请求则代表使用了强制缓存，请求对应的Size值则代表该缓存存放的位置，分别为from memory cache 和 from disk cache。

from memory cache代表使用内存中的缓存，特点：快速读取「虽然读取速度高效，但内存必硬盘容量小的多，操作系统需要精打细算内存的使用，所以能让我们使用的内存必然不多」和时效性「一旦该进程关闭，则该进程的内容则会清空。」

from disk cache则代表使用的是硬盘中的缓存。浏览器读取缓存的顺序为memory –> disk。

内存缓存中有一块重要的缓存资源是 preloader 相关指令（例如<link rel="prefetch">）下载的资源。众所周知 preloader 的相关指令已经是页面优化的常见手段之一，它可以一边解析 js/css 文件，一边网络请求下一个资源。

在浏览器中，浏览器会在js和图片等文件解析执行后直接存入内存缓存中，那么当刷新页面时只需直接从内存缓存中读取(from memory cache)；而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。

浏览器会把哪些文件丢进内存中？哪些丢进硬盘中？关于这点，网上说法不一，不过以下观点比较靠得住：

对于大文件来说，大概率是不存储在内存中的，反之优先

当前系统内存使用率高的话，文件优先存储进硬盘

浏览器缓存是后端还是前端控制呢？

答：的确是服务器设置，但是前端也要知道怎么设置的。比如哪些资源缓存，采用何种缓存方式，更新策略如何。