最近在搞網(wǎng)站的界面UI改版,除了少數(shù)的幾個(gè)頁面外,全站基本統(tǒng)一了界面風(fēng)格,在解決各種瀏覽器兼容問題的時(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)在先來討論第3條,這是比較容易可以實(shí)現(xiàn)了的,只需配置一下iis 或者apache等web服務(wù)器,給http header 加上“內(nèi)容過期”即可實(shí)現(xiàn)。考慮到網(wǎng)站正在改版,css、js還需要修改,這里分別給相關(guān)資源加上較合適的過期時(shí)間:1、image、flash 100天后過期;2、css、js 3天后過期。
配置過程:在iis管理器中打開相關(guān)網(wǎng)站,找到需要設(shè)置的文件、文件夾,然后點(diǎn)擊屬性,在“http頭”一項(xiàng)中即可設(shè)置。
如果指定一個(gè)過期時(shí)間后,如 2008-12-26 14:26:00,則會(huì)在瀏覽器的http header received中會(huì)得到一個(gè)明確的過期時(shí)間:如Expires:Fir,26 Dec 2008 14:26:00 GMT,這是一個(gè)標(biāo)準(zhǔn)的GMT時(shí)間(格林尼治時(shí)間);如果指定100天后過期,header received則會(huì)收到Cache-Control:max-age=8640000(以秒來計(jì)算)。以上兩個(gè)header received該指示瀏覽器緩存該請(qǐng)求的內(nèi)容,并會(huì)在瀏覽器的臨時(shí)緩存文件夾中保存該文件直至其到達(dá)過期時(shí)間(先不考慮瀏覽器因?yàn)榫彺婵臻g不足而自動(dòng)清空緩存和用戶清空緩存這些情況),Internet explorer 可以在 C:Documents and SettingsAdministratorLocal SettingsTemporary Internet Files 文件夾找到這些緩存文件。在首次訪問時(shí),瀏覽器會(huì)根據(jù)Expires 和 Cache-Control是否緩存內(nèi)容,第二次訪問時(shí),如果緩存的內(nèi)容沒有過期,則從緩存直接讀取相關(guān)內(nèi)容。還有一種情況,當(dāng)用戶點(diǎn)擊刷新按鈕時(shí),不管是否緩存,瀏覽器都會(huì)從服務(wù)器新請(qǐng)求所有內(nèi)容。
使用 HttpWatch、yslow的測(cè)試過程:
1、打開過期時(shí)間、第一次訪問
(HttpWatch)
(YSlow)
2、打開過期時(shí)間、第二次訪問
(HttpWatch)
(YSlow)
3、打開過期時(shí)間,HttpWatch 兩次訪問結(jié)果比較
4、沒有打開過期時(shí)間、第一次訪問
5、沒有打開過期時(shí)間、第二次訪問
6、沒有打開過期時(shí)間,HttpWatch 兩次訪問結(jié)果比較
測(cè)試的兩次結(jié)果略有不同,但是我們可以看到,打開過期時(shí)間后第二次訪問時(shí),相關(guān)文件已經(jīng)被緩存了,Sent、Received都沒有產(chǎn)生通信流量,在 Result一項(xiàng)中顯示的是Cache,很明顯是從緩存中讀取數(shù)據(jù)了。從第一次訪問時(shí)的49個(gè)Request降低為 9個(gè)Request,請(qǐng)求時(shí)間與流量都明顯減少。打開一個(gè)沒有設(shè)置“內(nèi)容過期”的網(wǎng)站,首次訪問和第二次訪問產(chǎn)生的http請(qǐng)求數(shù)沒有任何改變,但 received也降低許多,這是由于第一次請(qǐng)求時(shí),瀏覽器會(huì)在臨將相關(guān)文件保存在臨時(shí)文件夾,服務(wù)端會(huì)返回給客戶端一個(gè)Last-Modified字段,以后每次需要這個(gè)文件的時(shí)候,客戶端會(huì)把這個(gè)字段發(fā)送到服務(wù)端,服務(wù)端拿來和最新的文件做比較,如果沒有被改變過,那么返回304 Not Modified,那么客戶端就直接從緩存里面拿,所以產(chǎn)生的流量非常小,但是request并沒有減少,如上面的第5點(diǎn)。
經(jīng)過這幾次測(cè)試比較,可以看到緩存所起的重要作用。 另外在asp.net等程序中,也可以指定過期時(shí)間,如:Response.Expires = 3600,這樣頁面的text/html內(nèi)容也一樣會(huì)被緩存,如果數(shù)據(jù)庫(kù)內(nèi)容已經(jīng)更改,在用戶再次訪問時(shí),內(nèi)容并不會(huì)更新,在過期時(shí)間之內(nèi),要獲得最新內(nèi)容可以手動(dòng)刷新。如果程序中沒用指定過期時(shí)間、Cache,數(shù)據(jù)庫(kù)內(nèi)容改變后,不管怎樣訪問網(wǎng)頁(新開瀏覽器,后退),都會(huì)得到最新的內(nèi)容。
新聞熱點(diǎn)
疑難解答
圖片精選