浏览器缓存详细记录

实现浏览器缓存主要有四种方式：

1）使用Cache-Control或者Expires

2）使用Last-Modified 和 If-Modified-Since

3）使用Etag和If-None-Match

4）使用html5中appcache

下面以nginx服务器为例，记录缓存的四种方式

强制缓存：不发送请求，使用浏览器缓存

在http1.0中，使用Pragma 和Expires作为缓存标识，其中Expires为服务器端返回的过期时间，该用法的一个缺点是客户端时间和服务端时间可能不一致，所以，在http1.1版本中，资源是否过期使用Cache-Control来判断，在nginx 禁用缓存的情况下，cache-control的取值为max-age=0，代表每次请求都必须从服务端获取资源。

当设置了max-age=3600后，浏览器在缓存有效范围内会直接读取缓存，而不是请求服务端，返回的状态码依然是200

对比缓存：需要与服务端进行比对判断是否需要缓存

Last-Modified 和If-Modified-Since 大致流程如下

浏览器第一次返送请求，服务端返回带有Last-Modified响应头，当浏览器再次请求该资源时，发送请求带上If-Modified-Since ，服务端收到带有If-Modified-Since请求头是，则与被请求资源的最后修改时间作对比，若发现资源的最后修改时间大于If-Modified-Since，则返回200，若小于If-Modified-Since，则返回304代表使用浏览器缓存即可。

Etag  /  If-None-Match 

Etag/If-None-Math的优先级比Last-Modified/If-Modified-Since高，其中Etag是服务器根据一定规则生成的资源的唯一标识，返回给客户端，服务端收到If-None-Math的请求头时，则与被请求资源的唯一标识作对比，不同则返回200，相同，则返回304

HTML5中的appcache

appcache 是html5加入的缓存方案，也是不需要请求服务端的缓存。使用步骤：

1)创建appcache文件，如app.manifest,文件内容有三栏，CACHE MANIFEST（必选）为需要缓存的文件。NETWORK(可选)是绕过缓存直接请求服务端的文件，FALLBACK（可选）为一个备用文件。实例：

CACHE MANIFEST

hello.html

demo.js

NETWORK:

*

FALLBACK:

*

entry.html文件中在html标签中加入manifest="app.manifest",示例

清空缓存，重新刷新页面，console控制台开始创建缓存文件

在第二次刷新时，浏览器直接使用缓存