如何开发又炫又高效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的源代码,在那基础上也做了个小东东.如附图. 如果有兴趣可以一起讨论.

评论

65 楼 LoriSun 2010-12-21  

buydzyj 写道

设想一下，flash可以在线看电影。如果将一部电影完全解析为HTML页面的DOM元素以及CSS样式，交给javascript去形成电影画面，不考虑网络流量，javascript能不能吃得消？javascript是一定会死给你看的！

你这个设想貌似没有什么意义, 谁也不会那么去用.
目前flex还是在网络流媒体方面的主宰者, 不过请关注HTML5 tag <video> , 将来处理视频会用这个, 在某种程度上讲, 浏览器不用依靠其他插件来播放视频了.

64 楼 LoriSun 2010-12-21  

buydzyj 写道

LoriSun 写道

    开发稍微复杂的项目Flex还是存在性能问题的

skyfen 写道

开发又炫又高效web程序，哪就用flex

Flex的性能比EXT强很多。
网页打开速度主要取决于两方面，一个是网络速度，指相关内容从服务器端发至浏览器端的速度；一个是渲染速度，指接受完数据，根据数据以及CSS样式从而形成最终页面的速度。
FLEX用发布模式（不是调试模式），形成的网页总大小其实略小于EXT，所以网络速度二者几乎一样。
由于Flash是用于视频的，FLEX的渲染速度不仅远高于EXT，并且远高于jQuery,至少在两个数量级以上。

我做地一个Excel到页面进行表格粘贴的程序，需求是：实现Excel到页面的表格粘贴，粘贴后在浏览器端进行单元格的逻辑检查，对于逻辑检查错误的，将页面单元格的背景色设为红色。
这个粘贴程序，用jQuery做，一千个单元格的测试，耗费时间为68秒；用EXT做还要慢不少。用Flex做，一万个单元格的测试，耗费时间2秒。

这证明FLEX的渲染速度远高于javascript，究其根本是因为解释执行的javascript，性能无法与用于视频的flash相比。
设想一下，flash可以在线看电影。如果将一部电影完全解析为HTML页面的DOM元素以及CSS样式，交给javascript去形成电影画面，不考虑网络流量，javascript能不能吃得消？javascript是一定会死给你看的！

未来的RIA霸主是谁还不一定，但是一定不是javascript及其框架，一定是javascript以外的方案。其根本原因是javascript的性能太低下了。

你的见解比较独到, 我觉得将来javascript才是主流. Html5+java script
flex程序需要考虑下载swf的时间, 你做的flex复杂到什么程度? swf文件多大?

63 楼 wang1987 2010-12-21  

现在web 开发各种各样的特效 js插件，类库满天飞。
不馆 extjs,jquery ，还是flex 。都能做出效果出来。不过前提是看什么场合，什么样的产品用什么样的技术吧？？？、

要是开发 erp ,企业内部管理系统这些 extjs 的确突出的，UI页面全封装好的，直接就能做出 桌面效果。

但是在开发网站上。。我想没有白痴还会想用extjs 去开发页面吧？？？

什么技术，都是相对的。相对你的项目，适不合适。
没有标准线，纯粹的争论那个技术好不好没什么多大意义。

只能说在那个项目上，用哪种技术更加合适。效率和开发，维护之前取舍更平衡

62 楼 buydzyj 2010-12-21  

LoriSun 写道

    开发稍微复杂的项目Flex还是存在性能问题的

skyfen 写道

开发又炫又高效web程序，哪就用flex

Flex的性能比EXT强很多。
网页打开速度主要取决于两方面，一个是网络速度，指相关内容从服务器端发至浏览器端的速度；一个是渲染速度，指接受完数据，根据数据以及CSS样式从而形成最终页面的速度。
FLEX用发布模式（不是调试模式），形成的网页总大小其实略小于EXT，所以网络速度二者几乎一样。
由于Flash是用于视频的，FLEX的渲染速度不仅远高于EXT，并且远高于jQuery,至少在两个数量级以上。

