HTTP緩存和瀏覽器的本地存儲(chǔ)

?一、HTTP緩存

http請(qǐng)求做為影響前端性能極為重要的一環(huán)，因?yàn)檎?qǐng)求受網(wǎng)絡(luò)影響很大，如果網(wǎng)絡(luò)很慢的情況下,頁(yè)面很可能會(huì)空白很久。對(duì)于首次進(jìn)入網(wǎng)站的用戶可能要通過(guò)優(yōu)化接口性能和接口數(shù)量來(lái)解決。但是，對(duì)于重復(fù)進(jìn)入頁(yè)面的用戶，除了瀏覽器緩存，http緩存可以很大程度對(duì)已經(jīng)加載過(guò)的頁(yè)面進(jìn)行優(yōu)化。

1.緩存位置

從緩存位置上來(lái)看，分為4種，從上往下依次檢查是否命中，如果但都沒(méi)有命中則重新發(fā)起請(qǐng)求。

Service Worker 是運(yùn)行在瀏覽器背后的獨(dú)立線程，一般可以用來(lái)實(shí)現(xiàn)緩存功能。使用 Service Worker的話，傳輸協(xié)議必須為 HTTPS。

Memory Cache 也就是內(nèi)存中的緩存，主要包含的是當(dāng)前中頁(yè)面中已經(jīng)抓取到的資源,例如頁(yè)面上已經(jīng)下載的樣式、腳本、圖片等。讀取內(nèi)存中的數(shù)據(jù)肯定比磁盤(pán)快,內(nèi)存緩存雖然讀取高效，可是緩存持續(xù)性很短，會(huì)隨著進(jìn)程的釋放而釋放。 一旦我們關(guān)閉 Tab 頁(yè)面，內(nèi)存中的緩存也就被釋放了。

內(nèi)存緩存中有一塊重要的緩存資源是preloader相關(guān)指令(例如)下載的資源。它可以一邊解析js/css文件，一邊網(wǎng)絡(luò)請(qǐng)求下一個(gè)資源。

Disk Cache 也就是存儲(chǔ)在硬盤(pán)中的緩存，讀取速度慢點(diǎn)，但是什么都能存儲(chǔ)到磁盤(pán)中，比之 Memory Cache 勝在容量和存儲(chǔ)時(shí)效性上。

絕大部分的緩存都來(lái)自Disk Cache，在HTTP 的協(xié)議頭中設(shè)置。

Push Cache(推送緩存)是 HTTP/2 中的內(nèi)容，當(dāng)以上三種緩存都沒(méi)有命中時(shí)，它才會(huì)被使用。它只在會(huì)話(Session)中存在，一旦會(huì)話結(jié)束就被釋放，并且緩存時(shí)間也很短暫，在Chrome瀏覽器中只有5分鐘左右，同時(shí)它也并非嚴(yán)格執(zhí)行HTTP頭中的緩存指令。

2.用戶操作對(duì)緩存的影響

下面主要說(shuō)一下前端優(yōu)化能入手的地方，也就是強(qiáng)緩存和協(xié)商緩存，并且緩存策略都是通過(guò)設(shè)置 HTTP Header 來(lái)實(shí)現(xiàn)的。

3.強(qiáng)緩存

瀏覽器在第一次訪問(wèn)接口后的response headers里會(huì)攜帶一些字段，這些字段決定關(guān)于這個(gè)請(qǐng)求的緩存情況，

與強(qiáng)緩存相關(guān)的header字段有兩個(gè)：

1、expires：過(guò)氣網(wǎng)紅，這是http1.0時(shí)的規(guī)范;它的值為一個(gè)絕對(duì)時(shí)間的GMT格式的時(shí)間字符串，如Mon, 10 Jun 2015 21:31:12 GMT，如果發(fā)送請(qǐng)求的時(shí)間在expires之前，那么本地緩存始終有效，否則就會(huì)發(fā)送請(qǐng)求到服務(wù)器來(lái)獲取資源

2、cache-control：新星：max-age=number，這是http1.1時(shí)出現(xiàn)的header信息，主要是利用該字段的max-age值來(lái)進(jìn)行判斷，它是一個(gè)相對(duì)值;資源第一次的請(qǐng)求時(shí)間和Cache-Control設(shè)定的有效期，計(jì)算出一個(gè)資源過(guò)期時(shí)間，再拿這個(gè)過(guò)期時(shí)間跟當(dāng)前的請(qǐng)求時(shí)間比較，如果請(qǐng)求時(shí)間在過(guò)期時(shí)間之前，就能命中緩存，否則就不行;

no-cache：不使用本地緩存。需要使用協(xié)商緩存，先與服務(wù)器確認(rèn)返回的響應(yīng)是否被更改，如果之前的響應(yīng)中存在ETag，那么請(qǐng)求的時(shí)候會(huì)與服務(wù)端驗(yàn)證，如果資源未被更改，則可以避免重新下載。

