與其他許多人一樣,我眼下也滯留在歐洲,等待飛回美國(guó)的航班。近期的火山噴發(fā)不僅影響了歐洲大陸的航班,還影響了全球各地眾多機(jī)場(chǎng)、航空公司和旅行社的網(wǎng)站。想在周日查看航班狀況?幾乎門(mén)都沒(méi)有!德國(guó)最大機(jī)場(chǎng):法蘭克福機(jī)場(chǎng)的網(wǎng)站根本就訪(fǎng)問(wèn)不了。這也難怪我會(huì)產(chǎn)生這樣的想法:他們的網(wǎng)頁(yè)恐怕遇到了眾多萬(wàn)分沮喪的旅客提出的成千上萬(wàn)的額外頁(yè)面請(qǐng)求。今天已是周二了,網(wǎng)站的響應(yīng)時(shí)間恢復(fù)到了“基本上可以接受”的水平。就跟我之前分析過(guò)vancouver2010、utah.travel.com或masters.com等其他網(wǎng)站那樣,這回分析一下法蘭克福機(jī)場(chǎng)的網(wǎng)站。
現(xiàn)狀:太多的資源,緩存方面設(shè)置錯(cuò)誤
使用免費(fèi)性能分析工具dynaTrace AJAX Edition,瀏覽至http://www.frankfurt-airport.com,為我顯示了該主頁(yè)上的情況。Resource Graph(資源圖)顯示了JavaScript、CSS和圖像等文件的數(shù)量。在主頁(yè)上,我們看到有97個(gè)圖像、40個(gè)JavaScript文件和22個(gè)樣式表文件。我之前瀏覽過(guò)這個(gè)主頁(yè)——這就是為什么其中一些資源是從緩存顯示的。不過(guò)我們稍后會(huì)看到,目前的緩存設(shè)置仍要求我的瀏覽器發(fā)送請(qǐng)求。
網(wǎng)站上有太多的資源(97個(gè)圖像、40個(gè)JavaScript文件和22個(gè)CSS文件等)
繼續(xù)往下瀏覽至TimeLine View(時(shí)間線(xiàn)視圖),即可顯示這些資源是從哪里下載的,對(duì)頁(yè)面裝入時(shí)間有怎樣的影響。與許多類(lèi)似的網(wǎng)站一樣,這些內(nèi)容來(lái)自許多不同的域。在這里,我們看到28個(gè)域分發(fā)廣告或標(biāo)題廣告,或者提供Web用戶(hù)跟蹤等服務(wù)。我們發(fā)現(xiàn),觸發(fā)onLoad事件需要花11秒——這時(shí)候,所有的初始內(nèi)容(HTML+引用的對(duì)象)已下載完畢。下載時(shí)間大部分花在了由www.frankfurt-airport.com提供內(nèi)容。大多數(shù)圖像、JavaScript和CSS等文件是從這個(gè)域下載的。
由于物理網(wǎng)絡(luò)連接方面的限制,瀏覽器只使用2條物理連接來(lái)下載這些資源,導(dǎo)致從這個(gè)域純粹下載的時(shí)間約為7秒。使用多個(gè)域——這種方法名為域名碎片(Domain Sharding),讓瀏覽器可以使用更多的物理連接來(lái)并行下載這些資源。這最終縮短了頁(yè)面裝入時(shí)間。值得一提的另外一點(diǎn)是下載的文件數(shù)量。直到onLoad事件被觸發(fā),從主域下載了125個(gè)資源。通過(guò)合并JavaScript和CSS文件,并且拼合圖像文件(可能的話(huà)),可以大幅減少這個(gè)數(shù)字,因而減少了往返次數(shù),因而同樣縮短了頁(yè)面裝入時(shí)間。
內(nèi)容來(lái)自28個(gè)Web域。大多數(shù)圖像是從frankfurt-airport.com這個(gè)域提供的,減慢了頁(yè)面裝入速度。
我的下一步是更仔細(xì)地分析緩存。瀏覽器能夠緩存一些內(nèi)容,比如靜態(tài)圖像、樣式表或JavaScript文件。對(duì)不經(jīng)常變化的內(nèi)容來(lái)說(shuō),緩存機(jī)制再好不過(guò)了。為了驗(yàn)證緩存設(shè)置正確,我第二次瀏覽至主頁(yè),記錄下另一個(gè)會(huì)話(huà)。如果緩存方面配置正確,我的瀏覽器應(yīng)該不會(huì)從服務(wù)器獲取某些資源,而是徑直從本地瀏覽器的緩存獲取。Summary View(摘要視圖)看起來(lái)很好——大多數(shù)資源似乎實(shí)際上是從緩存獲取的:
大多數(shù)圖像、CSS和JavaScript文件現(xiàn)在從瀏覽器的緩存獲取。
看起來(lái)不錯(cuò),但等一下。不要被表象蒙蔽了。我們?nèi)钥吹絊erver Transfer(服務(wù)器傳輸)時(shí)間方面的數(shù)值非常高。憑我的經(jīng)驗(yàn),這意味著,盡管內(nèi)容是從緩存獲取的,但是瀏覽器將HTTP請(qǐng)求發(fā)送至服務(wù)器,以便每一個(gè)資源“詢(xún)問(wèn)”內(nèi)容自上一次下載資源以來(lái)是否經(jīng)過(guò)了改動(dòng)(IF-MODIFIED-SINCE)。如果我?guī)讉€(gè)星期或幾個(gè)月沒(méi)有訪(fǎng)問(wèn)該網(wǎng)站,這沒(méi)什么;但是如果上一次頁(yè)面訪(fǎng)問(wèn)發(fā)生在僅僅幾分鐘之前,就不行了。
如果更仔細(xì)地看一下Network Requests(網(wǎng)絡(luò)請(qǐng)求)視圖,就會(huì)發(fā)現(xiàn)問(wèn)題之所在。Expires頭實(shí)際上被設(shè)置為“過(guò)去時(shí)間”。我記錄的訪(fǎng)問(wèn)會(huì)話(huà)是2010年4月20日格林威治標(biāo)準(zhǔn)時(shí)間9點(diǎn)38分。Expires頭被設(shè)置為4月19日——也就是前一天。這就是為什么我的瀏覽器不得不將HTTP請(qǐng)求發(fā)送至服務(wù)器,以便每一個(gè)“緩存”的元素檢查服務(wù)器上面有沒(méi)有更新版的資源。Server(服務(wù)器)這一列顯示多少時(shí)間花在了服務(wù)器上的每個(gè)請(qǐng)求,確定資源有沒(méi)有發(fā)生變化。Wait(等待)這一列告訴我們,每個(gè)請(qǐng)求得等待多久才被處理(這再次歸因于物理網(wǎng)絡(luò)連接方面的限制——每個(gè)域只有2條物理連接可用,其他所有請(qǐng)求不得不等待)。
過(guò)去時(shí)間的Expires頭使得瀏覽器為每個(gè)緩存的資源發(fā)送IF-MODIFIED-SINCE請(qǐng)求。
Network(網(wǎng)絡(luò))視圖顯示了幾乎所有的HTTP頭。由于IE中dynaTrace AJAX插件具有的性質(zhì),我們沒(méi)有獲得所有的HTTP頭,但是我們獲得了最值得關(guān)注的HTTP頭。我們的用戶(hù)已經(jīng)要求社區(qū)愿望清單(Community Wish List)上有這項(xiàng)特性。眼下我提議使用網(wǎng)絡(luò)嗅探器或代理,比如MS Fiddler、HTTP Watch或Charles,以免你嫌AJAX Edition提供的信息還不夠詳細(xì)。
如何提升性能?
從理論上來(lái)說(shuō),為諸如此類(lèi)的網(wǎng)站提升相當(dāng)簡(jiǎn)單。我之所以講從理論上來(lái)說(shuō)如此,是因?yàn)橐恍┨嶙h的變化需要在Web服務(wù)器或Web部署環(huán)境上作一些工作或變化。下面列出了一系列提議的變化和估計(jì)的性能提升:
•使用HTTP 1.1或至少使用Connection: Keep-Alive:Web服務(wù)器使用HTTP 1.0,迫使服務(wù)器在每次請(qǐng)求之后關(guān)閉物理連接。使用Connection Keep-Alive可以避免不必要的重新連接工作。
◦估計(jì)的性能提升:縮短100至200毫秒(查看網(wǎng)絡(luò)視圖中的Connect Column)
•添加有效期非常長(zhǎng)久的Expires頭:對(duì)于不常變化的那些元素來(lái)說(shuō),應(yīng)使用有效期非常長(zhǎng)久的Expires頭。
◦估計(jì)為返回用戶(hù)帶來(lái)的性能提升:縮短4-6秒(具體取決于實(shí)際上能長(zhǎng)久地緩存多少個(gè)對(duì)象)。
•合并CSS:把所有22個(gè)CSS文件合并成一個(gè)CSS文件,可以消除Wait Time(等待時(shí)間),并且因減少了HTTP往返次數(shù),因而縮短了Server Time(服務(wù)器時(shí)間)和Transfer Time(傳輸時(shí)間)。
◦估計(jì)的性能提升:等待時(shí)間縮短1.3秒,服務(wù)器時(shí)間和傳輸時(shí)間縮短1-2秒(假設(shè)我們能合并CSS文件)
•合并JavaScript:21個(gè)JavaScript文件來(lái)自主域。合并這些文件可消除等待時(shí)間,并因減少了HTTP往返次數(shù)而縮短了服務(wù)器時(shí)間和傳輸時(shí)間。
◦估計(jì)的性能提升:縮短300-500毫秒
•域名碎片:把由主頁(yè)面提供的75個(gè)圖像分散到另外2個(gè)圖像子域上,讓瀏覽器可以并行下載4個(gè)圖像。這還讓來(lái)自主頁(yè)的其他內(nèi)容(比如AJAX請(qǐng)求)不必等待圖像下載,就可以下載。
◦估計(jì)的性能提升:縮短2-3秒
結(jié)論
常常被忽視的小地方(比如錯(cuò)誤的Expires頭)對(duì)網(wǎng)站性能大有影響。如果法蘭克福機(jī)場(chǎng)的網(wǎng)站能夠遵循來(lái)自谷歌或雅虎的一些最佳實(shí)踐,或者是我們?cè)赿ynaTrace博客上介紹的那些最佳實(shí)踐,我相當(dāng)確信許多游客能夠在周日訪(fǎng)問(wèn)其網(wǎng)站。
原文:How better Caching helps Frankfurt’s Airport Website to handle additional load caused by the Volcano
譯文鏈接:http://developer.51cto.com/art/201209/357025.htm