瀏覽器緩存原理

緩存的清除方法

由於在開發的時候不會專門去配置強緩存，而瀏覽器又默認會緩存圖片，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

緩存和使用圖片的方法

離線存儲

設置方法

更新原理

免責聲明！