no-store：直接禁止游覽器緩存數(shù)據(jù)，每次用戶請(qǐng)求該資源，都會(huì)向服務(wù)器發(fā)送一個(gè)請(qǐng)求，每次都會(huì)下載完整的資源。

public：可以被所有的用戶緩存，包括終端用戶和CDN等中間代理服務(wù)器。

private：只能被終端用戶的瀏覽器緩存，不允許CDN等中繼緩存服務(wù)器對(duì)其緩存。

注意：如果cache-control與expires同時(shí)存在的話，cache-control的優(yōu)先級(jí)高于expires

強(qiáng)緩存時(shí)段命中，會(huì)直接從緩存中返回?cái)?shù)據(jù)，返回值200;這一時(shí)間段，不管接口內(nèi)容有沒(méi)有變化都不會(huì)進(jìn)行請(qǐng)求更新。

4.協(xié)商緩存

當(dāng)沒(méi)有強(qiáng)緩存時(shí)，會(huì)向服務(wù)端尋求幫助，也就是問(wèn)一下服務(wù)端有沒(méi)有更改，向接口判斷是否有緩存。如果命中協(xié)商緩存則返回304狀態(tài)碼，并且從本地返回緩存內(nèi)容。如果沒(méi)有命中，則重新發(fā)起請(qǐng)求。

協(xié)商緩存需要跟服務(wù)端通過(guò)特殊標(biāo)示連接，即第一次請(qǐng)求的響應(yīng)頭帶上某個(gè)字段(Last-Modified或者Etag)，則后續(xù)請(qǐng)求則會(huì)帶上對(duì)應(yīng)的請(qǐng)求字段(If-Modified-Since或者If-None-Match)，若響應(yīng)頭沒(méi)有Last-Modified或者Etag字段，則請(qǐng)求頭也不會(huì)有對(duì)應(yīng)的字段。

具體過(guò)程如下：

Last-Modified/If-Modified-Since

1.瀏覽器第一次跟服務(wù)器請(qǐng)求一個(gè)資源，respone的header里加上Last-Modified：表示這個(gè)資源在服務(wù)器上的最后修改時(shí)間

2.瀏覽器再次跟服務(wù)器請(qǐng)求這個(gè)資源時(shí)，在request的header上加上If-Modified-Since的header：上一次請(qǐng)求時(shí)返回的Last-Modified的值

3.服務(wù)器再次收到資源請(qǐng)求時(shí)，會(huì)判斷最后修改時(shí)間是否有變化，如果沒(méi)有變化則返回304 Not Modified，但是不會(huì)返回資源內(nèi)容;如果有變化，就正常返回資源內(nèi)容，Last-Modified會(huì)被修改為最新的值。如果沒(méi)有變化，服務(wù)器返回304 Not Modified，Last-Modified不會(huì)修改，response header中不會(huì)再添加Last-Modified的header

4.瀏覽器收到304的響應(yīng)后，就會(huì)從緩存中加載資源

Etag/If-None-Match

由服務(wù)器生成的每個(gè)資源的唯一標(biāo)識(shí)字符串，只要資源有變化就這個(gè)值就會(huì)改變;其判斷過(guò)程與Last-Modified/If-Modified-Since類(lèi)似，與Last-Modified不一樣的是，當(dāng)服務(wù)器返回304 Not Modified的響應(yīng)時(shí)，由于ETag重新生成過(guò)，response header中還會(huì)把這個(gè)ETag返回，即使這個(gè)ETag跟之前的沒(méi)有變化。

1.一些文件也許會(huì)周期性的更改，但是他的內(nèi)容并不改變(僅僅改變的修改時(shí)間)，這個(gè)時(shí)候我們并不希望客戶端認(rèn)為這個(gè)文件被修改了，而重新GET;

2.某些文件修改非常頻繁，比如在秒以下的時(shí)間內(nèi)進(jìn)行修改，(比方說(shuō)1s內(nèi)修改了N次)，If-Modified-Since能檢查到的粒度是s級(jí)的，這種修改無(wú)法判斷(或者說(shuō)UNIX記錄MTIME只能精確到秒);

3.某些服務(wù)器不能精確的得到文件的最后修改時(shí)間。

Last-Modified與ETag是可以一起使用的，服務(wù)器會(huì)優(yōu)先驗(yàn)證ETag，一致的情況下，才會(huì)繼續(xù)比對(duì)Last-Modified，最后才決定是否返回304。

二、瀏覽器本地存儲(chǔ)

瀏覽器本地緩存最常用的是cookie、localStroage、sessionStroage、webSql、indexDB。

1.cookie使用