我做地一个Excel到页面进行表格粘贴的程序，需求是：实现Excel到页面的表格粘贴，粘贴后在浏览器端进行单元格的逻辑检查，对于逻辑检查错误的，将页面单元格的背景色设为红色。
这个粘贴程序，用jQuery做，一千个单元格的测试，耗费时间为68秒；用EXT做还要慢不少。用Flex做，一万个单元格的测试，耗费时间2秒。

这证明FLEX的渲染速度远高于javascript，究其根本是因为解释执行的javascript，性能无法与用于视频的flash相比。
设想一下，flash可以在线看电影。如果将一部电影完全解析为HTML页面的DOM元素以及CSS样式，交给javascript去形成电影画面，不考虑网络流量，javascript能不能吃得消？javascript是一定会死给你看的！

未来的RIA霸主是谁还不一定，但是一定不是javascript及其框架，一定是javascript以外的方案。其根本原因是javascript的性能太低下了。

61 楼 buydzyj 2010-12-21  

EldonReturn 写道

Flex太笨重，普通Ajax网页很快就能打开的东西Flex得等半天。

skyfen 写道

开发又炫又高效web程序，哪就用flex

搞反了。其实Flex打开速度比EXT快得多。
网页打开速度主要取决于两方面，一个是网络速度，指相关内容从服务器端发至浏览器端的速度；一个是渲染速度，指接受完数据，根据数据以及CSS样式从而形成最终页面的速度。
FLEX用发布模式（不是调试模式），形成的网页总大小其实略小于EXT，所以网络速度二者几乎一样。
由于Flash是用于视频的，FLEX的渲染速度不仅远高于EXT，并且远高于jQuery,至少在两个数量级以上。

我做地一个Excel到页面进行表格粘贴的程序，需求是：实现Excel到页面的表格粘贴，粘贴后在浏览器端进行单元格的逻辑检查，对于逻辑检查错误的，将页面单元格的背景色设为红色。
这个粘贴程序，用jQuery做，一千个单元格的测试，耗费时间为68秒；用EXT做还要慢不少。用Flex做，一万个单元格的测试，耗费时间2秒。

这证明FLEX的渲染速度远高于javascript，究其根本是因为解释执行的javascript，性能无法与用于视频的flash相比。
设想一下，flash可以在线看电影。如果将一部电影完全解析为HTML页面的DOM元素以及CSS样式，交给javascript去形成电影画面，不考虑网络流量，javascript能不能吃得消？javascript是一定会死给你看的！

未来的RIA霸主是谁还不一定，但是一定不是javascript及其框架，一定是javascript以外的方案。其根本原因是javascript的性能太低下了。

60 楼 LoriSun 2010-12-20  

haole 写道

为什么说“炫”呢？难道个人电脑性能提升就不考虑程序性能了吗？你处理过千万条记录的数据吗？
现在个别程序员越来越浮躁，用一些表面的东西显示自己的高深。

如果你要是有什么高深的东西就拿出来分享分享, 没有谁来这里显示自己的高深

还有 你理解问题的角度怎么和正常人不一样呢? 谁有说过个人电脑性能好就不用考虑性能了? 个人电脑性能提升了, 才可以流畅展示大运算量的复杂UI, 麻烦请你这么理解..... 

59 楼 LoriSun 2010-12-20  

eredlab 写道

carydeepbreathing 写道

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

建议访问eRedG4在线Demo表格范例之缓冲表格：试试需要多长时间！
http://web230531.host89.chinajsp.net/

缓冲表格和不错, 如果不用一次全把数据全下载回来就更好了. LiveGrid :http://www.ext-livegrid.com/demo/

58 楼 tq02ksu 2010-12-20  

o0rid0o 写道

最近的项目用到了dojo，经历的过程大概：哇，真不错 → 有点儿难用啊 → 艹，什么JB玩意儿 → 唉？原来还可以这么用啊 → 好像还可以 → 我艹，这东西真TMD强大。

