浏览器缓存原理

缓存的清除方法

因为在开发的时候不会专门去配置强缓存，而浏览器又默认会缓存图片，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

缓存和使用图片的方法

离线存储

设置方法

更新原理