一.瀏覽器的緩存機制
緩存是做web優(yōu)化的過程中始終繞不開的一個話題，因為優(yōu)化的重頭戲就是資源的加載速度既鞠；如果能直接使用緩存煤傍，就可以避免向服務(wù)器請求及加載資源，極大的減少下載文件的大小及個數(shù)嘱蛋，在性能的優(yōu)化上會體現(xiàn)的非常明顯蚯姆。
客戶端的緩存原理如下圖所示：
瀏覽器在首次進行請求的時候，此時還沒有緩存洒敏；服務(wù)器接收到請求后龄恋，會在響應(yīng)頭加上Etag值，用以標識文件是否變化凶伙；而當(dāng)瀏覽器再次請求相同資源的時候郭毕，會將上次響應(yīng)頭中的Etag值放到請求頭中；而服務(wù)器再次接收到請求以后函荣，會根據(jù)回傳的If-None-Match以及If-Modified-Since字段進行判斷显押，如果文件沒有變化，就直接返回304而不是完整的資源傻挂，從而優(yōu)化加載速度煮落；這就是瀏覽器緩存的基本工作方式；
而如果我們在第一次請求的時候就設(shè)置好了過期時間（即cache-control或者expire的值）踊谋，瀏覽器再次訪問相同資源的時候蝉仇，就可以直接使用緩存，避免了再發(fā)起一次請求殖蚕；這樣就減少了一次請求轿衔，提升了瀏覽器的性能并且減少了服務(wù)器的負載；
實際效果到底如何呢睦疫？請參照我的實測數(shù)據(jù)害驹。
二.實測結(jié)果
這是我們實際項目中的頁面，大致如下蛤育；
網(wǎng)絡(luò)環(huán)境皆為chrome開發(fā)者調(diào)試工具模擬宛官；
在3g網(wǎng)絡(luò)條件下首次加載該頁面
在3g網(wǎng)絡(luò)條件下不設(shè)置cache-control/expire值葫松，再次訪問該頁面;此時返回值為304
此時資源的返回碼是304。size一欄是當(dāng)前304請求（即沒有返回完整資源）的實際大械紫础腋么；可以看到無論是請求大小還是加載時間都少了很多，這就是我們第一遍打開頁面比較慢亥揖，再次打開就會比較快的原因珊擂；
在3g網(wǎng)絡(luò)條件下設(shè)置cache-control/expire值，再次訪問該頁面;此時返回值為200（from cache）
此時資源的返回碼是200费变， size一欄是“200 from cache”摧扇，即直接啟用了緩存的內(nèi)容；而與沒有設(shè)置cache-control/expire相比挚歧，加載時間大致減少了三分之一到四分之一扛稽，還是很可觀的；
以下是2g網(wǎng)絡(luò)條件下的情況滑负，與3g情況下大致相同在张，只是慢了一點
首次加載：
不設(shè)置cache-control
設(shè)置cache-control
三.服務(wù)器端緩存
實際運行的項目中，除了靜態(tài)資源還有動態(tài)資源橙困，如接口瞧掺；對于他們的優(yōu)化通常通過服務(wù)器端緩存來解決耕餐；
服務(wù)器端無緩存情況下加載接口數(shù)據(jù)的情況（統(tǒng)計了20次的數(shù)據(jù)）
服務(wù)器端有緩存情況下加載接口數(shù)據(jù)的情況（統(tǒng)計了20次的數(shù)據(jù)）
