瀏覽器緩存控制

kaka 發布于2019-08-06 13:24 / 2894人閱讀

摘要：下面的一片文章緩存關于服務器如何控制瀏覽器緩存哪里資源緩存的有效時間以及如何替換未過期的緩存等過程。推薦配置為了減少提交文件數，采用的文件命名規則

下面的一片文章《HTTP緩存》關于服務器如何控制瀏覽器緩存哪里資源、緩存的有效時間、以及如何替換未過期的緩存等過程。
https://developers.google.com...
不過該篇文章中有一些點沒有詳細說，然后其他資料：
1.瀏覽器是如何判斷緩存過期了的
HTTP1.0里定義了eg:Expires,指定該響應的絕對過期時間，eg: Expires: Fri,05 Jul 2015, 05:00:00 GMT；但是如果服務器時間跟客戶端時間不一樣就尷尬了，于是這種方式后來慢慢被棄用了。
HTTP1.1里定義了Cache-Control，里面有一系列控制緩存的字段，上篇文章也有提，其中max-age用來指定該響應有效的時間，瀏覽器比較收到該響應的時間與max-age來判斷響應是否過期
eg:
Cache-Control:max-age=31536000.
2.服務器如何加ETag 驗證令牌以及Last-Modified等
以koa實現為例：

//koastart
var koa = require("koa");
var app = new koa();
// response
app.use(function *(){
  this.body = "Hello World";
  var etag = this.get("ETag");
  console.log("etag:"+etag);
  var date = new Date;
  var hashStr = this.body;
  var hash = require("crypto").createHash("sha1").update(hashStr).digest("base64");
  this.set({
    "Cache-Control":"max-age=120",
    "Etag": hash,
    "Last-Modified": new Date
  });
});

app.listen(3000);

第一次訪問之后返回的http頭文件中已經寫入的相關的信息

第二次發起請求的時候If-None-Match帶回Etag給瀏覽器進行比對，判斷是否需要更新緩存。

3.服務器如何給資源文件路徑加指紋的
常用指紋生成辦法：使用數據摘要要算法對文件求摘要信息，摘要信息與文件內容一一對應，將摘要信息作為文件名（的一部分）或者版本號
文件的hash指紋通常作為前端靜態資源實現持久化緩存的方案之一，Webpack提供了兩個配置項可供使用：hash和chunkhash.
chunkhash代表的是chunk的hash值,根據具體chunk模塊文件的內容計算所得的hash值，所以某個文件的改動只會影響它本身的hash指紋，不會影響其他文件。
推薦webpack配置:

output: {
    path: "./dist/",
    //為了減少提交文件數，采用 ?_v=[chunkhash:8]的文件命名規則
    filename: utils.assetsPath("js/[name].js?_v=[chunkhash:8]"),
    chunkFilename: utils.assetsPath("js/[id].chunk.js?_v=[chunkhash:8]"),
    // filename: utils.assetsPath("js/[name].[chunkhash:8].js"),
    // chunkFilename: utils.assetsPath("js/[id].[chunkhash:8].js")
  }

GPU云服務器云服務器瀏覽器緩存清除瀏覽器緩存 cdn瀏覽器緩存 webrtc瀏覽器接收緩存

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/61883.html

HTTP 緩存的關鍵路徑

摘要：其關鍵路徑如下圖所示圖緩存關鍵路徑三關鍵路徑之驗證緩存瀏覽器發起一個請求，生成報文，先發送到緩存器，緩存器驗證是否有本地緩存，緩存是否過期等，即圖的第一條路徑，稱之為驗證緩存。一、證件照場景拍一次證件照麻煩且費錢，因此每次拍的時候我們都會多留幾張備用。這就是計算機世界的緩存，在現實世界中的寫照。如果某個行為很消耗資源，很麻煩，那在實現它的時候就順便多保留幾份，這種行為就是緩存。特...

Anleb 2019-08-06 13:24 評論0 收藏0
service worker在移動端H5項目的應用

摘要：和的關系不是一項技術，也不是一個框架，我們可以把她理解為一種模式，一種通過應用一些技術將在安全性能和體驗等方面帶來漸進式的提升的一種的模式。這里需要注意的是，首次注冊線程的頁面需要再次加載才會受其控制。 1. PWA和Service Worker的關系 PWA (Progressive Web Apps) 不是一項技術，也不是一個框架，我們可以把她理解為一種模式，一種通過應用一些技...

cucumber 2019-08-01 18:21 評論0 收藏0
service worker在移動端H5項目的應用

摘要：和的關系不是一項技術，也不是一個框架，我們可以把她理解為一種模式，一種通過應用一些技術將在安全性能和體驗等方面帶來漸進式的提升的一種的模式。這里需要注意的是，首次注冊線程的頁面需要再次加載才會受其控制。 1. PWA和Service Worker的關系 PWA (Progressive Web Apps) 不是一項技術，也不是一個框架，我們可以把她理解為一種模式，一種通過應用一些技...

Tonny 2019-08-21 18:38 評論0 收藏0
Nginx與瀏覽器緩存

摘要：與瀏覽器緩存一瀏覽器對緩存的處理選項控制請求服務器策略是忽略資源的緩存策略的情況下額外強制請求服務器的意思。而節點只針對中的配置會覆蓋的配置。Nginx與瀏覽器緩存一、瀏覽器對緩存的處理：Internet選項　　★ 控制請求服務器策略：是忽略資源的緩存策略的情況下額外強制請求服務器的意思。　　 ?★?檢查存儲的頁面較新版本 ? ? ? ?　　1.每次訪問網頁時? ? ? ? ? ? ?...

jerry 2019-04-23 14:38 評論0 收藏0
瀏覽器緩存是什么？它的機制又是什么？

摘要：對于瀏覽器緩存，相信很多開發者對它真的是又愛又恨。那么瀏覽器緩存究竟是個什么樣的神奇玩意呢什么是瀏覽器緩存簡單來說，瀏覽器緩存就是把一個已經請求過的資源如頁面，圖片，，數據等拷貝一份副本儲存在瀏覽器中。對于瀏覽器緩存，相信很多開發者對它真的是又愛又恨。一方面極大地提升了用戶體驗，而另一方面有時會因為讀取了緩存而展示了錯誤的東西，而在開發過程中千方百計地想把緩存禁掉。那么瀏覽器緩存究竟...

jsummer 2019-08-06 13:37 評論0 收藏0