浏览器缓存机制

概述

缓存策略

浏览器缓存策略分为两种：

1. 强缓存
2. 协商缓存

相同点

如果命中，都是从缓存中加载资源

不同点

协商缓存会向服务器发起请求去验证是否命中缓存，而强缓存不需要发送请求

基本原理

• 浏览器加载资源时候，会根据请求头的expire和cache-control判断是否命中强缓存，是则从缓存中读取资源，不会发送请求到服务器
• 如果没有命中强缓存，浏览器就会携带if-None-Match：上一次Etag的值和if-Modified-Since: 上一次last-modified的值，发送请求到服务器，验证是否命中协商缓存，如果命中，则继续从缓存中读取资源
• 如果没有命中缓存，则直接从服务器加载资源

强缓存

Expires

Expires: Wed, 11 May 2018 07:20:00 GMT

Expires是HTTp/1.0控制网页缓存的字段，其值是服务器返回改请求结果缓存的到期时间，是个绝对时间。

Expires控制缓存的原理，是使用客户端的时间与服务器端返回的时间做对比，如果客户端与服务器端的时间发生误差（如时区不同，修改了客户端时间），那么强缓存就会失效。

Cache-Control

Cache-Control : cache-directive

为了解决Expires的问题，在HTTP/1.1中提出了Cache-Control用于控制网页缓存

主要取值

Expires和Cache-Control:max-age=xxx 的作用是差不多的，区别就在于 Expires 是http1.0的产物，Cache-Control是http1.1的产物。

两者同时存在的话，Cache-Control优先级高于Expires；

在某些不支持HTTP1.1的环境下，Expires就会发挥用处。所以Expires其实是过时的产物，现阶段它的存在只是一种兼容性的写法

浏览器缓存存放位置

本地缓存分为内存缓存（from memory cache）和硬盘缓存（from disk cache）

内存缓存

内存缓存具有两个特点：

• 快读读取： 内存缓存会将编译解析后的文件直接存入改进程的内存中，占据该进程一定的内存资源，方便下次运行使用时的快速读取
• 时效性： 一旦该进程关闭，则该进程的内存会清空

硬盘缓存

硬盘缓存是直接将缓存写入硬盘中，读取缓存需要对该缓存存放的硬盘文件进行I/O操作，然后重新解析该缓存内容，读取复杂，速度比内存缓存（memory cache）慢

协商缓存

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存。

控制协商缓存的字段分别为： Last-Modified/if-Modified-Since 和 Etag/if-None-Match

其中 Etag/if-None-Match的优先级更高

Last-Modified / if-Modified-Since

Last-Modified 是服务器响应请求时，返回该资源文件在服务器最后被修改的时间

//  Last-Modified: 星期,日期 月份 年份 时:分:秒 GMT
Last-Modified: Tue, 04 Apr 2017 10:01:15 GMT

if-Modified-Since则是客户端再次发起该请求时，携带上次返回的 Last-Modified值。

当服务器收到该请求，并且发现请求头有if-Modified-Since字段时，就会将该值与该资源在服务器的最后修改时间做对比，如果有更新就重新返回资源，状态码为200；如果没有更新，则返回304，继续使用缓存文件

Etag / If-None-Match

Etag是服务器响应请求时，返回当前资源文件的一个唯一标识（由服务器生成）

ETag:"fcb82312d92970bdf0d18a4eca08ebc7efede4fe"

If-None-Match是客户端再次发起该请求时，携带上次请求返回的Etag值

当服务器接收到请求，并且发现请求头有If-None-Match时，就会将该值与资源在服务器的Etag值做对比，一致则代表资源没有更新，返回304，使用缓存文件；不一致则重新返回资源文件，状态码为200

禁止浏览器缓存

设置请求头

Cache-Control: no-cache, no-store, must-revalidate 

给请求资源增加一个版本号/随机数

<script src="index.js?v=1.0"></script>

HTML中禁用缓存

<meta  http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">