基於nginx如何設定瀏覽器協商快取

強快取與協商快取的差異

　　強快取：瀏覽器不與服務端協商直接取瀏覽器快取

　　協商快取：瀏覽器會先向伺服器確認資源的有效性後才決定是從快取中取資源還是重新取得資源

協商快取運作原理

　　現在有一個這樣的業務情境：後端的靜態資源會不定時地發生更新，而因為瀏覽器預設使用強緩存，會預設從瀏覽器快取取到過時的資源。

　　現在我們希望瀏覽器每次取得資源的時候都向後端確認資源是否更新，就要設定瀏覽器使用協商快取

　　那麼後端如何判斷資源是否更新了呢？這時就要用到etag和last-modified兩項回應頭。

　　每次收到一個靜態資源的請求時，後端都會將資源的最後修改時間（last-modified）、根據資源內容計算出來的etag放在回應頭給前端。

　　前端收到回應後將這兩個快取起來，然後在下次請求相同資源的時候，將這兩項的內容放到if-modified-since和if-none-match這兩項請求頭中。

　　服務端收到這兩項後，會與資源目前產生的etag和last-modified做比較，如果兩者都一致，表示資源沒有更新，服務端會傳回304空回應；否則，說明資源有更新，服務端會將完整的資源內容回傳

實作

　　那麼如何實現這樣一個複雜的過程呢？其實很簡單，只要使用nginx當靜態資源的伺服器，再在回應頭加上cache-control:no-cache就可以了。

　　下面來分步驟實作一下

　　1. 使用nginx作為靜態資源的伺服器

　　　　在nginx的設定中，將對靜態資源的請求對應到資源的磁碟路徑上

http {
  server {
  listen 80;
  ...
  location /picture/ {
    alias d:/luozixi/tcp_test/picture/;
    # alias是重定义路径
    # 比如访问127.0.0.1/picture/1_new.gif，则会映射为访问d:/luozixi/tcp_test/picture/1_new.gif
    # web应用根本不会收到请求，picture的请求都被nginx处理了
    # alias是替换，root是拼接
    autoindex on;
    # 访问127.0.0.1/picture/，会得到目录的索引界面
    }
  }
}

　　2. 重新載入nginx設定

nginx -s reload

　　3. 此時，請求靜態資源的時候nginx會自動在response頭中加上etag和last-modified

　　

　　4. 但是這時發現，如果沒有配置cache-contrl: no-cache，瀏覽器在下次請求這個資源的時候不會將請求發向後端，而是直接從快取中取得資源

　　5. 在nginx中設定

location /picture/ { 
  add_header cache-control no-cache;
  alias d:/luozixi/tcp_test/picture/; 
}

　　6.清除瀏覽器快取後第一次發起請求，會得到一個正常的200 response，而且回應頭裡面已經有了cache-control: no-cache，表示使用協商快取

　　7.再次發起請求後，會發現請求頭已經帶上了if-modified-since和if-none-match兩項

　　

　　8.服務端（nginx）收到這兩項後，會與資源目前產生的etag和last-modified做比較，如果兩者都一致，說明資源沒有更新，服務端會回傳304空回應；否則，說明資源有更新，服務端會將完整的資源內容回傳

　　　　另外，伺服器驗證if-modified-since的方式只是簡單的字串比較，即使資源的last-modified比if-modified-since要早，服務端仍認為資源有更新

　　9.瀏覽器在收到304回應後，會從瀏覽器快取中取資源。因此速度非常塊

　　

no-cache與no-store的差異

　　no-cache表示不快取過期資源，緩存會向伺服器進行有效處理確認之後處理資源

　　而no-store才是真正的不進行快取。

以上是基於nginx如何設定瀏覽器協商快取的詳細內容。更多資訊請關注PHP中文網其他相關文章！