瀏覽器緩存原理

緩存的清除方法

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

緩存和使用圖片的方法

離線存儲

設置方法

更新原理