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

資訊專欄INFORMATION COLUMN

WEB緩存探究第二彈——實(shí)戰(zhàn)

waltr / 1026人閱讀

摘要：前言緩存探究第一彈中我們講了一些緩存的基礎(chǔ)知識(shí)和策略。第二彈我們來(lái)講講如何實(shí)際在項(xiàng)目中配置。在緩存探究第一彈定制緩存策略中已經(jīng)提到對(duì)于最好標(biāo)記為不緩存，以便及時(shí)獲取最新的靜態(tài)資源版本。

前言

WEB緩存探究第一彈中我們講了一些WEB緩存的基礎(chǔ)知識(shí)和策略。
第二彈我們來(lái)講講如何實(shí)際在項(xiàng)目中配置。

實(shí)戰(zhàn)

鑒于叉燒包本包是個(gè)前端，所以我們就以HTML和Node為例開(kāi)始

HTML——在header中加入meta標(biāo)簽

當(dāng)然根據(jù)我的測(cè)試發(fā)現(xiàn)這種方式好像并沒(méi)有什么卵用
這段代碼代表的是不需要瀏覽器緩存
Node.js——Express

鑒于Express2.x和3.x已經(jīng)是deprecated，所以此處以Express4.x為例。

HTML

在WEB緩存探究第一彈定制緩存策略中已經(jīng)提到對(duì)于HTML最好標(biāo)記為不緩存，以便及時(shí)獲取最新的靜態(tài)資源版本。
通常我們?cè)贓xpress中渲染HTML會(huì)用到以下類似的代碼?

//當(dāng)訪問(wèn)/index時(shí)，渲染模板index到頁(yè)面
router.get("index", (req, res)=>{
    res.render("index");
});

在這時(shí)我們可以使用res.set(field[,value])或者它的別名res.header(field [, value])為HTML設(shè)置Header。
此時(shí)代碼如下：

router.get("index", (req, res)=>{
    res.set("Cache-Control", "no-cache;max-age:0").render("index");
    /*
        或者  res.header("Cache-Control", "no-cache;max-age:0").render("index");
        或者  res.set({"Cache-Control":"no-cache", "max-age":0}).render("index");
    */
});

也可以使用中間件的方式批量為請(qǐng)求加上需要的頭：

app.use((req, res, next) => {
  res.set("Cache-Control", "no-cache;max-age:0");
  next();
})

效果如下：

不過(guò)細(xì)心的小伙伴應(yīng)該已經(jīng)發(fā)現(xiàn)了，

沒(méi)錯(cuò)機(jī)智的Express已經(jīng)為我們加上了ETag?

讓我們來(lái)復(fù)習(xí)一下第一彈的知識(shí)點(diǎn)，Etag資源的驗(yàn)證令牌，如果指紋變化請(qǐng)求時(shí)則會(huì)重新下載資源，否則則不會(huì)。

可能有的人就問(wèn)了，那我還需要給HTML加上Cache-Control嗎？

當(dāng)然僅用ETag來(lái)控制資源是否緩存和更新是合理的，不過(guò)我的意見(jiàn)是，如果明確不緩存該資源，最好還是要加上Cache-Control。

靜態(tài)資源

Express發(fā)布靜態(tài)資源通過(guò)的是express.static(root, [options])方法。

app.use(express.static(path.join(__dirname, "public")));

它的options參數(shù)可以配置header參數(shù)

靜態(tài)資源我們最好是為他加上一個(gè)超長(zhǎng)的過(guò)期時(shí)間，像這樣

//作為Exprss參數(shù)的maxAge的單位是毫秒，但是在header中單位是秒！不要搞錯(cuò)哦
app.use(express.static(path.join(__dirname, "public"), {
  maxAge: 3153600000,
  setHeaders: (res, path, stat) => {
    res.set({"Expires": new Date("2100-12-12")})
  }
}));
//如果需要分別為資源設(shè)置頭，可以使用多個(gè)`express.static`管理
//或者在`setHeaders`函數(shù)中通過(guò)判斷`path`后綴分別加上不同的頭
//當(dāng)然有更靠譜的方法歡迎聯(lián)系我 >w<

效果如下：

不過(guò)不要忘記給靜態(tài)資源文件名加上指紋哦

Nginx

同理，就不在重復(fù)敘述了，只寫一下配置

不過(guò)同時(shí)設(shè)置expires和add_header Cache-Control會(huì)在請(qǐng)求中出現(xiàn)復(fù)數(shù)的Cache-Control，但HTTP1.1能夠識(shí)別它。