靠, 太TM 经典了.

57 楼 huang5787826 2010-12-20  

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

至于大数据我目前公司基于  烟草
     这样的业务对于数据不仅只是1000条这么简单，老大和我说数据都是用 千万来表达的！ 数百万的数据是算少的了！
        我们依然选择 ext 的grid  利用dwr 来放回，个人觉得这样的处理效率还是可以的 那么多的数据并不需要很多的时间，利用分页查询，应该会比较快的！
  再说 
    ext 的grid  可以扩展，相对可用性比较高
extjs总体来看，适合业务比较稳定的系统
一旦自己开发了一套常用组件，那开发效率真不是盖的，只管写业务代码就得了。

56 楼 haole 2010-12-20  

为什么说“炫”呢？难道个人电脑性能提升就不考虑程序性能了吗？你处理过千万条记录的数据吗？
现在个别程序员越来越浮躁，用一些表面的东西显示自己的高深。

55 楼 Cindy_Lee 2010-12-20  

那些说ext大的人都是蠢的在页面加载的时候就把ext-all.js放进去，官方已经帮你把包分好了，用到什么加载什么，看看gxt，每次请求只几kb（除去图片）

54 楼 eredlab 2010-12-19  

carydeepbreathing 写道

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

建议访问eRedG4在线Demo表格范例之缓冲表格：试试需要多长时间！
http://web230531.host89.chinajsp.net/

53 楼 witcheryne 2010-12-19  

LoriSun 写道

witcheryne 写道

只要响应快，少出错... 就行..

要炫~ 很简单, Don't make them think... 多研究研究用户体验...

这帖子有点标题党的感觉。。。。

呵呵, 出错是写代码水平问题, 与此题无关.

去看看这个: http://qwikioffice.com/desktop-demo/
要炫,你说很简单, 不用Extjs或类似的东西, 你自己实现起来看看.

进来感觉与标题不符， 看了一圈全是对ExtJS框架的讨论, 没有提到如何又绚又高效，楼主文章理倒是提到了交互和资源压缩的问题，这些的确是能提高性能，很受用。


http://qwikioffice.com/desktop-demo/ 
这个以前看到过，有人开过帖子show过这个应用。。。
这些只能让我们开发人员感觉很酷，如果给用户看会酷么？  一个桌面又搬到到了浏览器里。。。
个人感觉这个QWikiOffice的应用把帖子引跑题了。。

我这里也收集了一些比较好的应用可以供参考：
WebOS:     http://www.michaelv.org/    Win32 UI
WebApp:    http://www.zoho.com/        感觉比Google Docs 做的好
WebGame: http://www.phoboslab.org/biolab/    基于HTML5的游戏， 音效和动画效果只能用不可思议来形容。。

52 楼 LoriSun 2010-12-19  

zzhonghe 写道

我也在几个项目中用到了Extjs，JS代码量大概5万行左右，扩展了一整套Ext的组件，比如Grid，Panel，ItemSelector，PagingBar等等，采用组件事件驱动的方式，开发得速度那是刷刷的快啊。

我们选择Ext不仅仅是因为它的界面，更重要的是看中它的体验。当你的用户对界面的交互体验要求很高的时候，自己从头开始编写这些体验，几乎都不太可能。 比如：Grid用户需要能够自由拖拉每个列的宽度，自由改变每个列的顺序，能在每一个数据上进行编辑等。。   还有Combobox，集查询和选择一体.. 

当然如果项目不需要这些体验，用户不关注这个，就真的没必要找这个一个大东西了。

算Ext行家了, 支持. 有一点, 如果你扩展了Extjs的组件,最好写明扩展的版本, 对你以后升级很有帮助.不然很痛苦的, 曾经疼过.   

51 楼 zzhonghe 2010-12-19  

我也在几个项目中用到了Extjs，JS代码量大概5万行左右，扩展了一整套Ext的组件，比如Grid，Panel，ItemSelector，PagingBar等等，采用组件事件驱动的方式，开发得速度那是刷刷的快啊。

