前端代碼的部署和緩存

一、靜态資源優化方案：

1. 配置超長時間的本地緩存 —— 節省帶寬，提高性能
2. 采用内容摘要作為緩存更新依據 —— 精确的緩存控制
3. 靜态資源CDN部署 —— 優化網絡請求
4. 更資源釋出路徑實作非覆寫式釋出 —— 平滑更新

【詳細請參考：https://www.zhihu.com/question/20790576/answer/32602154】

二、這個裡面就有一個問題：index.html怎麼辦呢？如果使用者緩存了index.html，那麼怎麼才能讓index.html更新緩存呢？

1、把域名映射到index.html上面，每次通路域名的時候，都傳回index.html的内容       

2、設定index.html的響應頭： Cache-Control =  public, max-age=0      

經過這樣設定之後，index.html不會被緩存，每次都到服務端擷取最新的頁面

三、Cache-Control no-cache與max-age=0的差別

no-cache — 強制每次請求直接發送給源伺服器，而不經過本地緩存版本的校驗。

max-age>0 時 直接從遊覽器緩存中提取 

max-age<=0 時 向server 發送http 請求确認 ,該資源是否有修改 有的話 傳回200 ,無的話 傳回304.

四、HTTP頭資訊控制緩存

浏覽器請求流程

• 浏覽器第一次請求流程圖：

• 浏覽器再次請求時：

2.2.2 幾個重要概念解釋

• Expires政策：Expires是Web伺服器響應消息頭字段，在響應http請求時告訴浏覽器在過期時間前浏覽器可以直接從浏覽器緩存取資料，而無需再次請求。不過Expires 是HTTP 1.0的東西，現在預設浏覽器均預設使用HTTP 1.1，是以它的作用基本忽略。Expires 的一個缺點就是，傳回的到期時間是伺服器端的時間，這樣存在一個問題，如果用戶端的時間與伺服器的時間相差很大（比如時鐘不同步，或者跨時區），那麼誤差就很大，是以在HTTP 1.1版開始，使用Cache-Control: max-age=秒替代。
• Cache-control政策（重點關注）：Cache-Control與Expires的作用一緻，都是指明目前資源的有效期，控制浏覽器是否直接從浏覽器緩存取資料還是重新發請求到伺服器取資料。隻不過Cache-Control的選擇更多，設定更細緻，如果同時設定的話，其優先級高于Expires。

值可以是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age
各個消息中的指令含義如下：
Public訓示響應可被任何緩存區緩存。
Private訓示對于單個使用者的整個或部分響應消息，不能被共享緩存處理。這允許伺服器僅僅描述當使用者的部分響應消息，此響應消息對于其他使用者的請求無效。
no-cache訓示請求或響應消息不能緩存，該選項并不是說可以設定”不緩存“，容易望文生義~
no-store用于防止重要的資訊被無意的釋出。在請求消息中發送将使得請求和響應消息都不使用緩存，完全不存下來。
max-age訓示客戶機可以接收生存期不大于指定時間（以秒為機關）的響應。
min-fresh訓示客戶機可以接收響應時間小于目前時間加上指定時間的響應。
max-stale訓示客戶機可以接收超出逾時期間的響應消息。如果指定max-stale消息的值，那麼客戶機可以接收超出逾時期指定值之内的響應消息。                

• Last-Modified/If-Modified-Since：Last-Modified/If-Modified-Since要配合Cache-Control使用。

Last-Modified：标示這個響應資源的最後修改時間。web伺服器在響應請求時，告訴浏覽器資源的最後修改時間。
If-Modified-Since：當資源過期時（使用Cache-Control辨別的max-age），發現資源具有Last-Modified聲明，則再次向web伺服器請求時帶上頭 If-Modified-Since，表示請求時間。web伺服器收到請求後發現有頭If-Modified-Since 則與被請求資源的最後修改時間進行比對。若最後修改時間較新，說明資源又被改動過，則響應整片資源内容（寫在響應消息包體内），HTTP ；若最後修改時間較舊，說明資源無新修改，則響應HTTP  (無需包體，節省浏覽)，告知浏覽器繼續使用所儲存的cache。                

• Etag/If-None-Match：Etag/If-None-Match也要配合Cache-Control使用。

Etag：web伺服器響應請求時，告訴浏覽器目前資源在伺服器的唯一辨別（生成規則由伺服器決定）。Apache中，ETag的值，預設是對檔案的索引節（INode），大小（Size）和最後修改時間（MTime）進行Hash後得到的。
If-None-Match：當資源過期時（使用Cache-Control辨別的max-age），發現資源具有Etage聲明，則再次向web伺服器請求時帶上頭If-None-Match （Etag的值）。web伺服器收到請求後發現有頭If-None-Match 則與被請求資源的相應校驗串進行比對，決定傳回或。                

• 既生Last-Modified何生Etag？你可能會覺得使用Last-Modified已經足以讓浏覽器知道本地的緩存副本是否足夠新，為什麼還需要Etag（實體辨別）呢？HTTP1.1中Etag的出現主要是為了解決幾個Last-Modified比較難解決的問題：

Last-Modified标注的最後修改隻能精确到秒級，如果某些檔案在1秒鐘以内，被修改多次的話，它将不能準确标注檔案的修改時間
如果某些檔案會被定期生成，當有時内容并沒有任何變化，但Last-Modified卻改變了，導緻檔案沒法使用緩存
有可能存在伺服器沒有準确擷取檔案修改時間，或者與代理伺服器時間不一緻等情形
           

Etag是伺服器自動生成或者由開發者生成的對應資源在伺服器端的唯一辨別符，能夠更加準确的控制緩存。Last-Modified與ETag一起使用時，伺服器會優先驗證ETag。

• yahoo的Yslow法則中則提示謹慎設定Etag：需要注意的是分布式系統裡多台機器間檔案的last-modified必須保持一緻，以免負載均衡到不同機器導緻比對失敗，Yahoo建議分布式系統盡量關閉掉Etag(每台機器生成的etag都會不一樣，因為除了 last-modified、inode 也很難保持一緻)。
• Pragma行是為了相容HTTP1.0，作用與Cache-Control: no-cache是一樣的。
• 最後總結下幾種狀态碼的差別：

【詳情參考：https://my.oschina.net/leejun2005/blog/369148】