對性能的提升是Ajax受歡迎的主要原因。我們通常以為那些所謂的眩目變換對于用戶來說是Ajax最吸引人的地方，可能用戶也確實由于這個原因而對 Ajax獨有情鐘。如果你回頭去看那些傳統的web應用，會發現它們幾乎靜態到令人反感，所以說用戶僅僅出于這些眩目變換而選擇Ajax不無道理。然而， 如果說眩目的變換真得大大改善了用戶體驗的話，那么動態的gif圖片應該受到更廣泛的應用才是。謝天謝地，Web應用早已走過這種幼稚的時代。Ajax不 會再重復動態gif圖片的老路，它不會再把重點放在這類眩目的變換上了。因此，無論人們是否感受或是意識到，Ajax真正改善用戶體驗的地方還是在對性能 的提升上。

這篇文章的重點并非要說明Ajax天生在哪些方面比傳統Web應用優秀。關于這個問題，只要將Google地圖與其他Web地圖或者將Gmail與 Hotmail進行對比，自然就可以得出結論。當然，應用Ajax的確能顯著改善性能和用戶體驗。但在此，我要向大家展示的是如何將Ajax應用的性能提 高到一個新的層次——從而使您的應用脫穎而出。

選擇GWT的理由

Google Web Toolkit (GWT)將Ajax的開發推進了一大步，然而面對當下種類繁多的Ajax解決方案，此類新技術的推廣難免遇到種種挑戰。但無可否認，在Ajax開發方 面，GWT給開發者提供了其他解決方案無可比擬的便利。如果你還沒有受到任何開發框架束縛的話，實在沒有什么理由不選擇GWT，因為GWT能夠無償的使應 用的整體性能得到大幅度提升。

我所說的“無償”是指在開發中可以拋開性能問題不考慮，而將主要精力集中在業務邏輯方面，因為GWT本身已能使性能得到優化。GWT帶有一個能將 Java代碼編譯成JavaScript的編譯器。如果熟悉編譯語言（C、Java等等）的話，你一定了解平臺獨立性是此類語言追求的一個目標，因此其編 譯器能夠針對特定平臺對代碼進行優化，這樣程序員就可以將重點放在代碼的結構組織和可讀性上。GWT編譯器也做了類似的事情，它將Java代碼編譯成一些 高度優化的JavaScript文件，每個文件對應于一種特定的瀏覽器，其中的優化步驟還應用了普通編譯器中的優化方法，去掉了沒有被調用的函數和內聯代 碼。此種方式得到的代碼相對直接編寫的JavaScript代碼要小的多而且做到了瀏覽器獨立，因此執行效率較高。實質上GWT已將JavaScript 看作web中的匯編代碼來處理。在瀏覽器加載JavaScript代碼的時候，僅僅加載針對該瀏覽器所需的代碼而已。使用GWT的應用比任何直接用 JavaScript實現的應用要來得更精煉更快。對即將發布的GWT 1.5版本，GWT開發團隊堅信其編譯器生成的代碼會比其他任何手工編寫的代碼都要快。以上這些應該足以說服大家選用GWT作為Ajax的解決方案，如果 還不夠，還有許多其他充分的理由，比如你可以在開發GWT程序時應用某些Java開發工具（能用Eclipse來調試Ajax程序在我看來確實是一個非常 有分量的砝碼）。

錦上添花

還遠不止這些呢！Ajax已經比傳統web應用要出色得多，而GWT又遠超一般的Ajax技術。只簡單地做些技術決定就能讓你將大部分精力放在業務 功能上，達到事半功倍的效果，開發出完美的應用。當然，GWT并非憑空就能做到這些，下面我將講述幾種進一步提升GWT性能方法。

1. 始終做好緩存

當你將GWT的Java代碼編譯成JavaScript后，對應于每個瀏覽器版本都會有生成一個相應的文件，該文件采用唯一標識的文件名。這些就是 你的應用程序的代碼文件，直接把它們放到一個web服務器上就能發布你的應用了。由于文件名是通過對你的代碼進行Hash函數計算而得，所以文件名本身就 已包含了版本信息。如果你修改了代碼后重新編譯，生成的文件會有新的文件名。這意味著要么文件已經被下載到了本地瀏覽器，要么從來沒有被請求過，因此就沒 有必要用檢查文件修改日期（HTTP的If-Modified-Since頭）的方法來決定是否需要版本更新。這樣可以減少很多不必要的HTTP請求過 程，雖然這些請求過程單獨可能很微不足道，但是當用戶量達到一定程度，它們就會變成不得不考慮的因素。這類請求對客戶端來說也是一種拖累，因為對同一個應 用，每個瀏覽器最多只能有兩個活動的請求。很多對Ajax下載時間的優化都是從減少向服務器發送的請求量入手的。

