快捷導(dǎo)航

解析瀏覽器端的AJAX緩存機(jī)制

更新時間：2016年06月21日 18:05:42 作者：code_bunny

這里我們來解析瀏覽器端的AJAX緩存機(jī)制,來共同看一下AJAX緩存與HTTP緩存的關(guān)系以及AJAX緩存的刷新時間問題

AJAX的緩存是由瀏覽器維持的，對于發(fā)向服務(wù)器的某個url，ajax僅在第一次請求時與服務(wù)器交互信息，之后的請求中，ajax不再向服務(wù)器提交請求，而是直接從緩存中提取數(shù)據(jù)。
有些情況下，我們需要每一次都從服務(wù)器得到更新后數(shù)據(jù)。思路是讓每次請求的url都不同，而又不影響正常應(yīng)用：在url之后加入隨機(jī)內(nèi)容。
e.g.

url=url+"&"+Math.random();

Key points:
1.每次請求的url都不一樣（ajax的緩存便不起作用）
2.不影響正常應(yīng)用（最基本的）

這里我們由兩條結(jié)論：

1:Ajax的緩存和HTTP的緩存是一樣的
現(xiàn)代瀏覽器的HTTP和緩存機(jī)制比Ajax的XMLHttpRequest對象要差很多,所以它不認(rèn)識也不關(guān)心Ajax請求.它僅僅是遵循普通的HTTP緩存規(guī)則,通過服務(wù)器返回的響應(yīng)頭來進(jìn)行緩存.
如果你已經(jīng)對 HTTP緩存有了解,那么你可以把HTTP緩存的知識用對Ajax緩存的理解上. 他們只有一點不同的,就是設(shè)置響應(yīng)頭的方式會和普通文件不一樣.
下面這些響應(yīng)頭可以讓你的Ajax可緩存:
Expires: 這一項應(yīng)該被設(shè)置成未來的某個合適的時間點,時間點的設(shè)置取決于內(nèi)容變動的頻繁程度.舉個栗子,如果請求的是個庫存數(shù)量,那么Expires的值可以是10秒以后.如果請求的是一個相片,那么Expires的值就可以久一點,因為它不會經(jīng)常變動.Expires頭可以讓瀏覽器在一段時間內(nèi)重用本地緩存數(shù)據(jù),從而避免任何不必要的與服務(wù)器數(shù)據(jù)交互.
Last-Modified: 設(shè)置這一項是一個很好的選擇,通過它,瀏覽器在發(fā)送條件性GET請求的時候會使用請求頭里的 If-Modified-Since 來檢查本地緩存的內(nèi)容.如果數(shù)據(jù)不需要更新,服務(wù)器會返回304響應(yīng)狀態(tài).
Cache-Control: 在合適的情況下,這個值應(yīng)該被設(shè)置為 Public ,這樣所有的中間代理和緩存都可以被保存并且與其他用戶共享內(nèi)容.在火狐里,它還支持HTTPS請求的緩存
當(dāng)然,如果你使用POST方式發(fā)送Ajax是不能緩存的,因為POST請求永遠(yuǎn)不會被緩存.如果你的Ajax請求會產(chǎn)生其他作用(比如銀行賬戶之間的轉(zhuǎn)賬),請使用POST請求.
我們設(shè)置了一個demo(這個demo已經(jīng)不能看了ヽ（≧□≦）ノ)來闡明這些頭信息是如何工作的. 在HttpWatch里,你可以看到我們在響應(yīng)頭信息里設(shè)置了以上三個響應(yīng)頭

2016621174746971.png (565×227)

如果你規(guī)律的點擊 ‘Ajax Update' 按鈕,時間的改變會趨向于每隔一分鐘一次.因為Expires響應(yīng)頭被設(shè)置為未來的一分鐘.在下面這張截圖里你可以看到:重復(fù)的點擊更新按鈕時,Ajax請求會讀取瀏覽器本地的緩存而不會產(chǎn)生網(wǎng)絡(luò)活動(發(fā)送和傳輸欄的值都是0)

2016621174823835.png (592×155)

最后一次1:06.531時刻的點擊發(fā)送的Ajax請求產(chǎn)生了網(wǎng)絡(luò)數(shù)據(jù)傳輸,因為緩存的數(shù)據(jù)已經(jīng)超過了一分鐘. 服務(wù)器返回200響應(yīng)狀態(tài)表示獲取到了一份新的數(shù)據(jù).
猜測這個demo應(yīng)該是一個按鈕,每點擊一次獲取一次當(dāng)前時間然后回現(xiàn)在頁面上.

