前端性能優化 —— 添加Expires頭

簡要：添加Expires頭能有效的利用瀏覽器的緩存能力來改善頁面的性能，能在後續的頁面中有效避免不少沒必要要的Http請求，WEB服務器使用Expires頭來告訴Web客戶端它可使用一個組件的當前副本，直到指定的時間爲止。

例如：Expires：Thu，15 Apr  2010  20：00：00  GMT;  他告訴瀏覽器緩存有效性持續到2010年4月15日爲止，在這個時間以內相同的請求使用緩存，這個時間以外使用http請求。

 

Cathe-Control：max-age=315360000

Expires有一個很是大的缺陷，它使用一個固定的時間，要求服務器與客戶端的時鐘保持嚴格的同步，而且這一天到來後，服務器還得從新設定新的時間。

HTTP1.1引入了Cathe-Control，它使用max-age指定組件被緩存多久，從請求開始在max-age時間內瀏覽器使用緩存，以外的使用請求，這樣就能夠消除Expires的限制，

若是對瀏覽器兼容性要求很高的話，能夠兩個都使用。

 

這裏對http 304 狀態結合max-age作一個總結：

瀏覽器初次訪問服務器---------------服務器返回200狀態

以下圖：

瀏覽器再次請求服務器時，瀏覽器會先判斷max-age，若是到期則直接請求服務器，不然直接從緩存中取，

服務器收到請求後，判斷文件是否被修改過，如果則直接返回200，不然返回304，瀏覽器將從緩存中獲取文件。

 

 

若同步刷新頁面，則瀏覽器並不會先判斷max-age，而是直接發送請求，服務器接收到請求後，判斷文件是否有變化，如有則返回200，若沒有則返回304

 

修訂文件名

瀏覽器利用max-age取出緩存有很大的缺陷，若是在max-age時間內，服務器文件有修改，這樣用戶就不能第一時間獲取最新的信息，所以這裏最有效的方法是修改請求的文件名。

但爲了確保用戶能獲取組件最新版本，須要在整個項目中修改組件的文件名，這取決於你的html頁面，這項工做可能很輕鬆也可能很痛苦，

這裏先埋個伏筆：在生產環境中利用gulp和MD5加密自動化完成修訂文件名功能^_^