為了避免瀏覽器對版本的請求，你可以通過配置web服務器來向客戶端發送Expires HTTP頭。這個Expires HTTP頭包含頁面過期的時間，這樣就可以避免瀏覽器在頁面過期時間之前發送版本檢查的請求。在Apache中設置這些非常容易，只需要將以下內容加入 到.htaccess文件即可：

ExpiresDefault "now plus 1 year"

Apache會給所有符合*.cache.*模式的文件加上expires頭，設置其失效日期為一年后，此模式將匹配所有GWT應用文件。如果你使 用的是Tomcat，也可直接通過servlet過濾器來添加頭部。增加一個servlet過濾器非常簡單，只需要在WEB_INF/web.xml文件 中添加此過濾器的聲明，例如：

CacheFilter
  com.rdews.cms.filters.CacheFilter
  CacheFilter
  /gwt/*

這樣tomcat就知道在哪里找到此過濾器、知道哪些文件可以通過該過濾器。本例中，/gwt/*模式表示gwt文件夾下的所有文件。這個過濾器的 實現類將通過doFilter方法來添加Expires頭。對GWT應用來說，我們需要在每個不符合*.nocache.*模式的文件里添加此 Expires頭。nocache文件是不需要緩存的，因為其中含有版本選擇的邏輯。以下是這個過濾器的實現代碼：

public class CacheFilter implements Filter {
 	private FilterConfig filterConfig;

 	public void doFilter( ServletRequest request, ServletResponse response,
 			FilterChain filterChain) throws IOException, ServletException {

 		HttpServletRequest httpRequest = (HttpServletRequest)request;

 		String requestURI = httpRequest.getRequestURI();
 		if( !requestURI.contains(".nocache.") ){
 			long today = new Date().getTime();
 			HttpServletResponse httpResponse = (HttpServletResponse)response;
 			httpResponse.setDateHeader("Expires", today+31536000000L);
 		}
 		filterChain.doFilter(request, response);

 	}

 	public void init(FilterConfig filterConfig) throws ServletException {
 		this.filterConfig = filterConfig;
 	}

 	public void destroy() {
 		this.filterConfig = null;
 	}
}

2. 程序壓縮

通過去掉未被調用的方法和艱澀的代碼、使用簡短的變量名和方法名等方式，GWT編譯器在減少代碼量方面表現得非常出色，但是最后得到的代碼文本仍然 是未經壓縮的。因此可以通過gzip壓縮需要部署的應用程序的方法進一步減小代碼文件的大小。gzip可以將應用程序壓縮到原來的70％左右，從而提高應 用的下載速度。

幸運的是，文件壓縮也可以簡單地通過配置服務器來實現，唯一要做的只是在Apache服務器的.htaccess文件中加上以下語句：

SetOutputFilter DEFLATE

Apache首先會自動與瀏覽器進行溝通，根據瀏覽器的支持情況從而決定是否發送壓縮版本，不過目前所有主流瀏覽器都支持gzip壓縮。

如果使用的是Tomcat，那么可以直接利用server.xml文件中Connector元素，只要加上以下的屬性就可以進行程序文件的壓縮了：

compression="on"

#p#

3. 圖片打包

Ajax應用借助于瀏覽器和HTTP協議強大的分布力量，然而瀏覽器和HTTP協議本身對分布Ajax應用沒有特別的優化。Ajax應用是需要部署 的，在這一點上它跟桌面應用程序有些相象，而傳統的web程序使用的是共享資源分布模型（shared resource distribution model），在程序運行過程中瀏覽器和服務器間會不斷進行交互，從而對頁面所需要的資源進行管理。這種方式使資源能夠在頁面間共享和緩存，從而保證打開 新頁面所需的下載量達到最小化。在Ajax應用中，資源一般不會分布在頁面間，因此不需要單獨對其進行下載緩存。不過，對于Ajax應用，在下載應用程序 資源時采用傳統的分布式模型也并非不可行，許多Ajax應用也正是這么做的。

然而，你可以選擇將程序中用到的所有圖片合并到一個文件中，以減少HTTP請求的次數。這樣可以突破同一時間只能發送兩個請求的限制，一次性地下載所有圖片。

GWT從1.4版本開始支持ImageBundle接口。在這個接口中可以為每一個圖片建立一個方法，編譯器會將所有的圖片組合到一個文件中，并將 圖片數據的Hash做為新文件的文件名（象程序代碼一樣永久緩存這個文件）。一次性打包合并的圖片數量是沒有限制的，所有這些圖片只需要一次請求就可以全 部下載。

在已經完成的幾個GWT項目中我一直沿用將基本圖片打包的做法，以下是示例代碼：

需要注意的是每個方法都有一個公共注解來指明圖片的文件名，方法的返回類型都是AbstractImagePrototype。 AbstractImagePrototype類的createImage方法將返回一個可以在程序接口中使用的圖片widget。以下的代碼揭示了如何 使用該圖片包：

Images images = (Images) GWT.create(Images.class);
mainPanel.add( images.turn().createImage() );

這一切看上去很簡單，不過正是這些看似簡單的東西開啟了GWT性能提升之門。

4. 使用StyleInjector

我們又該如何處理CSS文件以及CSS圖片等應用程序資源呢？在傳統的web分布模型中，這些都作為外部資源而被獨立下載和緩存。在Ajax應用 中，這樣做意味著額外的HTTP請求和緩慢的程序加載。目前，GWT對此尚未提供任何優化，但在GWT的官方孵化項目中有一些很有意思的GWT代碼，這些 代碼很可能會包含在GWT的未來版本中，其中尤其值得關注的是ImmutableResourceBundle和StyleInjector兩個類。

ImmutableResourceBundle的功能和ImageBundle很相似，但是它可以用于包括CSS和CSS圖片在內的任何類型的資源。這 個類的目的在于為程序資源提供一個抽象，使得處理它們的方式對瀏覽器來說達到最優化。下面這個類即是一個可用于加載CSS文件及其相關資源的例子：

這個類會為每個資源指定一個文件和方法，這一點和ImageBundle 非常類似，但它的返回類型是DataResource 或TextResource。對于TextResource類，我們可以通過其getText 方法得到指定文件中的內容，而對于DataResource類，我們可以用getUrl方法來得到資源的引用（例如對圖片或者IFRAME的引用）。不同 的瀏覽器對這些數據的加載方式各不相同，但我們無須擔心這些。大多數情況下，數據會通過使用URL前綴以內聯URL的方式出現。這個類的用途很廣泛，但是 最直接的應用可能還是將CSS與其他程序文件一塊打包使用。

可以注意到，在這個接口中引用了一個CSS文件及其一些圖片。在這種情況下，該接口被拿來將CSS及其圖片與程序文件進行打包，從而減少HTTP請 求的次數和縮短應用啟動時間。在CSS文件中一般會指定一些背景圖片，但會使用占位符（placeholder）來取代真實的圖片URL。這些占位符被用 來引用打包的文件中其他一些元素，尤其是圖片。例如，main.css文件有這樣一個名為gwt-DialogBox的CSS規則:

.gwt-DialogBox{ background-image:url('%background%') repeat-x; }

如果要在程序中應用此CSS文件和圖片，你需要用到孵化項目中的StyleInjector 類。StyleInjector會將CSS文件中的占位符匹配到打包文件中的特定資源，然后再將CSS文件注入到瀏覽器中供應用程序使用。這聽起是挺復 雜，但實際使用還是比較方便的，重點是它能改善應用的性能。下面這段代碼是使用StyleInjector將CSS從資源包注入到應用程序中的一個例子：

Resources resources = (Resources)GWT.create(Resources.class);
StyleInjector.injectStylesheet( resources.mainCss().getText(), resources );

需要注意的是以上這些目前還是孵化項目的一部分，在正式發布前隨時都有可能做調整。

結論

總之，Ajax應用相對于傳統web應用在使用性上有質的飛躍，同時GWT所提供的工具能使你的Ajax性能無償地得到大幅度提升。關于這一點，你可以將GWT mail sample的啟動速度跟其他Ajax應用范例做個比較。如果再在傳統web應用和Ajax應用間在部署差異加以關注的話，我們還可以進一步提高應用的性能。對于下一代的Ajax應用，我充滿了期待。

【編輯推薦】

1. 如何使用ASP.NET AJAX訪問Web Services
2. 使用AJAX擴展器自定義控件
3. AJAX和XmlHttpRequest下的Web開發