如何开发又炫又高效web程序

   随着个人电脑性能的不断提升, 各个浏览器厂商的不断努力, 让我们可以在客户端运行越来越庞大,复杂的javascript程序,当然结果也是可喜的,目前的web程序悦来也炫,能实现的特效也悦来越多. 其中给我们带来很大方便的一款web rich UI技术, 也不能称作新技术, 应该叫JS&CSS类库:Extjs...接下来我介绍一整套 自认为比较优越web的开发模式,前端就是基于Extjs的,跟大家一起分享和讨论.希望大家集思广益, 共同提高.

主体:
   前端基于Extjs
   Server交互使用Dwr-spring 或 Ext.Ajax.Request + Servlet
   Java的后台.(jawr,smartsprite,gson,dwr-spring)

这看上去并没有什么特别, 可能大多数人也都这么用.接下来从炫 和 高效角度 加以补充.

  说起旋的话, Extjs 官方提供了n多UI组件,能满足大多数的功能需求, 也可以自己集成已有的Extjs 组件进行扩展, 让以前较难实现的特效变的容易了许多, 例如Drag&drop等.Ext开放式的CSS样式模板(E:\ext-3.3.1\resources\css\yourtheme.css)可以方便容易的自定义样式.这些都为你搭建一个炫丽的web程序提供了极大的帮助,当然Jquery-UI也是不错的选择,本人用Extjs较多,在这里就不介绍JQUI. 当然为了实现炫丽和强大的前端功能,我们的web程序中需要大量的JS和CSS以及资源文件(image,swf,etc), 俗话说 鱼跟熊掌不能兼得么.

官方提供的组件demo: http://dev.sencha.com/deploy/dev/examples/
基于Extjs的桌面仿真web程序: http://qwikioffice.com/desktop-demo/

  高效,相对高效,尽量高效. 为了实现高效的web应用, 可以提升Web Server的性能,应用负载均衡器(在华为时候普遍用F5),做集群,提升网络带宽(大些的公司使用Akamai资源服务器),买更牛的个人电脑,用更牛的浏览器. 但是这些可能都不是我们应该考虑的解决方案.开发人员更多的要从程序上提高:

  1,)让你的后台服务程序更加高效,通常不做大量的IO操作,不执行愚蠢的sql,后台服务所消耗的时间应该不是web项目性能的瓶颈(注: 如果要使用集群web server,在做程序时也需要考虑, 尤其用Spring IOC).

  2,)让web程序需要的资源文件尽可能的简洁干净,提高server响应和传输效率.使用AJAX. 控制每次请求的数据传输量均衡与浏览器处理能力.我介绍的这个模式着重优化了这部分,尤其适用于大量JS,CSS和资源文件的web项目.
首先介绍2个小东西,这些是优化的关键.

  @SmartSprite(http://csssprites.org/):通过给已有的CSS加注释, SS可以把零散的小图片(图标)压缩成若干张相对大的图片,以减少对web server的请求次数, 同时生成可以正确引用到这些小图片的CSS.

  @JAWR(https://jawr.dev.java.net/): 可以压缩捆绑JS和CSS,并对压缩的JS,CSS以及图片资源文件提供缓存, 这样可以提高web server对这类请求的相应,由于压缩,可以减少此类请求在网络的传输时间.

通过使用以上两个小东西,可以让JS,CSS和资源文件尽可能快速地传输到浏览器,建议按需索取,尽量只get必须的,不是马上用到的,再使用前一刻再下载(按程序需要设计下载策略,$JIT是很好的即取即用工具).其他的请求,保证没有问题的情况下, 尽量多的使用Ajax, 尽可能的按需索取数据,按需更新.大数据量时,应考虑分页或者更高效的UI组件,例如: EJS treegrid: (http://www.treegrid.com/treegrid/www/). 如果逻辑允许, 尽量少的做页面跳转,尤其每个页面都引用大量JS的时候, 尽量考虑使用静态页面(适用本模式).
 
  3,) 让HTML,JS和CSS运行更高效稳定,这个不是三言两语就能说清楚的,同时大多数人都知道其中的规则,我也就不多说了.

高效,就要提高后台程序的性能, 提高server响应的性能, 提高传输性能, 提高浏览器中程序的性能.

以上是我的一点浅薄之见,希望大家多给意见,有什么好的模式和技术请一起分享.

最近读了一下qwikioffice的源代码,在那基础上也做了个小东东.如附图. 如果有兴趣可以一起讨论.

评论

5 楼 depravedangel 2010-12-16  

LoriSun 写道

   随着个人电脑性能的不断提升,

首先想说的是，个人电脑跟商业用户几乎不搭界。想用户电脑性能提高就是一美丽的童话，好多商业用户的公司电脑512内存还在用着呢！

LoriSun 写道

   前端基于Extjs
   Server交互使用Dwr-spring 或 Ext.Ajax.Request + Servlet
   Java的后台.(jawr,smartsprite,gson,dwr-spring)

个人认为这样纯粹就是瞎折腾，用了Extjs还用Dwr干嘛？本来就是两种不同的开发模式，非要搞在一起？如果这样还想高效那就真的只能是脑子里想象了。

4 楼 lf529892 2010-12-16  

我在qwikioffice做了一个完整的项目，只想说卡就一个字！

3 楼 siashuayongsheng 2010-12-16  

自己写JS多爽,要啥效果写啥效果，干吗要加载几百K的EXTjs，一个Jquery.js几十k就感觉大的不行了

2 楼 LoriSun 2010-12-16  

carydeepbreathing 写道

炫个人认可，所谓高效，谁用谁知道！
你自己测试下1000条数据单次全量加载要多长时间就知道了！(不要问为我什么有这样的需求)
美丽的谎言不知道欺骗了多少人

讨论的是如何开发高效web程序, 你分明没有时间全部看完啊.

上面也提到的大数据量的情况, Ext Grid性能是一般, 尤其是添加了很多自定义的功能的时候, 建议使用分页, 可以用PagingToolBar来做;论坛里也提供LiveGrid来解决这样的问题, 如果你非要一下显示1000条数据的话, 我相信大多数Rich UI的前端框架都面临这个挑战, 建议使用EJS TreeGrid. 高效而强大, 它的原理是把尽可能多的逻辑放到后台实现, 浏览器只是展示.

楼上那你觉得一下显示1000条数据的方法用什么比较好? 用什么技术都是要尽量发扬它的长处, 避其短处.  

1 楼 carydeepbreathing 2010-12-16  

炫个人认可，所谓高效，谁用谁知道！
你自己测试下1000条数据单次全量加载要多长时间就知道了！(不要问为我什么有这样的需求)
美丽的谎言不知道欺骗了多少人