前端性能優化 —— 添加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加密自動化完成修訂文件名功能^_^

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM