前端優化之-設置較長的expires


 

前端優化中很重要的一項是設置一個較長的過期時間,例如yahoo的expires設的是10年,page speed推薦一個月以上。設expires的目的就是讓沒有更新的資源不應該產生http請求,如果強制產生請求則返回304,減少服務器壓力和降低帶寬。exprires屬於服務器優化范疇,需要修改服務器配置並重啟。

http header相關知識

expires:指定緩存到期GMT的絕對時間,如果設了max-age,max-age就會覆蓋expires。如果expires到期需要重新請求。

last-modified:WEB 服務器認為對象的最后修改時間,比如文件的最后修改時間,動態頁面的最后產生時間。

ETag:就是一個對象(比如URL)的標志值,就一個對象而言,比如一個 html 文件,如果被修改了,其 Etag 也會別修改, 所以,ETag 的作用跟 Last-Modified 的作用差不多,主要供 WEB 服務器 判斷一個對象是否改變了。如果有多個服務器需要考慮Etag同步問題。
比如前一次請求某個 html 文件時,獲得了其 ETag,當這次又請求這個文件時, 瀏覽器就會把先前獲得的 ETag 值發送給  WEB 服務器,然后 WEB 服務器會把這個 ETag 跟該文件的當前 ETag 進行對比,然后就知道這個文件有沒有改變了。

Cache-Control:
這個是http 1.1中為了彌補 Expires 缺陷新加入的,現在不支持http 1.1的瀏覽器已經很少了。
max-age: 指定緩存過期的相對時間秒數,max-ag=0或者是負值,瀏覽器會在對應的緩存中把Expires設置為1970-01-01 08:00:00 。
s-maxage: 類似於max-age,只用在共享緩存上,比如proxy.
public: 通常情況下需要http身份驗證的情況,響應是不可cahce的,加上public可以使它被cache。
no-cache: 強制瀏覽器在使用cache拷貝之前先提交一個http請求到源服務器進行確認。這對身份驗證來說是非常有用的,能比較好的遵守 (可以結合public進行考慮)。它對維持一個資源總是最新的也很有用,與此同時還不完全喪失cache帶來的好處),因為它在本地是有拷貝的,但是在用之前都進行了確認,這樣http請求並未減少,但可能會減少一個響應體。
no-store:  告訴瀏覽器在任何情況下都不要進行cache,不在本地保留拷貝。
must-revalidate: 強制瀏覽器嚴格遵守你設置的cache規則
proxy-revalidate: 強制proxy嚴格遵守你設置的cache規則。
用法舉例:  Cache-Control: max-age=3600, must-revalidate

cache:使用本地緩存,不發生請求。

304:通過If-Modified-Since If-Match判斷資源是否修改,如未修改則返回304,發生了一次請求,但請求內容長度為0,節省了帶寬。

如果有多台負載均衡的服務器,不同服務器計算出的Etag可能不同,這樣就會造成資源的重復加載,我看的yahoo首頁就沒設Etag,估計有這么方面的考慮。

 

下面我的一些分析,不敢說完全正確,只測試了IE6和FF3.5,感興趣的朋友一塊討論,畢竟瀏覽器對我來說是個黑洞。

下面主要說說expires,主要有這四個疑問

1.設置expires后,請求狀態應該是什么樣的?是304還是cache?

2.如果資源被瀏覽器cache了,怎么才能保證資源正確更新,尤其是頁面不出錯。

3.瀏覽器是否有差異?

4.過期時間設為多少比較好。

為了解決上面的疑惑,我用apche做了測試,apache的配置如下:

 

測試還需要考慮訪問頁面的方式,方式不同請求狀態也會有差異。打開瀏覽器清除緩存,然后打開頁面進行測試,多次測試結果如下:

打開頁面方式 IE6(httpwatch) FF3.5(httpfox)
1. 第一次打開頁面 200 200
2. 重啟瀏覽器打開頁面 cache,即時發生資源修改也不會重新請求 cache,即時發生資源修改也不會重新請求
3. F5刷新 304,發生修改的資源狀態為200 304,發生修改的資源狀態為200
4. Ctrl+F5刷新 200,強制全新請求 200
5. 后退 cache,簡單直接地從緩存加載 cache,簡單直接地從緩存加載
6. 在已訪問頁面地址欄回車 cache cache

總結:

用yahoo首頁驗證了上面的結論,除yahoo F5刷新頁面時IE6下有兩個請求狀態為cache外(目前沒分析到原因),二者基本一致。

把expires設為30天、14天結果頁一樣。有了上面的測試結果做expires優化心理就有底了,疑問1和3已解決。

第二種方式打開頁面,有資源修改也走本地緩存,極有可能出錯,問題2最穩妥的辦法是修改的資源啟用新名稱,yahoo的作法是文件名后加版本號,這回增加前端的工作量。目前每次更新腳本庫,資源地址都不變,主要為避免重命名后相關應用都需要更新的問題,節省開發的時間。

 expires設2,3天,有點短,穩定的應用的js css img更新不是很頻繁,像yahoo設10年可以理解為永不過期,十年中網站不知道改版多少次了。最低設30天還比較合適。


參考資料:

http://www.360doc.com/content/08/0501/14/41237_1227846.shtml
http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html#sec13.3.4

http://www.mnot.net/cache_docs/
楊建:網站加速--Cache為王篇 
http://www.itlearner.com/article/4421

Caching in HTTP http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html
Header Field Definitions 
http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html

age http://labs.apache.org/webarch/http/draft-fielding-http/p6-cache.html#header.age

Age Calculations  http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html

 

 

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com