簡要:添加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加密自動化完成修訂文件名功能^_^