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

資訊專(zhuān)欄INFORMATION COLUMN

一篇文章理解前端緩存

yiliang / 739人閱讀

摘要：說(shuō)起前端緩存，這真是一個(gè)百看百懂，百懂百忘的重災(zāi)區(qū)。作為一個(gè)前端開(kāi)發(fā)，我們一般不控制緩存，它對(duì)我們來(lái)說(shuō)是透明的。名字解析工欲善其事必先利其器，在分析整個(gè)緩存流程之前，先明確常見(jiàn)的緩存名詞。它是一個(gè)通用頭，能分別在請(qǐng)求報(bào)文和響應(yīng)報(bào)文中使用。

說(shuō)起前端緩存，這真是一個(gè)百看百懂，百懂百忘的重災(zāi)區(qū)。每次看的時(shí)候都覺(jué)得自己懂了，但是過(guò)兩天又忘了。究其原因，緩存對(duì)前端來(lái)說(shuō)很重要，但是控制權(quán)卻是在瀏覽器和服務(wù)器手上。作為一個(gè)前端開(kāi)發(fā)，我們一般不控制緩存，它對(duì)我們來(lái)說(shuō)是透明的。但是這不是我們忘記的理由。為了拯救我自己于水火之中，所以寫(xiě)了這篇文章，期望于達(dá)到“一看就懂，至死不忘”的地步。
1. 名字解析

工欲善其事必先利其器，在分析整個(gè)緩存流程之前，先明確常見(jiàn)的緩存名詞。

1.1 Expires 
Expires: HTTP 1.0的規(guī)范。用來(lái)告訴瀏覽器這個(gè)資源的過(guò)期時(shí)間。

例如： Expires:Sun, 29 Apr 2018 14:21:43 GMT

每次請(qǐng)求這個(gè)資源時(shí)，瀏覽器自動(dòng)判斷是否超出了這個(gè)時(shí)間，如果沒(méi)有超出，就直接使用緩存(http status:200 from cache)，不發(fā)送請(qǐng)求。如果超出，看其他參數(shù)的情況。

缺點(diǎn)：由于Expires這個(gè)時(shí)間是服務(wù)器端的時(shí)間，如果客戶(hù)端的時(shí)間和服務(wù)器端的時(shí)間有誤差，那么Expires就沒(méi)什么用了。

1.2 Cache-Control 
Cache-Control: HTTP 1.1規(guī)范。用來(lái)定義緩存的過(guò)期時(shí)間。

Expires有服務(wù)器時(shí)間和瀏覽器時(shí)間不統(tǒng)一的問(wèn)題，所以HTTP 1.1新定義了Cache-Control。它是一個(gè)通用HTTP頭，能分別在請(qǐng)求報(bào)文和響應(yīng)報(bào)文中使用。例如：

Cache-Control有很多值可以設(shè)置，在這里只介紹兩個(gè)最常用的。

Cache-Control: no-cache // 瀏覽器不緩存, 返回的結(jié)果要看其他參數(shù)的情況

Cache-Control: max-age=600 // 數(shù)字，秒，表示瀏覽器緩存10分鐘，這段時(shí)間內(nèi)即使服務(wù)器資源有修改，瀏覽器也不會(huì)改變，這段時(shí)間內(nèi)請(qǐng)求，http status是200 from cache

當(dāng)Cache-Control和Expires同時(shí)存在時(shí)，Cache-Control會(huì)覆蓋Expires。可以這么記憶，HTTP 1.1的新生代比老的HTTP 1.0總要有更多的優(yōu)勢(shì)。

缺點(diǎn)：沒(méi)有缺點(diǎn)。

1.3 ETag 
ETag: HTTP 1.1規(guī)范。服務(wù)器通過(guò)算法計(jì)算出的資源唯一標(biāo)志符（類(lèi)同Md5碼）。

例如：ETag:"d9f096d1f708c35fdd9c78bd422883cc"

