與其他許多人一樣，我眼下也滯留在歐洲，等待飛回美國(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