location ~ .*.(gif|jpg|jpeg|png|bmp|swf)$ {
    etag off;   #關(guān)閉etag
    expires 1d; #有效期一天 
    # expires的單位可以使用
    # ms: 毫秒
    #  s: 秒
    #  m: 分鐘
    #  h: 小時(shí)
    #  d: 天
    #  w: 星期
    #  M: 月 (30 天)
    #  y: 年 (365 天)
}

location ~ .*.css$ {
    expires 1y; #有效期一年
    add_header Cache-Control public; #cache-control設(shè)為public
}


location ~ .*.js$ {
    expires 1y; #有效期一年
    add_header Cache-Control private; #cache-control設(shè)為private
}

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

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

相關(guān)文章

  • WEB緩存探究第二彈——實(shí)戰(zhàn)

    摘要：前言緩存探究第一彈中我們講了一些緩存的基礎(chǔ)知識(shí)和策略。第二彈我們來(lái)講講如何實(shí)際在項(xiàng)目中配置。在緩存探究第一彈定制緩存策略中已經(jīng)提到對(duì)于最好標(biāo)記為不緩存，以便及時(shí)獲取最新的靜態(tài)資源版本。 前言 WEB緩存探究第一彈中我們講了一些WEB緩存的基礎(chǔ)知識(shí)和策略。第二彈我們來(lái)講講如何實(shí)際在項(xiàng)目中配置。 實(shí)戰(zhàn) 鑒于叉燒包本包是個(gè)前端，所以我們就以HTML和Node為例開(kāi)始showImg(https...

    linkin 評(píng)論0 收藏0

  • WEB緩存探究第二彈——實(shí)戰(zhàn)

    摘要：前言緩存探究第一彈中我們講了一些緩存的基礎(chǔ)知識(shí)和策略。第二彈我們來(lái)講講如何實(shí)際在項(xiàng)目中配置。在緩存探究第一彈定制緩存策略中已經(jīng)提到對(duì)于最好標(biāo)記為不緩存，以便及時(shí)獲取最新的靜態(tài)資源版本。 前言 WEB緩存探究第一彈中我們講了一些WEB緩存的基礎(chǔ)知識(shí)和策略。第二彈我們來(lái)講講如何實(shí)際在項(xiàng)目中配置。 實(shí)戰(zhàn) 鑒于叉燒包本包是個(gè)前端，所以我們就以HTML和Node為例開(kāi)始showImg(https...

    孫淑建 評(píng)論0 收藏0

  • WEB緩存探究第二彈——實(shí)戰(zhàn)

    摘要：前言緩存探究第一彈中我們講了一些緩存的基礎(chǔ)知識(shí)和策略。第二彈我們來(lái)講講如何實(shí)際在項(xiàng)目中配置。在緩存探究第一彈定制緩存策略中已經(jīng)提到對(duì)于最好標(biāo)記為不緩存，以便及時(shí)獲取最新的靜態(tài)資源版本。 前言 WEB緩存探究第一彈中我們講了一些WEB緩存的基礎(chǔ)知識(shí)和策略。第二彈我們來(lái)講講如何實(shí)際在項(xiàng)目中配置。 實(shí)戰(zhàn) 鑒于叉燒包本包是個(gè)前端，所以我們就以HTML和Node為例開(kāi)始showImg(https...

    jcc 評(píng)論0 收藏0

  • 2017-07-28 前端日?qǐng)?bào)

    2017-07-28 前端日?qǐng)?bào) 精選 React的新引擎—React Fiber是什么？Chromeless 讓 Chrome 自動(dòng)化變得簡(jiǎn)單【譯】JavaScript屬性名稱中的隱藏信息前端測(cè)試框架 JestES6中的JavaScript工廠函數(shù)Why Composition is Harder with ClassesGET READY: A NEW V8 IS COMING, NODE.JS...

    golden_hamster 評(píng)論0 收藏0

  • weex踩坑之旅第二彈 ~ 在weex中集成vue-router

    摘要：也就是說(shuō)在中，我們的代碼是要在環(huán)境中運(yùn)行。而在中，是沒(méi)有等以及的，即所有的框架都是不可以使用的。比如相關(guān)組件，相關(guān)組件，等都不能在中引用。是可以在中使用的。 接著第一彈講，我們已經(jīng)搭建好一個(gè)屬于自己的weex項(xiàng)目了，然后如何開(kāi)發(fā)呢？由于之前項(xiàng)目中都是采用vue全家桶進(jìn)行開(kāi)發(fā)，路由使用vue-router插件，狀態(tài)管理使用vuex，Ajax前后臺(tái)交互使用axios，圖標(biāo)庫(kù)使用font-a...

    tyheist 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<