Expires和Cache-Control只決定了瀏覽器是否要發(fā)送請(qǐng)求到服務(wù)器，并沒(méi)有決定服務(wù)器是否要返回資源。決定服務(wù)器操作的是另外兩個(gè)HTTP頭，ETag和Last-Modified。

瀏覽器在第一次請(qǐng)求時(shí)會(huì)保留ETag的值，并在下一次請(qǐng)求時(shí)通過(guò)If-None-Match或If-Match兩個(gè)請(qǐng)求頭將ETag傳給服務(wù)器。服務(wù)器傳來(lái)的ETag跟自己的ETag是否一致，就能清楚的知道是否要給瀏覽器新的資源文件。如果兩者一致，則http response返回空響應(yīng)(http status:304)，否則，返回新的資源(http status:200)

缺點(diǎn)：沒(méi)有缺點(diǎn)。

1.4 Last-Modified 
Last-Modified: HTTP 1.1規(guī)范。表示資源在服務(wù)器上的最后修改時(shí)間。

例如：Last-Modified:Sat, 28 Apr 2018 03:08:34 GMT

瀏覽器在第一次請(qǐng)求時(shí)會(huì)保留Last-Modified的值，并在下一次請(qǐng)求時(shí)通過(guò)If-Modified-Since或If-Unmodified-Since兩個(gè)請(qǐng)求頭將Last-Modified傳給服務(wù)器。服務(wù)器比對(duì)兩個(gè)Last-Modified是否一致。如果兩者一致，則http response返回空響應(yīng)(http status:304)，否則，返回新的資源(http status:200)

唔，這貨與ETag簡(jiǎn)直一模一樣有沒(méi)有。真的是簡(jiǎn)單的一塌糊涂呢，可惡……=_="Last-Modified和Etag都存在的情況，它們要都符合才能返回304。這也很好理解，都是HTTP1.1的小兄弟，大家權(quán)利要統(tǒng)一。

缺點(diǎn)：如果這個(gè)資源在服務(wù)器上被修改了，但是最后的內(nèi)容卻沒(méi)有變。這時(shí)候Last-Modified就匹配不上了，相當(dāng)于多返回了一個(gè)相同的資源文件，浪費(fèi)了流量。

2. 緩存判斷順序

上面已經(jīng)說(shuō)過(guò)以下三條規(guī)則：

Expires和Cache-Control決定了瀏覽器是否要發(fā)送請(qǐng)求到服務(wù)器，ETag和Last-Modified決定了服務(wù)器是要返回304+空內(nèi)容還是新的資源文件

Expires和Cache-Control同時(shí)存在時(shí)，Cache-Control會(huì)覆蓋Expires

ETag和Last-Modified同時(shí)存在時(shí)，兩者都要滿(mǎn)足才會(huì)返回304

所以，緩存判斷順序可以簡(jiǎn)單的理解為：

 1. 先判斷Cache-Control，在Cache-Control的max-age之內(nèi)，直接返回200 from cache
 2. 沒(méi)有Cache-Control再判斷Expires，再Expires之內(nèi)，直接返回200 from cache
 3. Cache-Control=no-cache或者不符合Expires，瀏覽器向服務(wù)器發(fā)送請(qǐng)求
 4. 服務(wù)器同時(shí)判斷ETag和Last-Modified，都一致，返回304，有任何一個(gè)不一致，返回200
3. 總結(jié)

弄清楚它們的關(guān)系之后，是不是賊簡(jiǎn)單，媽媽再也不用擔(dān)心我的緩存啦！好冷的笑話(huà)（手動(dòng)滑稽臉）

參考文檔

《淺談瀏覽器http的緩存機(jī)制》

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

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

