成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

瀏覽器緩存控制

kaka / 2914人閱讀

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

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

//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頭文件中已經(jīng)寫入的相關(guān)的信息

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

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

output: {
    path: "./dist/",
    //為了減少提交文件數(shù)，采用 ?_v=[chunkhash:8]的文件命名規(guī)則
    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")
  }

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/61883.html

相關(guān)文章

  • HTTP 緩存的關(guān)鍵路徑

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

    Anleb 評論0 收藏0

  • service worker在移動端H5項目的應(yīng)用

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

    cucumber 評論0 收藏0

  • service worker在移動端H5項目的應(yīng)用

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

    Tonny 評論0 收藏0

  • Nginx與瀏覽器緩存

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

    jerry 評論0 收藏0

  • 瀏覽器緩存是什么？它的機(jī)制又是什么？

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

    jsummer 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<