Firefox與IE瀏覽器緩存的兩個重要區別

簡介
詳細介紹了firefox的緩存與IE的區別,如何設置服務響應頭讓二者緩存行爲一致.

當你創建好一個WEB服務後,一般有兩個類型的緩存須要配置: javascript

  1. 設置網站有更新的時候html資源立刻過時,以便正在瀏覽的用戶能夠很快地獲得更新.
  2. 設置全部其它資源(例如圖片,CSS,javascript腳本)在必定時間後過時.


這個緩存方案涵蓋Two Simple Rules for HTTP Caching文章中提到關於如何處理更新的一些思想. html

如今HttpWatch 6.0支持Firefox了,咱們想探討一下Firefox在處理緩存上與IE有些什麼不一樣.設置較長過時時間的使用方式(上面第二條)仍能夠直接用於Firefox,但配置1在二者之間仍是存在細微差異的. java

以前的文章 中,咱們把第一條劃分爲: 瀏覽器

  • 某些時候動態HTML頁面須要即時從服務器更新以備隨時顯示-甚至是使用後退按鈕的時候.例如,顯示銀行賬號的狀態或在線訂單.
  • 靜態HTML頁面,好比聯繫,FAQs或者站點地圖等頁面,若是它們設置了Last-Modified響應頭,容許瀏覽器在須要的時候從新校驗,就能夠利用到緩存.

本文剩下部分探討了Firefox中影響HTML頁面緩存的兩個重要不一樣點. 緩存

1. 使用no-cache防止Firefox緩存無效

你能夠簡單地設置以下的響應頭預防IE緩存任何東西: 服務器

Cache-Control: no-cache 網站

使用了這個響應頭的頁面不會保存在緩存裏,IE總會從新從服務器加載;即便你使用後退按鈕.下面這個例子使用HttpWatch監聽一個網上商店,當咱們在提交訂單表單後點擊後退按鈕,結果以下圖: firefox

然而,這個響應頭卻不能防止Firefox的緩存.這意味着,Firefox在正常訪問的狀況下,將一直使用緩存的頁面,直到它發送GET請求從新檢驗.而且,若是是經過後退按鈕訪問頁面,Firefox不會再次訪問服務器,而是簡單直接地從緩存加載. pwa

那怎樣才能關掉Firefox中的緩存呢? 答案很簡單,關不了. 由於Firefox依靠緩存中的副本爲"文件->另存爲","查看源代碼"這樣的操做服務.可是,你能夠控制頁面緩存到哪裏及那些緩存條目能夠用於顯示. htm

下面響應頭在Firefox中能夠防止持久化的緩存,強制頁面被緩存到內存中:

Cache-Control:no-store

這個頭也能夠防止使用後退按鈕時訪問了緩存頁面,它將觸發一個HTTP GET請求.

這兩個響應頭的值組合使用能夠在IE與Firefox獲得期待的結果:

Cache-Control: no-cache, no-store

以下HttpWatch響應頭標籤所示:

no-store and no-cache headers

2. 若是沒有設置過時時間Firefox會爲你設置一個

當IE遇到沒有Expires頭的http響應時,它就認爲永遠不能自動使用緩存條目,直到它從新從服務校驗.因爲IE的臨時文件的一個設置項"檢查所在網頁的較新版本"默認爲"自動",因此一般都是一個會話作一次.

這就爲控制靜態的html內容的緩存提供了一個合理的方式.用戶新打開的IE會獲得html的最新版本,而緩存的版本就在關閉IE前會一直被使用.

Firefox處理缺失Expires頭的方式不一樣.若是影響中有Last-Modified頭它就會使用HTTP 1.1規範RFC2616中指定的一個嘗試性的過時值:

(引用規範:)
而且,若是響應中有Last-Modified時間值,嘗試性的過時值不能超過這個值到如今時間間隔的一個比率,通常設置這個比率爲10%.

計算方式以下:

過時時間 = 如今時間 + 0.1 * (Last-Modified到如今的時間差)

例如,若是你的靜態HTML文件上次修改時間是100天前,那過時時間就是10天以後.下面的示例是一個沒有Expires頭頁面的HttpWatch緩存標籤:

Firefox自動設置了過時時間爲8天后,由於這個頁面大概80天沒有被修改過了.

這意味着,爲了保持控制好你的HTML頁面,正如咱們在 Two Simple Rules for HTTP Caching 文章中討論過的,你最好爲你的靜態資源如HTML,圖片,CSS文件等,在你的WEB服務器設置一個合適的Expires值.

結論

爲了確保IE與Firefox的緩存行爲一致,你應該:

  • 老是指定一個Expires頭. 通常設置-1使用html頁面能即時刷新或者對其它如圖片,CSS,javascript腳本資源設置一個特定的過時時間
  • 若是你要強制頁面刷新,甚至是點擊後臺按鈕的時候,那就設置 Cache-Control: no-cache, no-store
相關文章
相關標籤/搜索