利用GWT開發高性能Ajax應用

利用GWT開發高性能Ajax應用 對性能的提升是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" 3. 圖片打包 Ajax應用藉助於瀏覽器和HTTP協議強大的分佈力量，然而瀏覽器和HTTP協議本身對分佈Ajax應用沒有特別的優化。Ajax應用是需要部署的，在 這一點上它跟桌面應用程序有些相象，而傳統的web程序使用的是共享資源分佈模型（shared resource distribution model），在程序運行過程中瀏覽器和服務器間會不斷進行交互，從而對頁面所需要的資源進行管理。這種方式使資源能夠在頁面間共享和緩存，從而保證打開 新頁面所需的下載量達到最小化。在Ajax應用中，資源一般不會分佈在頁面間，因此不需要單獨對其進行下載緩存。不過，對於Ajax應用，在下載應用程序 資源時採用傳統的分佈式模型也並非不可行，許多Ajax應用也正是這麼做的。 然而，你可以選擇將程序中用到的所有圖片合併到一個文件中，以減少HTTP請求的次數。這樣可以突破同一時間只能發送兩個請求的限制，一次性地下載所有圖片。 GWT從1.4版本開始支持ImageBundle接口。在這個接口中可以爲每一個圖片建立一個方法，編譯器會將所有的圖片組合到一個文件中，並將圖片數 據的Hash做爲新文件的文件名（象程序代碼一樣永久緩存這個文件）。一次性打包合併的圖片數量是沒有限制的，所有這些圖片只需要一次請求就可以全部下 載。 在已經完成的幾個GWT項目中我一直沿用將基本圖片打包的做法，以下是示例代碼： public interface Images extends ImageBundle { /** * @gwt.resource membersm.png */ AbstractImagePrototype member(); /** * @gwt.resource away.png */ AbstractImagePrototype away(); /** * @gwt.resource starsm.gif */ AbstractImagePrototype star(); /** * @gwt.resource turn.png */ AbstractImagePrototype turn(); /** * @gwt.resource user_add.png */ AbstractImagePrototype addFavorite();} 需要注意的是每個方法都有一個公共註解來指明圖片的文件名，方法的返回類型都是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文件及其相關資源的例子： public interface Resources extends ImmutableResourceBundle { /** * @gwt.resource main.css */ public TextResource mainCss(); /** * @gwt.resource back.gif */ public DataResource background(); /** * @gwt.resource titlebar.gif */ public DataResource titleBar(); /** * @gwt.resource dialog-header.png */ public DataResource dialogHeader();} 這個類會爲每個資源指定一個文件和方法，這一點和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應用，我充滿了期待。 作者介紹 Ryan Dewsbury精通C++和Java語言，1998年從業以來分別從事過程序員、架構師和諮詢顧問等多種角色的工作。起初幾年Ryan在協助一個半導體 製造公司構建系統框架。最近他主要應用前沿軟件爲一些創業型互聯網公司改善用戶體驗。另外，這些年Ryan還從事過一些獨立軟件項目的開發工作，包括 2004年的Easy Message，以及最近的兩個基於GWT的web遊戲網站Gpokr (gpokr.com)和KDice (kdice.com)。 注：文中的代碼或者文字並不涉及安全或異常處理。 本文內容摘自《Google Web Toolkit Applications》一書，作者Ryan Dewsbury，Prentice Hall Professional 2007年11月出版，版權所有，Pearson Education，Inc 2008，ISBN：0321501969 。更多信息請瀏覽：www.informit.com/title/0321501969。