我们选择Ext不仅仅是因为它的界面，更重要的是看中它的体验。当你的用户对界面的交互体验要求很高的时候，自己从头开始编写这些体验，几乎都不太可能。 比如：Grid用户需要能够自由拖拉每个列的宽度，自由改变每个列的顺序，能在每一个数据上进行编辑等。。   还有Combobox，集查询和选择一体.. 

当然如果项目不需要这些体验，用户不关注这个，就真的没必要找这个一个大东西了。

50 楼 freish 2010-12-18  

EXT那么丑陋的界面你们都能忍受？！天啊，杀了我吧

49 楼 LoriSun 2010-12-17  

tianzhou0374 写道

1、就是当程序多了以后，js是初始化页面的时候加载还是动态加载，如果是动态加载，那么实现同步和异步加载的机制？

当然动态加载, 并且动态加载的js是经过JAWR 压缩处理过的. 可以用JIT或者Jquery也有类似的功能, 在加载成功之后可以调用一个callback方法,这样用到什么就加载什么,感觉非常不错的. 这个问题跟qwikioffice没什么关系, 做大量js的web都适用. 举个例子: 如果你用过Extjs, 其中TabPanel的每个Tab我们可以做成不同的模块, 在你切换tab的时候tabchange : (TabPanel this, Panel tab ), 先去下载这个tab下用的js, 下载成功之后加载这个tab的内容.

tianzhou0374 写道

2、当一个页面中comboBox，form,grid等控件多了以后，打开一个程序时需要产生数个Ajax连接，这样反而给服务器增加负
担，这个问题也需要解决。

这是请求策略问题, 什么时候发请求, 每次请求多少东西, 按照你系统的需求和server性能合理规划策略就是了.

tianzhou0374 写道

3、在编写代码过程中，团队成员对Ext的掌握程度不同，也会出现内存未释放积累时间长了以后越来越慢，单个程序崩溃导致全局崩溃，乱用全局变量等问题。

这是个问题, Extjs新版本中资源回收方面已经有了很不错的改进. 再有就是从写代码方面注意, 在满足需求的时候尽量缩小你对象的范围. 自己扩展的组件, 留意下 destroy : ( Ext.Component this ) 这个方法的应用.

48 楼 LoriSun 2010-12-17  

云和山的彼端 写道

LoriSun 写道

smallsnake 写道

何必那么多的插件
简单一点：Flex + Ejb3

你不需要用Life Cycle(for flex3) 或 FDS(for flex2) ?

在你研发新框架的时候世界上出现了个东西叫Blazeds...
而且flex的DataGrid给1000条数据不分页是一点问题都没有的。
ExtJS的速度不在可接受范围内。

好长时间没做Flex的东西了, 这个东西之前没用过, 这个东西优势在哪里呢?

47 楼 depravedangel 2010-12-17  

tianzhou0374 写道

基于Qikioffice的程序有几个个问题：
2、当一个页面中comboBox，form,grid等控件多了以后，打开一个程序时需要产生数个Ajax连接，这样反而给服务器增加负担，这个问题也需要解决。

这个其实是Ajax中普遍遇到的问题，但要解决也不难，需要实现一个请求队列管理器即可：多个请求合并到一个请求中，请求完的数据再在前台拆分

46 楼 tianzhou0374 2010-12-17  

基于Qikioffice的程序有几个个问题：
1、就是当程序多了以后，js是初始化页面的时候加载还是动态加载，如果是动态加载，那么实现同步和异步加载的机制？
2、当一个页面中comboBox，form,grid等控件多了以后，打开一个程序时需要产生数个Ajax连接，这样反而给服务器增加负担，这个问题也需要解决。
3、在编写代码过程中，团队成员对Ext的掌握程度不同，也会出现内存未释放积累时间长了以后越来越慢，单个程序崩溃导致全局崩溃，乱用全局变量等问题。