相關(guān)文章

  • 一篇文章理解Web緩存

    摘要：的數(shù)據(jù)將一直保存在瀏覽器內(nèi)，直到用戶(hù)清除瀏覽器緩存數(shù)據(jù)為止。它也是一個(gè)被標(biāo)準(zhǔn)廢棄的功能，主要是通過(guò)文件來(lái)標(biāo)注要被緩存的靜態(tài)文件清單。盡管也有文件，但是與應(yīng)用緩存卻完全不同。另外，用來(lái)控制緩存的使用。 最近把前端緩存重新整理了一下，從整體的層面上把前端所有能用的緩存方案梳理了一遍。同時(shí)，對(duì)于http緩存，使用了表格的方案，使得原先晦澀難記的特性變得清晰明了。特記錄于此，若有什么欠缺，也望...

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

  • 一篇文章理解Web緩存

    摘要：的數(shù)據(jù)將一直保存在瀏覽器內(nèi)，直到用戶(hù)清除瀏覽器緩存數(shù)據(jù)為止。它也是一個(gè)被標(biāo)準(zhǔn)廢棄的功能，主要是通過(guò)文件來(lái)標(biāo)注要被緩存的靜態(tài)文件清單。盡管也有文件，但是與應(yīng)用緩存卻完全不同。另外，用來(lái)控制緩存的使用。 最近把前端緩存重新整理了一下，從整體的層面上把前端所有能用的緩存方案梳理了一遍。同時(shí)，對(duì)于http緩存，使用了表格的方案，使得原先晦澀難記的特性變得清晰明了。特記錄于此，若有什么欠缺，也望...

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

  • 一篇文章理解前端緩存

    摘要：說(shuō)起前端緩存，這真是一個(gè)百看百懂，百懂百忘的重災(zāi)區(qū)。作為一個(gè)前端開(kāi)發(fā)，我們一般不控制緩存，它對(duì)我們來(lái)說(shuō)是透明的。名字解析工欲善其事必先利其器，在分析整個(gè)緩存流程之前，先明確常見(jiàn)的緩存名詞。它是一個(gè)通用頭，能分別在請(qǐng)求報(bào)文和響應(yīng)報(bào)文中使用。 說(shuō)起前端緩存，這真是一個(gè)百看百懂，百懂百忘的重災(zāi)區(qū)。每次看的時(shí)候都覺(jué)得自己懂了，但是過(guò)兩天又忘了。究其原因，緩存對(duì)前端來(lái)說(shuō)很重要，但是控制權(quán)卻是在瀏...

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

  • 一篇文章理解前端緩存

    摘要：說(shuō)起前端緩存，這真是一個(gè)百看百懂，百懂百忘的重災(zāi)區(qū)。作為一個(gè)前端開(kāi)發(fā)，我們一般不控制緩存，它對(duì)我們來(lái)說(shuō)是透明的。名字解析工欲善其事必先利其器，在分析整個(gè)緩存流程之前，先明確常見(jiàn)的緩存名詞。它是一個(gè)通用頭，能分別在請(qǐng)求報(bào)文和響應(yīng)報(bào)文中使用。 說(shuō)起前端緩存，這真是一個(gè)百看百懂，百懂百忘的重災(zāi)區(qū)。每次看的時(shí)候都覺(jué)得自己懂了，但是過(guò)兩天又忘了。究其原因，緩存對(duì)前端來(lái)說(shuō)很重要，但是控制權(quán)卻是在瀏...

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

  • 前端基礎(chǔ)

    摘要：談起閉包，它可是兩個(gè)核心技術(shù)之一異步基于打造前端持續(xù)集成開(kāi)發(fā)環(huán)境本文將以一個(gè)標(biāo)準(zhǔn)的項(xiàng)目為例，完全拋棄傳統(tǒng)的前端項(xiàng)目開(kāi)發(fā)部署方式，基于容器技術(shù)打造一個(gè)精簡(jiǎn)的前端持續(xù)集成的開(kāi)發(fā)環(huán)境。 這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機(jī)制，如果讀完本文還不懂，可以揍我。 不論你是javascript新手還是老鳥(niǎo)，不論是面試求職，還是日...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<