实现浏览器缓存主要有四种方式:
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控制台开始创建缓存文件
在第二次刷新时,浏览器直接使用缓存