• 為什么使用瀏覽器緩存
• 緩存存在的內(nèi)容
• 緩存協(xié)商
• 緩存協(xié)商的簡單演示
• 緩存相關(guān)的header
• 緩存相關(guān)header之間的關(guān)系
• 用戶的不同操作
• 用戶不同操作對應(yīng)瀏覽器的不同處理方式
• 測試環(huán)境與線上環(huán)境取js方式不同導(dǎo)致的問題

為什么使用本地緩存

對于一些比較少變化的文件，如js、css等,，可以在第一次請求之后將這些文件先放在本地，在下次再去請求這些文件的時候就可以不用再去請求,，直接使用本地的就可以了,，直接消滅請求。這是最好的減少帶寬占用,、降低服務(wù)器壓力的方法,，同時也可以最大限度的提升頁面的顯示速度（直接本地取）,。

查看緩存：

ie：Internet選項-設(shè)置-查看文件

Firefox：緩存采用二進(jìn)制的方式存儲,，查看可以在地址欄中輸入about:cache

緩存存在的問題

       既然存在了本地，那么最大的問題就是一旦服務(wù)器的文件更新了,，而瀏覽器還在使用本地的緩存,，會造成服務(wù)器端的修改不能生效。

緩存協(xié)商

       緩存的文件是由服務(wù)器生成,，在本地保存,，所以對緩存的使用必須要雙方配合才能達(dá)到最好的效果，這樣就引入了緩存協(xié)商,。

       緩存協(xié)商其實就是瀏覽器在請求某個文件的時候,，服務(wù)器在返回時會在頭部加一些額外的信息，如這個文件在多長時間內(nèi)可以使用,、文件的最后修改時間是什么等等,，瀏覽器在下次再請求這個文件的就會根據(jù)之前服務(wù)器在頭部加入的額外信息來對應(yīng)的進(jìn)行一些處理。

緩存協(xié)商的簡單演示

http://levit.china.alibaba.com/guarantee/listBuyerContract/list.htm

注釋：左側(cè)的是一個.htm的請求,，右側(cè)是一個js的請求

注釋：在第二次請求的時候.js的請求頭信息中多出了紅框中的三個值

緩存相關(guān)的header

Cache-control常用值：

1. public 指示響應(yīng)數(shù)據(jù)可以被任何客戶端緩存
2. private 指示響應(yīng)數(shù)據(jù)可以被非共享緩存所緩存,。這表明響應(yīng)的數(shù)據(jù)可以           被發(fā)送請求的瀏覽器緩存，而不能被中介所緩存
3. no-cache 指示響應(yīng)數(shù)據(jù)不能被任何接受響應(yīng)的客戶端所緩存
4. max-age 數(shù)據(jù)經(jīng)過max-age設(shè)置的秒數(shù)后就會失效,，相當(dāng)于HTTP/1.0中的Expires頭,。如果在一次響應(yīng)中同時設(shè)置了max-age和 Expires，那么max-age將具有較高的優(yōu)先級,。

Last-modified：在瀏覽器第一次請求頁面的時候如果返回的header中有這一項的值,，則在下次請求的頭信息中會加入if-modified-since這個值,，服務(wù)器端取到這個值后去判斷和該文件的最后修改時間是否一樣，如果一樣,，則直接返回304（not modified）,，通知瀏覽器可以使用本地緩存。

E-tag：在瀏覽器第一次請求頁面的時候如果返回的header中有這一項的值,，則在下次請求的頭信息中會加入if-None-match這個值,，服務(wù)器端取到這個值后去和這個文件生成的E-tag值進(jìn)行對比，如果一樣,，則直接返回304（not modified）,，通知瀏覽器可以使用本地緩存。Etag默認(rèn)生成規(guī)則是根據(jù)文件的inode,、文件大小,、文件修改時間，可以通過配置選擇其中的某幾項來生成,、

Expires:過期時間,，在這個時間之前，不會再去想服務(wù)器發(fā)任何請求,，直接用本地緩存

緩存相關(guān)header的關(guān)系

Cache-control會覆蓋掉Expires的值,，即如果同時存在cache-control:max-age=900和expires:******，則以cache-control的值為準(zhǔn)

Etag和last-modified的值同時存在的時候,，last-modified的值失效,，僅判斷Etag。

用戶的幾種不同操作

       當(dāng)用戶打開一個新的瀏覽器窗口時的失效操作提高訪問速度,，提升用戶的體驗

       當(dāng)用戶在原始瀏覽器窗口中單擊 Enter 按鈕時的失效操作

       當(dāng)用戶單擊 Back 或 Forward 按鈕時的失效操作

       當(dāng)用戶按 F5 鍵刷新頁面時的失效操作

       用戶按ctrl+F5

不同的操作對應(yīng)的不同請求

下面截圖的情況為firefox中請求http://levit.china.alibaba.com/guarantee/listBuyerContract/list.htm這個網(wǎng)址的結(jié)果,。

新打開瀏覽器窗口：未過期的緩存直接使用本地的,，不向服務(wù)器發(fā)送請求

在地址欄單擊回車：未過期的緩存直接使用本地的,，不向服務(wù)器發(fā)送請求

（注：在ie中在地址欄單擊回車行為與下面的回退一樣，全部使用本地緩存,，不論過不過期）

回退：不論緩存由沒有過期,，都使用本地緩存?？梢钥闯鰜肀壬厦嫔倭藘蓚€請求,，原因是上圖中標(biāo)紅的請求的兩個文件的緩存都已過期，但在回退時不管是否已過期,，直接使用緩存,。（瀏覽器默認(rèn)對所有的文件都進(jìn)行緩存，是否使用另說）,。剩下的五個請求是因為這幾個請求攜帶的參數(shù)都有一個每次都不一樣的,，導(dǎo)致本地沒有與其對應(yīng)的緩存（例如參數(shù)中有系統(tǒng)本地時間）。

F5：所有的文件都會發(fā)送請求，有緩存的進(jìn)行緩存協(xié)商,，沒有修改的返回304使用本地緩存,。

Ctrl+F5：所有文件都會發(fā)送請求，并且不進(jìn)行緩存協(xié)商（cache-control:no-cache）,，每個文件重新返回（200）

此次整理的正文到這里就結(jié)束了,，下面列出的是可能比較多關(guān)注的點：

1.       Cache-control的值覆蓋其他的設(shè)置

2.       Etag和last-modified共存的時候以Etag為準(zhǔn)

3.       在F5刷新的時候不論緩存過不過期都會和服務(wù)器進(jìn)行緩存協(xié)商（帶上Etag、last-modified之類的信息）

4.       在ctrl+F5的時候直接在瀏覽器單方面決定不使用緩存（直接cache-control:no-cache）

5.       在后退的時候除非顯式的聲明no-cache,，否則都會使用緩存（不論是否過期）