`
923080512
  • 浏览: 191414 次
  • 性别: Icon_minigender_1
  • 来自: 商丘
社区版块
存档分类
最新评论

利用GWT开发高性能Ajax应用

    博客分类:
  • GWT
GWT 
阅读更多

近日,InfoQ发表了Ryan Dewsbury所著的Google Web Toolkit Application 》书中的"Integrating with a GWT-RPC Servlet" 一章。

对性能的提升是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

查看英文原文: High Performance Ajax with GWT

分享到:
评论

相关推荐

    GWT性能优化,利用GWT开发高性能Ajax应用,始终做好缓存, 程序压缩

    【GWT性能优化:开发高性能Ajax应用的关键】 Google Web Toolkit(GWT)是Ajax开发领域的一个强大工具,它以其独特的特性和优势提升了Ajax应用的性能和用户体验。GWT通过将Java代码编译为高度优化的JavaScript,...

    gwt开发实例实现

    GWT(Google Web Toolkit)是Google推出的...总之,GWT结合Ajax技术为开发高性能的Web应用提供了一种强大而高效的方法。通过学习和实践GWT开发实例,开发者可以掌握构建交互式Web应用的技巧,提高开发效率和产品质量。

    基于GWT轻松掌握AJAX开发

    总之,Google Web Toolkit为AJAX应用开发提供了一套完整的解决方案,包括高级语言抽象、跨浏览器兼容性、便捷的调试工具以及丰富的用户界面组件。借助GWT,开发者可以更高效、更方便地创建复杂的Web应用,而无需深入...

    Using Google Web Toolkit (GWT) for Developing AJAX-Based Web Applications for the SAP NetWeaver J2EE Framework.pdf

    通过上述步骤,开发者可以有效地在SAP NetWeaver J2EE框架下利用GWT开发出高效且功能丰富的AJAX应用。这种方法不仅能够提高开发效率,还能显著提升最终用户界面的用户体验。此外,由于SAP NetWeaver J2EE框架的强大...

    Google.Web.Toolkit.GWT.Java.AJAX.Programming

    《Google.Web.Toolkit.GWT....通过学习这本书,开发者不仅可以掌握GWT的基本用法,还能深入了解如何构建高性能、易于维护的Java AJAX应用。无论你是初学者还是有经验的开发者,都能从中获得宝贵的实践经验和理论知识。

    AJAX开发框架GWT

    【GWT 框架详解】 Google Web Toolkit (GWT) 是 Google 推出的一款用于构建 AJAX 应用的开发框架,它允许开发者使用 Java 语言编写...结合 Java 语言的成熟生态系统,GWT 成为了构建复杂、高性能 Web 应用的理想选择。

    New of GWT Introduction--GWT开发快速入门

    总的来说,GWT为Java开发者提供了一个强大的工具,使得他们能够在熟悉的Java环境中构建高性能、跨平台的Ajax应用,同时享受到Ajax技术带来的交互性和动态性。对于想要涉足Ajax开发的Java程序员来说,GWT是一个值得...

    Java和GWT应用开发.pdf

    2. **前端开发**:利用GWT编写客户端代码,创建丰富的用户界面,并通过GWT的RPC(Remote Procedure Call)机制与后端进行数据交换。 3. **测试**:GWT提供了单元测试和集成测试工具,可以对前后端代码进行全面的测试...

    基于GWT和J2EE的Web开发框架的设计实现与应用

    GWT不仅提供了丰富的UI组件库,还支持代码自动转换成高性能的JavaScript,从而克服了直接使用JavaScript开发的局限性。本文旨在介绍一种结合GWT和J2EE的Web开发框架的设计、实现及其应用场景。 #### GWT框架技术 ...

    GWT-Ajax技术介绍.ppt

    GWT充分利用Ajax技术的优势,提供了一种声明式和编程式的混合方式来构建Ajax应用。在GWT中,开发者可以通过编写Java代码创建和操作DOM元素,实现页面动态更新,而无需直接编写JavaScript。GWT还封装了异步调用服务端...

    关于GWT的部署介绍

    GWT(Google Web Toolkit)是一个开放源码的开发框架,它允许开发者使用 Java 语言来构建高性能的富互联网应用程序(Rich Internet Applications,RIA),然后自动将其编译为优化过的 JavaScript 代码,从而在各种...

    GWT

    标题 "GWT" 指的是 Google Web Toolkit,这是一个开源的Java开发框架,主要用于构建高性能、跨浏览器的富互联网应用程序(Rich Internet Applications,简称RIA)。GWT通过将Java代码编译为JavaScript,使得开发者...

    gwt教程

    GWT的出现解决了传统Web开发中AJAX技术带来的复杂性,使得开发人员可以使用单一的编程语言和一套API来构建高性能、跨浏览器的富互联网应用(Rich Internet Applications,RIA)。 ## GWT的工作原理 1. **编译过程*...

    GWT-Ajax

    Google Web Toolkit (GWT) 是Google推出的一款强大的开源开发工具,它允许Java开发者使用Java语言来构建高性能的、富交互式的Web应用,而无需深入学习JavaScript。GWT的核心在于其对Ajax(Asynchronous JavaScript ...

    GWT学习经验及实例指导

    通过实例学习GWT,你可以逐步理解如何创建用户界面,处理事件,与服务器进行异步通信,以及如何利用GWT的其他高级特性,如国际化、模块化和性能优化。 总之,GWT为Java开发者提供了一个强大的工具集,使得构建动态...

    GWT英文参考

    - **高性能**:通过代码压缩、合并等手段提高应用性能。 - **易于调试**:可以使用标准的 Java 调试工具进行调试。 - **强大的工具支持**:提供了一套完整的开发工具链,包括编译器、调试器等。 - **丰富的 UI 组件...

    GWT入门教程的好东西啊

    - **充分发挥Ajax优势**:通过Java开发出的Ajax应用能够在保证高性能的同时,提供更加丰富的用户体验。 #### 三、GWT的关键特性 1. **GWT编译器**: - 负责将Java代码转换为Ajax内容。 - 支持Java语言中的多种...

Global site tag (gtag.js) - Google Analytics