工程化——前端靜態資源緩存策略

增量更新是目前大部分團隊採用的緩存更新方案，能讓用戶在無感知的狀況獲取最新內容。具體實現方式一般是（通常咱們經過構建工具來實現，好比webpack）：

• 構建產出文件hash(如：index.d94f83fac22c203b788c.css)
• 更新html文件裏靜態資源的引用URL

因爲其餘資源是由html文件直接或間接引用才能夠被加載，若是html裏的靜態資源URL更新了，那請求的確定就是最新資源了。那咱們須要考慮的就是如何確保加載的html是最新的了，其餘的靜態資源就充分利用瀏覽器緩存以減小網絡請求提升web性能。瀏覽器緩存實質就是HTTP緩存，而HTTP緩存分爲強緩存和協商緩存。

強緩存

強緩存不會發送請求，直接從瀏覽器加載資源。是否命中強緩存根據HTTP Response頭部Expires、Cache-Control（max-age）來判斷。

• Expires經過返回一個過時時間來判斷是否過時，在此時間以前瀏覽器直接從緩存加載資源。但其缺點是返回的過時時間爲服務器時間，而比較是同客戶端時間比較，若是服務端和客戶端存在時間偏差就不許了。
• max-age返回的時間過時時間跨度，好比max-age=3600告訴瀏覽器接下來的1小時內使用緩存。這樣就解決了Expires時間偏差致使的問題。

強緩存命中優先判斷max-age，max-age優先級大於Expires，判斷流程以下：

協商緩存

• Etag和If-None-Match Etag的值是根據必定算法生成的字符串，用以判斷文件是否更改，相似於文件hash。在第一次訪問時，服務會返回該文件的Etag值，在以後的訪問經過在請求頭增長If-None-Match參數，把Etag的值帶過去，服務器經過比較Etag的值來判斷是否須要從新返回最新資源（200 or 304）。
• Last-Modified和If-Modified-Since Last-Modified爲該資源文件的最後修改時間。一樣在第一次返回，以後經過If-Modified-Since帶過去，服務器經過比較值來判斷是否須要返回最新資源。

若是 If-None-Match 和 If-Modified-Since 都有，則必須一次性都發給服務器，沒有優先級，實際中比較ETag就夠了。若是請求頭裏沒有，則每次都會返回最新的資源200

緩存判斷流程

爲了確保html每次都是最新的，咱們這裏不能使用強緩存。能夠在服務器（nginx、tomact）設置訪問html文件時Cache-Control爲no-cache。（這個須要在服務器配合設置，前端是處理不了的）