深入理解瀏覽器的各種刷新規(guī)則

PC瀏覽器的刷新方式我們常用的有大概四種：

    1. url+enter或者a標(biāo)簽的超鏈接點(diǎn)擊

    2. F5刷新/ctrl+R刷新/按鈕刷新

    3. ctrl+F5刷新/ctrl+shift+R刷新

    4. 后退刷新

WISE瀏覽器的刷新方式則一般是三種：

    1. url+enter或者a標(biāo)簽的超鏈接點(diǎn)擊

    2. 按鈕刷新

    3. 后退刷新

他們各有不同，不同瀏覽器下的效果也不一樣，以一個(gè)帶iframe的測(cè)試頁面為例，我們測(cè)試的前提是允許頁面緩存，下邊我們一個(gè)一個(gè)講：

PC瀏覽器

1. url+enter或者a標(biāo)簽的超鏈接點(diǎn)擊

若是你曾訪問過此網(wǎng)站，那么這種刷新方式是從緩存中直接提取數(shù)據(jù)，請(qǐng)求并沒有到服務(wù)端，當(dāng)然前提是這個(gè)網(wǎng)站設(shè)置了有效緩存。

如上是chrome瀏覽器下的html頁面的請(qǐng)求，請(qǐng)求參數(shù)中帶上了If-None-Match（有些情況下可能還會(huì)有If-Modified-Since參數(shù)），服務(wù)器返回304，說明這個(gè)請(qǐng)求訪問了服務(wù)器，并進(jìn)行了緩存驗(yàn)證。

     If-Modified-Since：如果請(qǐng)求的部分在指定時(shí)間之后被修改則請(qǐng)求成功，未被修改則返回304代碼，對(duì)應(yīng)響應(yīng)頭 Last-Modified

    If-None-Match：如果內(nèi)容未改變返回304代碼，參數(shù)為服務(wù)器先前發(fā)送的Etag，與服務(wù)器回應(yīng)的Etag比較判斷是否改變，對(duì)應(yīng)響應(yīng)頭 Etag

再看下iframe的中的請(qǐng)求

首先說明，iframe中src屬性中的請(qǐng)求本身不會(huì)干擾。

可以看到iframe中的請(qǐng)求也和外部請(qǐng)求一樣帶上了If-None-Match參數(shù)。

再看圖片資源的請(qǐng)求，我們事先給圖片設(shè)置了max-age=2628000:

可以看到圖片的請(qǐng)求頭這次沒有If-None-Match參數(shù)，而是帶上了Cache-Control:max-age=0，狀態(tài)碼是200 from cache，說明這次請(qǐng)求沒有訪問服務(wù)器，而直接是cache返回的響應(yīng)。

事實(shí)證明：當(dāng)本地有緩存，但你沒有給它設(shè)置有效期或者已經(jīng)過期時(shí)，回車這種刷新方法會(huì)主動(dòng)去訪問服務(wù)器判斷緩存是否需要更新，而如果設(shè)置了有效期并且沒過期，則這種刷新方法會(huì)直接從cache中請(qǐng)求資源。

如上是火狐下的firebug，可以看到html頁面請(qǐng)求返回304，并且請(qǐng)求頭中帶上了If-None-Match參數(shù)，這和chrome一樣。
而iframe中的請(qǐng)求也和chrome沒有區(qū)別，圖片由于直接從cache中加載，所以火狐直接不顯示了。

「總結(jié)」：url+enter或者a標(biāo)簽的超鏈接點(diǎn)擊這種刷新方法chrome和火狐表現(xiàn)一致，對(duì)于請(qǐng)求還在有效期內(nèi)的緩存資源會(huì)直接從緩存中返回，否則則會(huì)帶上If-None-Match/If-None-Match參數(shù)訪問服務(wù)器判斷是否需要更新緩存。

2. F5刷新/ctrl+R刷新

首先看chrome，chrome下這次所有資源都表現(xiàn)一致，包括iframe中的請(qǐng)求以及之前提到的設(shè)置了max-age的圖片資源。

上圖是html文件的請(qǐng)求，

這次的請(qǐng)求頭多了cache-control: max-age=0，

服務(wù)器會(huì)根據(jù)Etag或者Last-Modified來判斷緩存是否需要更新，如果不需要更新，就會(huì)返回304告訴瀏覽器它的緩存還能用，并

給緩存續(xù)期，需要更新的話就返回最新的數(shù)據(jù)和新的Etag/Last-Modified，并且更新瀏覽器緩存。

然后看火狐，

