原文地址我們要學(xué)會利用瀏覽器的緩存機(jī)制來減少對服務(wù)器的訪問來，加快我們網(wǎng)頁的加載速度，首先我們要先了解一下，關(guān)于瀏覽器緩存的一些基本概念。

以前，面試的時候被問到這樣一道題，你認(rèn)為天貓的首頁是靜態(tài)的還是動態(tài)的？

這里，其實(shí)就問的是，瀏覽器緩存。

1.瀏覽器在加載一個網(wǎng)頁的時候，打開控制面板的network選項，就可以看到加載的一個個資源文件，后面還有加載這些文件的時間，其實(shí)，有一些文件是不需要每次都去訪問服務(wù)器來，加載的，比如網(wǎng)站的logo,像這些時間長不變的我們就可以把他們緩存到瀏覽器，下載訪問的時候直接就從本地加載文件，不會訪問服務(wù)器，這樣可以加快瀏覽器的加載速度。

2.瀏覽器緩存分為倆大類，一個就是強(qiáng)緩存，還有一個就是協(xié)商緩存。而我們控制緩存的方式就是通過修改請求消息的頭部，或者響應(yīng)消息的頭部。

3.強(qiáng)緩存。

修改的是`Cache-Control`字段，控制資源文件是否被緩存。常用的有

Cache-control: no-cache 意味著文件的內(nèi)容不應(yīng)當(dāng)被緩存。這在搜索或者翻頁結(jié)果中非常有用，因為同樣的URL，對應(yīng)的內(nèi)容會發(fā)生變化。

Cache-control:max-age:99999999 指定緩存過期的相對時間秒數(shù)。

它的緩存原理是：

瀏覽器第一次跟服務(wù)器請求一個資源，服務(wù)器會把`Cache-Control`的跟著資源返回來。

瀏覽器再請求這個資源時，先從緩存中尋找，找到這個資源后，根據(jù)它第一次的請求時間和Cache-Control設(shè)定的有效期，計算出一個資源過期時間，再拿這個過期時間跟當(dāng)前的請求時間比較，如果請求時間在過期時間之前，就能命中緩存，否則就不行。

如果緩存沒有命中，瀏覽器直接從服務(wù)器加載資源時，Cache-Control Header在重新加載的時候會被更新。

4.協(xié)商緩存

修改的是`last-modified : Tue, 04 Apr 2017 21:05:15 GMT`字段，表示這個資源在服務(wù)器上的最后修改時間，

它的緩存原理是：

當(dāng)瀏覽器向服務(wù)器請求資源的時候，服務(wù)器會把時間隨響應(yīng)消息返回到瀏覽器。

當(dāng)再次請求服務(wù)器的時候，瀏覽器會把`last-modified`傳給服務(wù)器，服務(wù)器會比較一下該文件在服務(wù)器的最后修改時間A和瀏覽器發(fā)過來的時間B。

如果A<=B，那么就不會重新請求資源，否則，服務(wù)器就給客戶端返回新的資源文件。