快捷導(dǎo)航

基于nginx設(shè)置瀏覽器協(xié)商緩存過程詳解

更新時(shí)間：2019年12月17日 10:18:43 作者：luozx207

這篇文章主要介紹了基于nginx設(shè)置瀏覽器協(xié)商緩存過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

強(qiáng)緩存與協(xié)商緩存的區(qū)別

　　強(qiáng)緩存：瀏覽器不與服務(wù)端協(xié)商直接取瀏覽器緩存

　　協(xié)商緩存：瀏覽器會(huì)先向服務(wù)器確認(rèn)資源的有效性后才決定是從緩存中取資源還是重新獲取資源

協(xié)商緩存運(yùn)作原理

　　現(xiàn)在有一個(gè)這樣的業(yè)務(wù)情景：后端的靜態(tài)資源會(huì)不定時(shí)地發(fā)生更新，而因?yàn)闉g覽器默認(rèn)使用強(qiáng)緩存，會(huì)默認(rèn)從瀏覽器緩存中取到過時(shí)的資源。

　　現(xiàn)在我們希望瀏覽器每次獲取資源的時(shí)候都向后端確認(rèn)資源是否更新，就要設(shè)置瀏覽器使用協(xié)商緩存

　　那么后端如何判斷資源是否更新了呢？這時(shí)就要用到Etag和Last-Modified兩項(xiàng)響應(yīng)頭。

　　每次收到一個(gè)靜態(tài)資源的請(qǐng)求時(shí)，后端都將資源的最后修改時(shí)間（Last-Modified）、根據(jù)資源內(nèi)容計(jì)算出來的Etag放在響應(yīng)頭給前端。

　　前端收到響應(yīng)后將這兩項(xiàng)緩存起來，然后在下次請(qǐng)求同樣資源的時(shí)候，將這兩項(xiàng)的內(nèi)容放到If-Modified-Since和If-None-Match這兩項(xiàng)請(qǐng)求頭中。

　　服務(wù)端收到這兩項(xiàng)后，會(huì)與資源當(dāng)前生成的Etag和Last-Modified做比較，如果兩者都一致，說明資源沒有更新，服務(wù)端會(huì)返回304空響應(yīng)；否則，說明資源有更新，服務(wù)端會(huì)將完整的資源內(nèi)容返回

實(shí)現(xiàn)

　　那么如何實(shí)現(xiàn)這樣一個(gè)復(fù)雜的過程呢？其實(shí)很簡(jiǎn)單，只要使用nginx作為靜態(tài)資源的服務(wù)器，再在響應(yīng)頭加上Cache-Control:no-cache就可以了。

　　下面來分步驟實(shí)現(xiàn)一下

　　1. 使用nginx作為靜態(tài)資源的服務(wù)器

　　　　在nginx的配置中，將對(duì)靜態(tài)資源的請(qǐng)求映射到資源的磁盤路徑上

http {
  server {
  listen 80;
  ...
  location /picture/ {
    alias D:/luozixi/tcp_test/picture/;
    # alias是重定義路徑
    # 比如訪問127.0.0.1/picture/1_new.gif，則會(huì)映射為訪問D:/luozixi/tcp_test/picture/1_new.gif
    # web應(yīng)用根本不會(huì)收到請(qǐng)求，picture的請(qǐng)求都被nginx處理了
    # alias是替換，root是拼接
    autoindex on;
    # 訪問127.0.0.1/picture/，會(huì)得到目錄的索引界面
    }
  }
}

　　2. 重新加載nginx配置

nginx -s reload

　　3. 此時(shí)，請(qǐng)求靜態(tài)資源的時(shí)候nginx會(huì)自動(dòng)在response頭中加上Etag和Last-Modified兩項(xiàng)

　　4. 但是這時(shí)發(fā)現(xiàn)，如果不配置Cache-Contrl: no-cache，瀏覽器在下次請(qǐng)求這個(gè)資源的時(shí)候不會(huì)將請(qǐng)求發(fā)向后端，而是直接從緩存中獲取資源

　　5. 在nginx中配置

location /picture/ { 
  add_header Cache-Control no-cache;
  alias D:/luozixi/tcp_test/picture/; 
}

　　6.清除瀏覽器緩存后第一次發(fā)起請(qǐng)求，會(huì)得到一個(gè)正常的200 Response，而且響應(yīng)頭里已經(jīng)有了Cache-Control: no-cache，表示使用協(xié)商緩存

　　7.再次發(fā)起請(qǐng)求后，會(huì)發(fā)現(xiàn)請(qǐng)求頭已經(jīng)帶上了If-Modified-Since和If-None-Match兩項(xiàng)

　　8.服務(wù)端（nginx）收到這兩項(xiàng)后，會(huì)與資源當(dāng)前生成的Etag和Last-Modified做比較，如果兩者都一致，說明資源沒有更新，服務(wù)端會(huì)返回304空響應(yīng)；否則，說明資源有更新，服務(wù)端會(huì)將完整的資源內(nèi)容返回

　　　　另外，服務(wù)器驗(yàn)證If-Modified-Since的方式只是簡(jiǎn)單的字符串比較，即使資源的Last-Modified比If-Modified-Since要早，服務(wù)端仍認(rèn)為資源有更新

　　9.瀏覽器在收到304響應(yīng)后，會(huì)從瀏覽器緩存中取資源。因此速度非常塊