2:IE瀏覽器在Expires時間過期之前不會刷新通過Ajax獲取的內(nèi)容.
有些時候,Ajax在頁面加載的時候就被用來填充頁面的某些部分(比如一個價格列表).它并不是通過用戶的某個事件(比如點擊某個按鈕)觸發(fā)的,而是在頁面加載的時候就通過javascript來發(fā)送的.就好像Ajax請求和那些嵌入資源(比如js和css)是一樣的.
如果你開發(fā)這樣的頁面,在刷新它的時候,很可能想要更新嵌入的Ajax請求內(nèi)容.對于嵌入資源(CSS文件,圖片等),瀏覽器會通過用戶刷新的方式是F5(刷新)還是Ctrl+F5(強(qiáng)制刷新)來自動發(fā)送下列不同類型的請求:
1.F5(刷新): 如果請求內(nèi)容帶有 Last-Modified 響應(yīng)頭,那么瀏覽器會發(fā)送條件性更新請求. 它使用 If-Modified-Since 請求頭進(jìn)行比較,這樣服務(wù)器就可以返回304狀態(tài)來避免傳輸不必要的數(shù)據(jù).
2.Ctrl+F5(強(qiáng)制刷新): 告訴瀏覽器發(fā)送無條件更新請求,請求頭的 Cache-Control 被設(shè)置為‘no-cache'.這告訴所有的中間代理和緩存:瀏覽器需要獲取最新的版本,無論它是否已經(jīng)被緩存.
Firefox把這個刷新的方式傳播到了那些在頁面加載的時候就發(fā)送的Ajax請求上,把這些Ajax請求當(dāng)成嵌入資源來處理.下面是HttpWatch在火狐下的截圖,顯示了Ajax Caching demo(這個demo已經(jīng)不能看了ヽ（≧□≦）ノ)刷新(F5)頁面時Ajax請求的效果:

2016621175010316.png (595×282)

火狐確保Ajax發(fā)起的請求是條件性的.在這個例子里,如果緩存數(shù)據(jù)不到10秒,服務(wù)器返回304,超過10秒,服務(wù)器返回200,重新傳送數(shù)據(jù).
在ie里,加載頁面時就發(fā)起的Ajax請求被看做是和頁面其他部分刷新毫無關(guān)系的,也不會被用戶的刷新方式所左右.如果緩存的ajax數(shù)據(jù)沒有過期,就不會有GET請求發(fā)送到服務(wù)器.它會直接從緩存里讀取數(shù)據(jù),從HttpWatch里看就是(Cache)結(jié)果.下面這個圖是在ie下緩存沒有過期的情況下按F5刷新:

2016621175032362.png (600×147)

就算是通過 Ctrl+F5 強(qiáng)制刷新,通過Ajax獲取的數(shù)據(jù)也是從緩存里讀取:

2016621175400871.png (583×130)

這就意味著,任何通過Ajax得到的內(nèi)容如果沒有過期,在ie下都不會被更新 - 即使你使用Ctrl+F5強(qiáng)制刷新. 唯一能確保你獲取最新數(shù)據(jù)的方法就是手動清楚緩存. 可以使用HttpWatch的工具欄:

2016621175426365.png (587×258)

注意,Cache結(jié)果和304結(jié)果是不同的.Cache其實是200(cache),304就是304.Cache其實沒有向服務(wù)器發(fā)送請求,可以從chrome里看到,它的耗時是0,response也是空.而304不同,
304請求是瀏覽器發(fā)起了一個條件性的請求,這個請求攜帶了 If-Modified-Since 請求頭,如果這個文件在瀏覽器發(fā)送的這個時間之后沒有修改過,服務(wù)器端就回返回一個304狀態(tài),告訴瀏覽器使用它本地的緩存內(nèi)容.它沒有Cache快,因為請求還是發(fā)送到了服務(wù)器端,只不過服務(wù)器端沒有發(fā)送數(shù)據(jù).
可以看下taobao首頁,里面既有200(cache)也有304.可以查看他們的區(qū)別.

總結(jié)：

我們都知道，ajax能提高頁面載入的速度的主要原因是通過ajax減少了重復(fù)數(shù)據(jù)的載入，真正做到按需獲取，既然如此，我們在寫ajax程序的時候不妨送佛送到西，在客戶端再做一次緩存,進(jìn)一步提高數(shù)據(jù)載入速度。那就是在載入數(shù)據(jù)的同時將數(shù)據(jù)緩存在瀏覽器內(nèi)存中，一旦數(shù)據(jù)被載入，只要頁面未刷新，該數(shù)據(jù)就永遠(yuǎn)的緩存在內(nèi)存中，當(dāng)用戶再次查看該數(shù)據(jù)時，則不需要從服務(wù)器上去獲取數(shù)據(jù)，極大的降低了服務(wù)器的負(fù)載和提高了用戶的體驗。

您可能感興趣的文章: