瀏覽器緩存機制

直接引用百科的：瀏覽器緩存(browser caching)是爲了節約帶寬加速用戶瀏覽頁面，瀏覽器在用戶磁盤上對最近請求過的文檔進行存儲，當訪問者再次請求這個頁面的時候，瀏覽器能夠從本地磁盤顯示文檔，這樣就能夠加速頁面瀏覽。

通常而言瀏覽器緩存的設置是ngnix經過向瀏覽器端傳送http頭信息進行的,瀏覽器默認也進行了一些設置。

瀏覽器緩存主要有兩類：緩存協商：Last-Modified,Etag和完全緩存：Cache－Control，Expires.如下分別對其進行解釋：

Expires:

Expires是http響應頭字段，表示資源的過時時間如圖：

Date表示此文件最近一次向服務器請求的時間，從圖能夠看出來，31 may 2015 14:43:09的時候過時，緩存了15天。可是expires是http1.0的東西，如今瀏覽器都默認http1.1，因此expires的沒有什麼做用。

Cache-Control:

此響應頭字段功能與expires同樣，都是設置過時時間，如上圖所示，過時時間爲1296000s即15天。可是它有更多設置如no-cache,max-age等等，若是與expires一塊兒設置的話，優先級較高。

以上兩個頭字段是用來設置資源的過時時間的，若是過時就從新從服務器獲取資源，不然就調用緩存資源；而下面的頭字段是用來判斷服務器文件是否修改的，修改了，瀏覽器就從新從服務器端獲取資源，不然就調用緩存資源。最須要注意的是expires和cache-control是強制緩存，使用了它們，無論你服務器的文件有無改動都要等到過時時間到了，才從服務器更新文件。

Last-Modified/if-Modified-Since:

last-modified表示服務器資源最近修改的時間；當cache-control過時時，發現有last-modified,則在request headers中攜帶if-modified-since向服務器作請求，服務器收到if-modified-since後與last-modified進行對比，若是last-modified時間較新，表示文件被修改過，則向瀏覽器端發送http200,不然304.

Etag/if-None-Match:

etag是服務器響應請求時，告訴瀏覽器當前資源的惟一標識，由服務器生成；當cache-control過時時，發現有etag，則在requrest headers中攜帶if-none-match向服務器發送請求，服務器收到後與etag進行對比，若是不同表示修改過則向瀏覽器端發送200，不然304.

看一下長什麼樣，如圖：

靜態資源版本更新與緩存：

學習了上面的一些理論知識，那到底這些知識能夠怎麼使用呢？答案時前端靜態資源版本更新與緩存的應用，這屬於前端工程化的問題了。

假如咱們有一個index.html頁面，裏面包括一個 a.css文件。作一下請求，查看network

若是用戶每次訪問都要從新加載是否是很影響帶寬和性能！

咱們能夠利用如下緩存協商304，那麼就是這樣：

可是這樣用戶每次訪問頁面的時候仍是要向服務器作一次請求呀，那麼咱們是否是能夠利用完全緩存，那麼是這樣：

這樣就行了，瀏覽器不會向服務器作請求了，可是，若是服務器端的文件改了，瀏覽器端怎麼知道呢？

咱們能夠這樣，在調用a.css的後面加上版本序列，如今我請求的是另外的url了，哈哈！

好吧，總結到這裏，其實前端靜態資源版本更新和緩存還有不少內容