對(duì)于Web前端而言，cache可以說(shuō)是無(wú)處不在，通常是2個(gè)環(huán)節(jié)之間，就會(huì)引入一個(gè)cache做為提升整體效率的角色。例如A和B兩者之間的數(shù)據(jù)交換，為了提升整體的效率，引入角色C，而C被用于當(dāng)做熱點(diǎn)數(shù)據(jù)的存儲(chǔ)，或者是某種中間處理的機(jī)制。
也就是我們常常說(shuō)的“空間換時(shí)間”，犧牲一部分代價(jià)，來(lái)?yè)Q取整體效率的提升。
那么我們一起來(lái)看看前端當(dāng)中，有那些比較關(guān)鍵的緩存？它們又是怎樣協(xié)調(diào)工作的呢？我們一起來(lái)看看哈。
1. 域名轉(zhuǎn)為IP地址（域名服務(wù)器DNS緩存）
我們知道url其實(shí)只是一個(gè)別名，真實(shí)的服務(wù)器請(qǐng)求地址，實(shí)際上是一個(gè)IP地址。獲得IP地址的方式，就是查詢DNS映射表。雖然這是一個(gè)非常簡(jiǎn)單的查詢，但如果每次用戶訪問(wèn)一個(gè)url都去查詢DNS一次，未免顯得太頻繁。DNS會(huì)告訴你，你別老是經(jīng)常過(guò)來(lái)，萬(wàn)一我掛了，我們就無(wú)法愉快地玩耍了。
各個(gè)瀏覽器的緩存時(shí)間，會(huì)有一定的差別。而在chrome瀏覽器中查看dns的緩存時(shí)間的方式：chrome://net-internals/#dns
因此，瀏覽器一般會(huì)在本地會(huì)建立一個(gè)DNS緩存，在一段比較長(zhǎng)的時(shí)間里，都是使用本地的緩存映射。例如，在win7系統(tǒng)的cmd里，可以通過(guò)“ipconfig /flushdns ”的方式來(lái)刷新本地DNS。
優(yōu)點(diǎn)：url映射為IP非?？臁?/span>
成本：消耗一定的瀏覽器空間來(lái)存儲(chǔ)映射關(guān)系
2. 訪問(wèn)服務(wù)器，獲取靜態(tài)內(nèi)容（地理位置分布式服務(wù)CDN）
有同學(xué)可能會(huì)說(shuō)，這個(gè)CDN不是緩存。其實(shí)，CDN的原則就是將離你很遠(yuǎn)的東西，放在離你很近的地方，通過(guò)這種方式提高用戶的訪問(wèn)速度。從這個(gè)角度，它也可以理解為犧牲空間成本換取了時(shí)間，本質(zhì)上也帶有cache的嫌疑，我們權(quán)且當(dāng)做一種特殊的cache吧。
優(yōu)點(diǎn)：解決用戶離服務(wù)器太遠(yuǎn)的時(shí)候，網(wǎng)絡(luò)路由中跳來(lái)跳去的嚴(yán)重耗時(shí)。
成本：全國(guó)各地部署多套靜態(tài)存儲(chǔ)服務(wù)，管理成本比較高，發(fā)布新文件的時(shí)候，需要等待全國(guó)節(jié)點(diǎn)的更新等。
3. 瀏覽器本地緩存（無(wú)網(wǎng)絡(luò)交互類型）
在雅虎前端優(yōu)化的14條原則中，其中一條就是盡量消滅請(qǐng)求，以達(dá)到降低服務(wù)器壓力和提升用戶體驗(yàn)的效果。靜態(tài)文件，例如Js、html、css、圖片等內(nèi)容，很多內(nèi)容可以1次請(qǐng)求，然后未來(lái)就直接訪問(wèn)本地，不再請(qǐng)求web服務(wù)器。
常用的實(shí)現(xiàn)方法是通過(guò)Http協(xié)議頭中的expire和max-age來(lái)控制，這兩者的使用方法和區(qū)別，我這里就不贅敘了哈。還有一種最近HTML5中很火的，則是localStorage，尤其在移動(dòng)端也被做為一個(gè)強(qiáng)大的緩存，甚至當(dāng)做一種本地存儲(chǔ)來(lái)廣泛使用。
優(yōu)點(diǎn)：減少網(wǎng)絡(luò)傳輸，加快頁(yè)面內(nèi)容展示速度，提升用戶體驗(yàn)。
成本：占用客戶端的部分內(nèi)存和磁盤，影響實(shí)時(shí)性。
4. 瀏覽器和web服務(wù)協(xié)議緩存（有網(wǎng)絡(luò)交互類型）
瀏覽器的本地緩存是存在過(guò)期時(shí)間的，一旦過(guò)期，就必須重新向服務(wù)器請(qǐng)求。這個(gè)時(shí)候，會(huì)有兩種情形：
（1）服務(wù)器的文件或者內(nèi)容沒有更新，可以繼續(xù)使用瀏覽器本地緩存。
（2）服務(wù)器的文件或者內(nèi)容已經(jīng)更新，需要重新請(qǐng)求，通過(guò)網(wǎng)絡(luò)傳輸新的文件或者內(nèi)容。
這里的協(xié)商方式也可以通過(guò)Http協(xié)議來(lái)控制，Last-Modified和Etag，這個(gè)時(shí)候請(qǐng)求服務(wù)器，如果是內(nèi)容沒有發(fā)生變更的情況，服務(wù)器會(huì)返回304 Not Modified。這樣的話，就不需要每次訪問(wèn)服務(wù)器都通過(guò)網(wǎng)絡(luò)傳輸一個(gè)比較大的文件或者數(shù)據(jù)包，只要簡(jiǎn)單的http應(yīng)答就可以達(dá)到相同的請(qǐng)求文件效果。
優(yōu)點(diǎn)：減少頻繁的網(wǎng)絡(luò)大數(shù)據(jù)包傳輸，節(jié)約帶寬，提升用戶體驗(yàn)。
成本：增加了的服務(wù)器處理的步驟，消耗更多的CPU資源。
5. 瀏覽器中間代理
上面的幾種cache機(jī)制，實(shí)際上都是非常常見。但是，在移動(dòng)互聯(lián)網(wǎng)時(shí)代，流量昂貴是很多用戶心中的深深的痛。于是，又出現(xiàn)了一種新型的中間chache，也就是在瀏覽器和web服務(wù)器再架設(shè)一個(gè)中間代理。這個(gè)代理服務(wù)器會(huì)幫助手機(jī)瀏覽器去請(qǐng)求web頁(yè)面，然后將web頁(yè)面進(jìn)行處理和壓縮（例如壓縮文件和圖片），使頁(yè)面變小，然后再傳輸給手機(jī)端的瀏覽器。
部分手機(jī)瀏覽器（例如chrome），號(hào)稱可以節(jié)省流量，實(shí)際上就是上述做法。但是，也分為兩種情況：
（1）用戶的網(wǎng)絡(luò)和手機(jī)配置都比較差，因?yàn)轫?yè)面被壓縮變小，加載和傳輸速度變快，并且節(jié)約了流量。
（2）用戶的網(wǎng)絡(luò)和手機(jī)配置都比較好，本身直連速度已經(jīng)很快了，反而因?yàn)樵O(shè)置了中間代理，加載速度變慢，也可節(jié)約流量。
優(yōu)點(diǎn)：節(jié)約用戶流量，大部分情況下提升了加載速度。
成本：需要架設(shè)中間代理服務(wù)器，對(duì)各種文件進(jìn)行壓縮，有比較高的服務(wù)器維護(hù)成本。
6. 預(yù)加載緩存機(jī)制
這種加載方式也是主要流行在移動(dòng)端，為了解決手機(jī)網(wǎng)速慢和瀏覽器加載性能的問(wèn)題，瀏覽器會(huì)判斷頁(yè)面的關(guān)聯(lián)內(nèi)容，進(jìn)行“預(yù)加載”。也就是說(shuō)，在用戶瀏覽A頁(yè)面的時(shí)候，就下載并且加載B頁(yè)面的內(nèi)容。給用戶的體驗(yàn)就是，B頁(yè)面一瞬間就出現(xiàn)了，中間沒有任何延遲的感覺，從而帶來(lái)更好的極佳的用戶體驗(yàn)。
這種實(shí)現(xiàn)機(jī)制，往往由瀏覽器來(lái)實(shí)現(xiàn)，當(dāng)然，手機(jī)頁(yè)面本身，也可以通過(guò)JS來(lái)自身實(shí)現(xiàn)。而這種機(jī)制也存在一些問(wèn)題，瀏覽器需要預(yù)判用戶的瀏覽行為，在一些場(chǎng)景下，這個(gè)預(yù)判算法本身不一定準(zhǔn)確，如果不準(zhǔn)確則帶來(lái)一定的流量、內(nèi)存和系統(tǒng)資源的浪費(fèi)。、
優(yōu)點(diǎn)：給用戶帶來(lái)極佳的頁(yè)面展示體驗(yàn)。
缺點(diǎn)：預(yù)判實(shí)現(xiàn)比較復(fù)雜，占據(jù)一定的內(nèi)存和手機(jī)系統(tǒng)資源，可能產(chǎn)生流量和資源浪費(fèi)。
前端的chache當(dāng)然不僅僅如此簡(jiǎn)單，如果細(xì)致到每一個(gè)小環(huán)節(jié)和組成部分，我們會(huì)發(fā)現(xiàn)實(shí)際上是無(wú)處不在的，例如瀏覽器的渲染行為、網(wǎng)絡(luò)網(wǎng)卡的傳輸環(huán)節(jié)，小環(huán)節(jié)和小環(huán)節(jié)之間也有無(wú)數(shù)這種類型的cache角色。
這個(gè)就如同幾何分形學(xué)中的自相似性：從整體上看符合某種組成規(guī)律或者特性，同時(shí)，從局部看，仍然符合某種組成的規(guī)律或者特性。
聯(lián)系客服
