為什么使用瀏覽器緩存 緩存存在的內(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：緩存采用二進制的方式存儲，查看可以在地址欄中輸入about:cache
緩存存在的問題
既然存在了本地，那么最大的問題就是一旦服務(wù)器的文件更新了，而瀏覽器還在使用本地的緩存，會造成服務(wù)器端的修改不能生效。
緩存協(xié)商
緩存的文件是由服務(wù)器生成，在本地保存，所以對緩存的使用必須要雙方配合才能達到最好的效果，這樣就引入了緩存協(xié)商。
緩存協(xié)商其實就是瀏覽器在請求某個文件的時候，服務(wù)器在返回時會在頭部加一些額外的信息，如這個文件在多長時間內(nèi)可以使用、文件的最后修改時間是什么等等，瀏覽器在下次再請求這個文件的就會根據(jù)之前服務(wù)器在頭部加入的額外信息來對應(yīng)的進行一些處理。
緩存協(xié)商的簡單演示
http://levit.china.alibaba.com/guarantee/listBuyerContract/list.htm
注釋：左側(cè)的是一個.htm的請求，右側(cè)是一個js的請求
注釋：在第二次請求的時候.js的請求頭信息中多出了紅框中的三個值
緩存相關(guān)的header
Cache-control常用值：
public 指示響應(yīng)數(shù)據(jù)可以被任何客戶端緩存 private 指示響應(yīng)數(shù)據(jù)可以被非共享緩存所緩存。這表明響應(yīng)的數(shù)據(jù)可以 被發(fā)送請求的瀏覽器緩存，而不能被中介所緩存 no-cache 指示響應(yīng)數(shù)據(jù)不能被任何接受響應(yīng)的客戶端所緩存 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)先級。
Cache-control
打開一個新頁面
在原始窗口中單擊 Enter 按鈕
按 F5 鍵刷新
單擊 Back 或 Forward 按鈕
public
瀏覽器呈現(xiàn)來自緩存的頁面
瀏覽器呈現(xiàn)來自緩存的頁面
瀏覽器重新發(fā)送請求到服務(wù)器
瀏覽器呈現(xiàn)來自緩存的頁面
private
瀏覽器重新發(fā)送請求到服務(wù)器
第一次，瀏覽器重新發(fā)送請求到服務(wù)器；此后，瀏覽器呈現(xiàn)來自緩存的頁面
瀏覽器重新發(fā)送請求到服務(wù)器
瀏覽器呈現(xiàn)來自緩存的頁面
no-cache
瀏覽器重新發(fā)送請求到服務(wù)器
瀏覽器重新發(fā)送請求到服務(wù)器
瀏覽器重新發(fā)送請求到服務(wù)器
瀏覽器重新發(fā)送請求到服務(wù)器
max-age=xxx
在 xxx 秒后，瀏覽器重新發(fā)送請求到服務(wù)器
在 xxx 秒后，瀏覽器重新發(fā)送請求到服務(wù)器
瀏覽器重新發(fā)送請求到服務(wù)器
在 xxx 秒后，瀏覽器重新發(fā)送請求到服務(wù)器
Last-modified：在瀏覽器第一次請求頁面的時候如果返回的header中有這一項的值，則在下次請求的頭信息中會加入if-modified-since這個值，服務(wù)器端取到這個值后去判斷和該文件的最后修改時間是否一樣，如果一樣，則直接返回304（not modified），通知瀏覽器可以使用本地緩存。
E-tag：在瀏覽器第一次請求頁面的時候如果返回的header中有這一項的值，則在下次請求的頭信息中會加入if-None-match這個值，服務(wù)器端取到這個值后去和這個文件生成的E-tag值進行對比，如果一樣，則直接返回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)對所有的文件都進行緩存，是否使用另說）。剩下的五個請求是因為這幾個請求攜帶的參數(shù)都有一個每次都不一樣的，導(dǎo)致本地沒有與其對應(yīng)的緩存（例如參數(shù)中有系統(tǒng)本地時間）。
F5：所有的文件都會發(fā)送請求，有緩存的進行緩存協(xié)商，沒有修改的返回304使用本地緩存。
Ctrl+F5：所有文件都會發(fā)送請求，并且不進行緩存協(xié)商（cache-control:no-cache），每個文件重新返回（200）
此次整理的正文到這里就結(jié)束了，下面列出的是可能比較多關(guān)注的點：
1. Cache-control的值覆蓋其他的設(shè)置
2. Etag和last-modified共存的時候以Etag為準(zhǔn)
3. 在F5刷新的時候不論緩存過不過期都會和服務(wù)器進行緩存協(xié)商（帶上Etag、last-modified之類的信息）
4. 在ctrl+F5的時候直接在瀏覽器單方面決定不使用緩存（直接cache-control:no-cache）
5. 在后退的時候除非顯式的聲明no-cache，否則都會使用緩存（不論是否過期）
