浏览器缓存原理

缓存的清除方法

由于在开发的时候不会专门去配置强缓存，而浏览器又默认会缓存图片，css和js等静态资源，所以开发环境下经常会因为强缓存导致资源没有及时更新而看不到最新的效果，解决这个问题的方法有很多，常用的有以下几种：

1）直接ctrl+f5，这个办法能解决页面直接引用的资源更新的问题；

2）使用ctrl+shift+delete清除缓存；

3）如果用的是chrome，可以F12在network那里把缓存给禁掉（这是个非常有效的方法）：

4）在开发阶段，给资源加上一个动态的参数，如css/index.css?v=0.0001，由于每次资源的修改都要更新引用的位置，同时修改参数的值，所以操作起来不是很方便，一般使用前端的构建工具来修改这个参数或在动态页面比如jsp里开发就可以用服务器变量来解决（v=${sysRnd}）；

1.原生写法

function addVersion(asset){
  asset.forEach(function(item,index){
    if(item.indexOf('.js') != -1){
      document.write('<script src="'+item+'?v='+ (new Date().getTime()) +'"></script>');
    }else if(item.indexOf('.css') != -1){
      document.write('<link rel="stylesheet" href="'+item+'?v='+(new Date().getTime())+'">');
    }
  });
}

2.采用gulp插件

(1)gulp-rev-append

(2)gulp-rev和gulp-rev-collector也能实现同样的功能

// 修改html和css文件，给静态文件打戳
gulp.task('stamp', function(){
    gulp.src(['rev/*.json', dest.css + "**/*.css"]).
        pipe(revCollector({
            replaceReved: true
        })).
        // 修改为 ?v=stamp 形式
        pipe(replace(/-([0-9a-z]{8,}).(png|jpg|gif|ico)/g, function(a, b, c){
            return '.' + c + '?v=' + b;
        })).
        pipe(gulp.dest(dest.css));
    gulp.src(['rev/*.json', src.html]).
        pipe(revCollector({
            replaceReved: true
        })).
        // 修改为 ?v=stamp 形式
        pipe(replace(/-([0-9a-z-]{8,}).(css|js)/g, function(a, b, c){

            return '.' + c + '?v=' + b;
        })).
        pipe(gulp.dest(dest.html));
});

5）如果资源引用的页面，被嵌入到了一个iframe里面，可以在iframe的区域右键单击重新加载该页面，以chrome为例：

6）如果缓存问题出现在ajax请求中，最有效的解决办法就是ajax的请求地址追加随机数；

7）还有一种情况就是动态设置iframe的src时，有可能也会因为缓存问题，导致看不到最新的效果，这时候在要设置的src后面添加随机数也能解决问题；

8）如果你用的是grunt和gulp这种前端工具开发，通过它们的插件比如grunt-contrib-connect或gulp-connect来启动一个静态服务器，则完全不用担心开发阶段的资源更新问题，因为在这个静态服务器下的所有资源返回的respone header中，cache-control始终被设置为不缓存：

浏览器缓存原理

为什么要使用web缓存？

缓存的分类

1.数据库数据缓存

2.服务器端缓存

代理服务器缓存

CDN缓存

3.浏览器端缓存

4.Web应用层缓存

缓存如何发挥作用

缓存控制设置字段和原理

1.HTML Meta标签控制缓存

2.HTTP头信息控制缓存

1.通用首部字段

2.请求首部字段

3.响应首部字段

4.实体首部字段

http1.0 时代缓存字段详解

1.Pragma

2.Expires

http1.1时代缓存字段详解

1.Cache-Control

2.Last-Modified/If-Modified-Since

3.Etag/If-None-Match

4.既生Last-Modified何生Etag？

(1)If-Unmodified-Since: Last-Modified-value

(2)If-Match: ETag-value

浏览器缓存流程图

如何配置

1）通过代码的方式，在web服务器返回的响应中添加Expires和Cache-Control Header；

2）通过配置web服务器的方式，让web服务器在响应资源的时候统一添加Expires和Cache-Control Header。

用户行为与缓存

缓存的清除方法

与之相关的--本地存储和离线存储

localStorage/sessionStorage

缓存和使用图片的方法

离线存储

设置方法

更新原理