最近在搞網(wǎng)站的界面UI改版,除了少數(shù)的幾個(gè)頁(yè)面外,全站基本統(tǒng)一了界面風(fēng)格,在解決各種瀏覽器兼容問(wèn)題的時(shí)候,不經(jīng)意搜到一個(gè)FireFox的插件YSlow for Firebug,他是開源的網(wǎng)站優(yōu)化工具,用于測(cè)試網(wǎng)站的前端性能。在YSlow的評(píng)價(jià)性能等級(jí)上,有十三條規(guī)則:1. Make fewer HTTP requests,2. Use a CDN,3. Add an Expires header,4. Gzip components,5. Put CSS at the top,6. Put JS at the bottom,7. Avoid CSS expressions,8. Make JS and CSS external,9. Reduce DNS lookups,10. Minify JS,11. Avoid redirects,12. Remove duplicate scripts,13. Configure ETags。這是《Yahoo!網(wǎng)站性能最佳體驗(yàn)的34條黃金守則》中進(jìn)一步精簡(jiǎn)的,現(xiàn)在先來(lái)討論第3條,這是比較容易可以實(shí)現(xiàn)了的,只需配置一下iis或者apache等web服務(wù)器,給http header 加上“內(nèi)容過(guò)期”即可實(shí)現(xiàn)。考慮到網(wǎng)站正在改版,css、js還需要修改,這里分別給相關(guān)資源加上較合適的過(guò)期時(shí)間:1、image、flash 100天后過(guò)期;2、css、js 3天后過(guò)期。
配置過(guò)程:在iis管理器中打開相關(guān)網(wǎng)站,找到需要設(shè)置的文件、文件夾,然后點(diǎn)擊屬性,在“http頭”一項(xiàng)中即可設(shè)置。
如果指定一個(gè)過(guò)期時(shí)間后,如 2008-12-26 14:26:00,則會(huì)在瀏覽器的http header received中會(huì)得到一個(gè)明確的過(guò)期時(shí)間:如Expires:Fir,26 Dec 2008 14:26:00 GMT,這是一個(gè)標(biāo)準(zhǔn)的GMT時(shí)間(格林尼治時(shí)間);如果指定100天后過(guò)期,header received則會(huì)收到Cache-Control:max-age=8640000(以秒來(lái)計(jì)算)。以上兩個(gè)header received該指示瀏覽器緩存該請(qǐng)求的內(nèi)容,并會(huì)在瀏覽器的臨時(shí)緩存文件夾中保存該文件直至其到達(dá)過(guò)期時(shí)間(先不考慮瀏覽器因?yàn)榫彺婵臻g不足而自動(dòng)清空緩存和用戶清空緩存這些情況),Internet explorer 可以在 C:/Documents and Settings/Administrator/Local Settings/Temporary Internet Files 文件夾找到這些緩存文件。在首次訪問(wèn)時(shí),瀏覽器會(huì)根據(jù)Expires 和 Cache-Control是否緩存內(nèi)容,第二次訪問(wèn)時(shí),如果緩存的內(nèi)容沒(méi)有過(guò)期,則從緩存直接讀取相關(guān)內(nèi)容。還有一種情況,當(dāng)用戶點(diǎn)擊刷新按鈕時(shí),不管是否緩存,瀏覽器都會(huì)從服務(wù)器新請(qǐng)求所有內(nèi)容。
使用 HttpWatch、yslow的測(cè)試過(guò)程:
1、打開過(guò)期時(shí)間、第一次訪問(wèn)

(HttpWatch)
(YSlow)
2、打開過(guò)期時(shí)間、第二次訪問(wèn)
(HttpWatch)
(YSlow)
3、打開過(guò)期時(shí)間,HttpWatch 兩次訪問(wèn)結(jié)果比較
4、沒(méi)有打開過(guò)期時(shí)間、第一次訪問(wèn)
5、沒(méi)有打開過(guò)期時(shí)間、第二次訪問(wèn)
6、沒(méi)有打開過(guò)期時(shí)間,HttpWatch 兩次訪問(wèn)結(jié)果比較

測(cè)試的兩次結(jié)果略有不同,但是我們可以看到,打開過(guò)期時(shí)間后第二次訪問(wèn)時(shí),相關(guān)文件已經(jīng)被緩存了,Sent、Received都沒(méi)有產(chǎn)生通信流量,在Result一項(xiàng)中顯示的是Cache,很明顯是從緩存中讀取數(shù)據(jù)了。從第一次訪問(wèn)時(shí)的49個(gè)Request降低為 9個(gè)Request,請(qǐng)求時(shí)間與流量都明顯減少。打開一個(gè)沒(méi)有設(shè)置“內(nèi)容過(guò)期”的網(wǎng)站,首次訪問(wèn)和第二次訪問(wèn)產(chǎn)生的http請(qǐng)求數(shù)沒(méi)有任何改變,但received也降低許多,這是由于第一次請(qǐng)求時(shí),瀏覽器會(huì)在臨將相關(guān)文件保存在臨時(shí)文件夾,服務(wù)端會(huì)返回給客戶端一個(gè)Last-Modified字段,以后每次需要這個(gè)文件的時(shí)候,客戶端會(huì)把這個(gè)字段發(fā)送到服務(wù)端,服務(wù)端拿來(lái)和最新的文件做比較,如果沒(méi)有被改變過(guò),那么返回304 Not Modified,那么客戶端就直接從緩存里面拿,所以產(chǎn)生的流量非常小,但是request并沒(méi)有減少,如上面的第5點(diǎn)。
經(jīng)過(guò)這幾次測(cè)試比較,可以看到緩存所起的重要作用。 另外在asp.net等程序中,也可以指定過(guò)期時(shí)間,如:Response.Expires = 3600,這樣頁(yè)面的text/html內(nèi)容也一樣會(huì)被緩存,如果數(shù)據(jù)庫(kù)內(nèi)容已經(jīng)更改,在用戶再次訪問(wèn)時(shí),內(nèi)容并不會(huì)更新,在過(guò)期時(shí)間之內(nèi),要獲得最新內(nèi)容可以手動(dòng)刷新。如果程序中沒(méi)用指定過(guò)期時(shí)間、Cache,數(shù)據(jù)庫(kù)內(nèi)容改變后,不管怎樣訪問(wèn)網(wǎng)頁(yè)(新開瀏覽器,后退),都會(huì)得到最新的內(nèi)容。