頁(yè)面緩存的范疇及原理
談到頁(yè)面性能優(yōu)化，緩存機(jī)制是其中非常重要的一環(huán)。緩存可以使頁(yè)面盡可能快地得到需要的文檔，具有減輕帶寬、降低服務(wù)的負(fù)荷、提高用戶體驗(yàn)等功能。隨著高級(jí)瀏覽器，尤其是移動(dòng)端的發(fā)展，可用的緩存范疇逐漸變大，簡(jiǎn)單地將其分為三類：
一、Application Cache
這是H5中的新特性，可以將頁(yè)面資源緩存在本地，當(dāng)頁(yè)面處于離線狀態(tài)下依然可以使用。使用方法很簡(jiǎn)單，大致分為2步：
但是目前來(lái)說(shuō)，離線存儲(chǔ)存在一些坑，曾經(jīng)為了提高頁(yè)面性能，使用過(guò)該技術(shù)，帶來(lái)了很多問(wèn)題，很快就刪除不再使用，簡(jiǎn)單總結(jié)下目前離線存儲(chǔ)的特點(diǎn)：
每個(gè)包含manifest的網(wǎng)頁(yè)都會(huì)隱式添加到appCache中
一個(gè)文件找不到，整個(gè)appCache均被丟棄
即使online，也會(huì)使用appCache
更新頁(yè)面，appCache文件本身必須修改，才能讓瀏覽器刷新緩存文件
關(guān)于appCache的缺點(diǎn)可以查看文檔：App cache is a Douchebag using the application cache
【文章福利】小編推薦自己的Linux內(nèi)核技術(shù)交流群:【891587639】整理了一些個(gè)人覺(jué)得比較好的學(xué)習(xí)書籍、視頻資料共享在群文件里面，有需要的可以自行添加哦?。。。ê曨l教程、電子書、實(shí)戰(zhàn)項(xiàng)目及代碼)? ? ?
二、localStorage
在移動(dòng)端，這個(gè)API被廣泛使用，將一些長(zhǎng)期不會(huì)發(fā)生改變的資源、歷史記錄保存在本地，通過(guò)在本地讀取加速網(wǎng)頁(yè)的訪問(wèn)速度。需要注意的是localStorage只能存儲(chǔ)字符串，如果要緩存對(duì)象的話，需要通過(guò)JSON.stringify進(jìn)行轉(zhuǎn)換，使用的時(shí)候再進(jìn)行解析。常用API如下：
三、HTTP
談到緩存會(huì)默認(rèn)是HTTP緩存。首先看看HTTP緩存的大致流程：
在上圖展示了HTTP使用緩存的過(guò)程，其中(3)、(4)環(huán)節(jié)存在是否判斷，當(dāng)均為true的時(shí)候才會(huì)直接使用本地緩存，其他情況請(qǐng)看下圖。但是還是存在下面兩個(gè)疑問(wèn)：
如何判斷是否足夠新鮮
如何進(jìn)行新鮮度驗(yàn)證？
3.1 文檔新鮮度判斷
在HTTP response中可能存在兩個(gè)屬性：Expires、Cache-Control，這兩個(gè)屬性決定了文檔的有效期。如果當(dāng)前時(shí)間滿足有效期，則直接讀取緩存文檔，返回給客戶端。
關(guān)于Expires: HTTP/1.0+定義該該屬性，存儲(chǔ)的是絕對(duì)日期，絕對(duì)日期依賴于計(jì)算機(jī)的時(shí)鐘時(shí)間。因?yàn)椴煌鳈C(jī)的時(shí)間中存在差異，所以使用Expires可能會(huì)造成一些問(wèn)題。
關(guān)于Cache-Control：HTTP/1.1中增加了該屬性，該屬性定義的時(shí)間是相對(duì)時(shí)間，因此就沒(méi)有Expires的問(wèn)題。Cache-Control存在如下幾個(gè)常用屬性
no-cache: 除非對(duì)資源進(jìn)行新鮮度檢驗(yàn)，否則客戶端不會(huì)使用已緩存的資源
no-store: 緩存應(yīng)盡快從存儲(chǔ)器中刪除，因?yàn)榭赡艽嬖诿舾行畔?/p>
max-age=number: 緩存在number時(shí)間內(nèi)是新鮮的
3.2 新鮮度檢驗(yàn)
新鮮度檢驗(yàn)有兩種方式：If-Modified-Since、If-No-Match，這兩個(gè)數(shù)據(jù)存在于HTTP request Header中，通過(guò)與服務(wù)器端的對(duì)比來(lái)判斷文檔是否發(fā)生改變。
If-Modified-Since：基于時(shí)間的比較，response Header與之對(duì)應(yīng)的是Last-Modified。
If-No-Match：基于實(shí)體標(biāo)簽進(jìn)行比較，response Header與之對(duì)應(yīng)的是Etag
3.3 緩存控制設(shè)置
通過(guò)在服務(wù)器端進(jìn)行緩存的設(shè)置。以Apache為例，可以使用mod_headers、mod_expires、mod_cern_meta設(shè)置Expires或Cache-Control。