對(duì)于html資源以及設(shè)置了max-age的圖片資源的請(qǐng)求，火狐和chrome的效果是一致的，但是iframe中 的資源請(qǐng)求則有些不同，相比較chrome，缺少了cache-control: max-age=0參數(shù)。

3. ctrl+F5刷新

這次火狐和chrome的所有請(qǐng)求都是一致的，所以只看chrome就行了。

這次刷新請(qǐng)求沒有方式2中的If-Modified-Since和If-None-Match參數(shù)，cache-control的數(shù)值變成：no-cache,并且增加了Pragma: no-cache。

后兩個(gè)參數(shù)意義相同，只是兼容http版本不同。

no-cache使這次請(qǐng)求強(qiáng)制訪問服務(wù)器，并進(jìn)行驗(yàn)證，但由于這次沒有If-Modified-Since和If-None-Match參數(shù)，服務(wù)器無法驗(yàn)證，所以服務(wù)器直接返回了數(shù)據(jù)和新的Last-Modified以及Etag，狀態(tài)碼200OK

4.后退刷新

后退刷新主要指的是那些設(shè)置了頁面強(qiáng)行不緩存的網(wǎng)站，chrome在這里比較符合標(biāo)準(zhǔn)，從一個(gè)當(dāng)前頁面跳轉(zhuǎn)到另一個(gè)頁面，再回退回來時(shí)，頁面上的資源都是直接請(qǐng)求的緩存：

如上圖是chrome瀏覽器下做的測(cè)試。

在后退這一點(diǎn)上，火狐有不同的做法：

如上圖，會(huì)發(fā)現(xiàn)有個(gè)新的名詞：BFCache

全稱是back-forward cache，也就是“往返緩存”，為了提高用戶使用瀏覽器的“后退”和“前進(jìn)”按鈕時(shí)加快頁面的轉(zhuǎn)換速度。

這個(gè)緩存中不僅保存著頁面數(shù)據(jù)，還保存了DOM和JavaScript的狀態(tài)；實(shí)際上是將整個(gè)頁面都保存在了內(nèi)存里。也就是說“后退”不光意味著html/js/css/接口等動(dòng)靜態(tài)資源不會(huì)重新請(qǐng)求，連JS也不會(huì)重新執(zhí)行。

圖中不全都是form BFCache，是因?yàn)槲以跍y(cè)試頁面中加入了一個(gè)iframe，事實(shí)證明iframe不會(huì)被火狐的"往返機(jī)制"所緩存，它依然遵循url+enter刷新中的請(qǐng)求方式。

這一點(diǎn)在MDN中也有明確指出：

如果頁面位于bfcache中，那么再次打開該頁面就不會(huì)觸發(fā)load事件。

盡管由于內(nèi)存中保存了整個(gè)頁面的狀態(tài)，不觸發(fā)load事件也不應(yīng)該會(huì)導(dǎo)致什么問題，但為了更形象地說明bfcache的行為，F(xiàn)irefox還是提供了一些新事件。

pageshow

第一個(gè)事件就是pageshow，這個(gè)事件在頁面顯示時(shí)觸發(fā)，無論頁面是否來自bfcache。在重新加載頁面中，pageshow會(huì)在load事件觸發(fā)后觸發(fā)；而對(duì)于bfcache中的頁面，pageshow會(huì)在頁面狀態(tài)完全恢復(fù)的那一刻觸發(fā)。另外要注意的是，雖然這個(gè)事件的目標(biāo)是document，但必須將其事件處理程序添加到window。

除了通常的屬性之外，pageshow事件的event對(duì)象還包含一個(gè)名為persisted的布爾值屬性。如果頁面中保存在了bfcache中，則這個(gè)屬性的值為true；否則，這個(gè)屬性的值為false。

你可以根據(jù)persisted來判斷是否是bfcache中的頁面觸發(fā)的pageshow事件。

pagehide

與pageshow事件對(duì)應(yīng)的是pagehide事件，該事件會(huì)在瀏覽器卸載頁面的時(shí)候觸發(fā)，而且是在unload事件之前觸發(fā)。與pageshow事件一樣，pagehide在document上面觸發(fā)，但其事件處理程序必須要添加到Windows對(duì)象。這個(gè)事件的event對(duì)象也包含persisted屬性

總結(jié)

好了，以上就是這篇文章的全部內(nèi)容了，wise瀏覽器的詳細(xì)介紹我們會(huì)在之后更新，感興趣的請(qǐng)繼續(xù)關(guān)注腳本之家。