cookie的用法很簡(jiǎn)單,可以通過(guò)服務(wù)端設(shè)置，js也可以通過(guò)documnet.cookie="名稱(chēng)=值;"(不要忘記以;分割)來(lái)設(shè)置。

cookie的值字符串可以用encodeURIComponent()來(lái)保證它不包含任何逗號(hào)、分號(hào)或空格(cookie值中禁止使用這些值).

cookie一般用做為登陸態(tài)保存、密碼、個(gè)人信息等關(guān)鍵信息保存使用，所以為了安全也是遵守同源策略原則的。

可以通過(guò)下面參數(shù)具體設(shè)置：

;path=path (例如 '/', '/mydir') 如果沒(méi)有定義，默認(rèn)為當(dāng)前文檔位置的路徑。

;domain=domain (例如 'example.com'， 'subdomain.example.com') 如果沒(méi)有定義，默認(rèn)為當(dāng)前文檔位置的路徑的域名部分。與早期規(guī)范相反的是，在域名前面加 . 符將會(huì)被忽視，因?yàn)闉g覽器也許會(huì)拒絕設(shè)置這樣的cookie。如果指定了一個(gè)域，那么子域也包含在內(nèi)。

;max-age=max-age-in-seconds (例如一年為606024*365)

;expires=date-in-GMTString-format 如果沒(méi)有定義，cookie會(huì)在對(duì)話結(jié)束時(shí)過(guò)期這個(gè)值的格式參見(jiàn)Date.toUTCString()

;secure (cookie只通過(guò)https協(xié)議傳輸)

;HttpOnly 限制web頁(yè)面程序的browser端script程序讀取cookie

缺點(diǎn)

容量有限制，不能超過(guò)4kb

在請(qǐng)求頭上帶著數(shù)據(jù)安全性差

2.localStorage和sessionStorage使用

html5新增本地存儲(chǔ)，localStorage生命周期是永久，除非主動(dòng)清除localStorage信息，否則這些信息將永遠(yuǎn)存在。存放數(shù)據(jù)大小為一般為5MB,sessionStorage僅在當(dāng)前會(huì)話下有效，關(guān)閉頁(yè)面或?yàn)g覽器后被清除。而且它僅在客戶端(即瀏覽器)中保存，不參與和服務(wù)器的通信。也是遵守同源策略原則的

//?1、保存數(shù)據(jù)到本地?
//?第一個(gè)參數(shù)是保存的變量名，第二個(gè)是賦給變量的值?
localStorage.setItem('key',?'value');?
//復(fù)雜類(lèi)型儲(chǔ)存需要**利用JSON.stringify**將對(duì)象轉(zhuǎn)換成字符串；?
//利用**JSON.parse**將字符串轉(zhuǎn)換成對(duì)象?
//?2、從本地存儲(chǔ)獲取數(shù)據(jù)?
localStorage.getItem('key');?
//?3、從本地存儲(chǔ)刪除某個(gè)已保存的數(shù)據(jù)?
localStorage.removeItem('key');?
//?4、清除所有保存的數(shù)據(jù)?
localStorage.clear();?

3. Web SQL

WebSQL是前端的一個(gè)獨(dú)立模塊，是web存儲(chǔ)方式的一種，我們調(diào)試的時(shí)候會(huì)經(jīng)常看到，只是一般很少使用。并且，當(dāng)前只有谷歌支持，ie和火狐均不支持。

主要方法：

1.openDatabase：這個(gè)方法使用現(xiàn)有的數(shù)據(jù)庫(kù)或者新建的數(shù)據(jù)庫(kù)創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)對(duì)象。

2.transaction：這個(gè)方法讓我們能夠控制一個(gè)事務(wù)，以及基于這種情況執(zhí)行提交或者回滾。

3.executeSql：這個(gè)方法用于執(zhí)行實(shí)際的 SQL 查詢。

4.indexDB

IndexedDB 就是瀏覽器提供的本地?cái)?shù)據(jù)庫(kù)，它可以被網(wǎng)頁(yè)腳本創(chuàng)建和操作。IndexedDB 允許儲(chǔ)存大量數(shù)據(jù)，提供查找接口，還能建立索引。這些都是 LocalStorage 所不具備的。就數(shù)據(jù)庫(kù)類(lèi)型而言，IndexedDB 不屬于關(guān)系型數(shù)據(jù)庫(kù)(不支持 SQL 查詢語(yǔ)句)，更接近 NoSQL 數(shù)據(jù)庫(kù)。

分享名稱(chēng)：HTTP緩存和瀏覽器的本地存儲(chǔ)
當(dāng)前鏈接：http://muchs.cn/news/99227.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、Google、響應(yīng)式網(wǎng)站、網(wǎng)站導(dǎo)航、關(guān)鍵詞優(yōu)化、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)