IE內核瀏覽器的404頁面問題和IE自動緩存引起的問題

本站404頁面被IE替換成IE本身的404頁面

在權限設置正確的狀況下，自定義的404頁面文件大小若是小於512字節，那麼IE內核的瀏覽器會認爲你自定義的404頁面不夠權威，從而使用其自帶的404頁面代替，如圖所示：

在非IE內核的瀏覽器，如火狐瀏覽器、谷歌瀏覽器等均能正常顯示。

解決方法：
爲404頁面添加多一些內容，使其大小大於512字節便可。

IE自動緩存

在默認狀況下，IE會針對請求地址緩存Ajax請求的結果；

在緩存過時以前，針對相同地址發起的多個Ajax請求，只有第一次會真正發送到服務端；

在某些狀況下，這種默認的緩存機制並非咱們但願的（好比獲取實時數據，更改列表後刷新列表等）。

解決方法一：
在Ajax請求的後面加上一個隨機數（Math.random()）或當前時間戳（new Date()），不同的請求就不會有緩存

解決方法二：
把請求的緩存配置設置爲不緩存
jq設置cache參數爲false
axios設置headers參數對象的三個屬性

headers: {
     'Cache-control': 'no-cache',   //瀏覽器和緩存服務器都不該該緩存頁面信息，應用http 1.1
     'Pragma': 'no-cache',    //瀏覽器和緩存服務器都不該該緩存頁面信息，應用到http 1.0 和http 1.1
     'Expires': 0   //  過期期限值，指瀏覽器或緩存服務器在該時間點後必須從真正的服務器中獲取新的頁面信息
}

---

HTTP緩存相關

HTTP協議中關於緩存的信息頭關鍵字包括Cache-Control(HTTP1.1)，Pragma(HTTP1.0)，last-Modified，Expires等。

Pragma

HTTP1.0中經過Pragma 控制頁面緩存，能夠設置：Pragma或no-cache。不過這個值不這麼保險，一般還加上Expires置爲0來達到目的。

可是如咱們刻意須要瀏覽器或緩存服務器緩存住咱們的頁面這個值則要設置爲 Pragma。

Cache-Control

HTTP1.1中啓用Cache-Control 來控制頁面的緩存與否，這裏介紹幾個經常使用的參數：

no-cache，瀏覽器和緩存服務器都不該該緩存頁面信息；

public，瀏覽器和緩存服務器均可以緩存頁面信息；

no-store，請求和響應的信息都不該該被存儲在對方的磁盤系統中；

must-revalidate，對於客戶機的每次請求，代理服務器必須想服務器驗證緩存是否過期。

max-age=5，表示當訪問此網頁後的5秒內再次訪問不會去服務器。

打開新窗口(_blank)

private、no-cache、must-revalidate 再次訪問服務器

在地址欄回車

值爲private或must-revalidate則只有第一次訪問時會訪問服務器，之後就再也不訪問。
值爲no-cache，那麼每次都會訪問。
值爲max-age，則在過時以前不會重複訪問。

按後退按扭

值爲private、must-revalidate、max-age，則不會重訪問，
值爲no-cache，則每次都重複訪問

按刷新按扭

不管爲什麼值，都會重複訪問

建議：

1. 對於js和css能夠獨立到一個二級域名中，啓用GZIP，且設置較長的過時時間

2. 對於圖片獨立到另外一個二級域名中，且設置較長的過時時間

3. 對於靜態文件(html)若是長期不更新也能夠設置稍長的過時時間（如30天），須要根據當前網站的實際而定。

4. 對於動態文件能夠設置較短的過時時間（如120秒）

注意：在過時時間內，若是您對文件內容進行了變化，對於用戶或蜘蛛都不能瀏覽或抓取到你更改後的內容。 這也是動態文件設置較短過時時間的主要緣由。
cache-control的設置只是爲了節約搜索引擎蜘蛛資源，讓其抓取更多有效內容，千萬不能弄巧成拙。

Last-Modified

頁面的最後生成時間，GMT時間格式。

Expires

過期期限值，指瀏覽器或緩存服務器在該時間點後必須從真正的服務器中獲取新的頁面信息，GMT時間格式。

在html頁面上設置不緩存

在標籤中加入以下語句：

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

html頁面中meta的做用

meta是用來在HTML文檔中模擬HTTP協議的響應頭報文。

meta 的屬性有兩種：name和http-equiv。

name屬性主要用於描述網頁，對應於content（網頁內容），以便於搜索引擎機器人查找、分類（目前幾乎全部的搜索引擎都使用網上機器人自動查找meta值來給網頁分類）。

這其中最重要的是description（站點在搜索引擎上的描述）和keywords（分類關鍵詞）。

因此應該給每頁加一個meta值。比較經常使用的有如下幾個：

name 屬性

1. <meta name="generator" contect="">用以說明生成工具（如Microsoft FrontPage 4.0）等；
2. <meta name="keywords" contect="">向搜索引擎說明你的網頁的關鍵詞；
3. <meta name="description" contect="">告訴搜索引擎你的站點的主要內容；
4. <meta name="author" contect="你的姓名">告訴搜索引擎你的站點的製做的做者；
5. <meta name="robots" contect= "all|none|index|noindex|follow|nofollow">
   　　其中的屬性說明以下：
   　　設定爲all：文件將被檢索，且頁面上的連接能夠被查詢；
   　　設定爲none：文件將不被檢索，且頁面上的連接不能夠被查詢；
   　　設定爲index：文件將被檢索；
   　　設定爲follow：頁面上的連接能夠被查詢；
   　　設定爲noindex：文件將不被檢索，但頁面上的連接能夠被查詢；
   　　設定爲nofollow：文件將不被檢索，頁面上的連接能夠被查詢。

http-equiv屬性

1. <meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80">
   和 <meta http-equiv="Content-Language" contect="zh-CN">用以說明主頁製做所使用的文字以及語言；
   　　又如英文是ISO-8859-1字符集，還有BIG五、utf-八、shift-Jis、Euc、Koi8-2等字符集；
2. <meta http-equiv="Refresh" contect="n;url=http://yourlink">定時讓網頁在指定的時間n內，跳轉到頁面http://yourlink；
3. <meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT">能夠用於設定網頁的到期時間，一旦過時則必須到服務器上從新調用。須要注意的是必須使用GMT時間格式；
4. <meta http-equiv="Pragma" contect="no-cache">是用於設定禁止瀏覽器從本地機的緩存中調閱頁面內容，設定後一旦離開網頁就沒法從Cache中再調出；
5. <meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT">cookie設定，若是網頁過時，存盤的cookie將被刪除。須要注意的也是必須使用GMT時間格式；
6. <meta http-equiv="Pics-label" contect="">網頁等級評定，在IE的internet選項中有一項內容設置，能夠防止瀏覽一些受限制的網站，而網站的限制級別就是經過meta屬性來設置的；
7. <meta http-equiv="windows-Target" contect="_top">強制頁面在當前窗口中以獨立頁面顯示，能夠防止本身的網頁被別人看成一個frame頁調用；
8. <meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion= 50)">和<meta http-equiv="Page-Exit" contect="revealTrans(duration=20，transtion=6)">設定進入和離開頁面時的特殊效果，這個功能即FrontPage中的「格式/網頁過渡」，不過所加的頁面不可以是一個frame頁面。