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

评论

85 楼 key232323 2011-04-07  

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

核心只有一个，NB的UI Designer，jser只要不差，用哪些技术、框架，都是浮云。

84 楼 black.angel 2011-04-06  

说实在话，我虽然喜欢 flex 但是纯粹拿 extjs 去和 xxx 技术去比完全就是脑残的行为了。gwt，YUI，Jquery-UI 也都要去比一次么？

什么样的需求决定什么样的框架。

83 楼 liutsi 2011-02-17  

这样的讨论不考虑到学习成本是不合适的。JS虽土，可是会的人多，这也是一大优势。

82 楼 LoriSun 2010-12-29  

176170847 写道

js敢说炫
让flash情何以堪，
追求炫你用Js，不脑残么

喜欢Flex可以, 但是这样极端的说法充分显示了你的无知.

81 楼 176170847 2010-12-29  

js敢说炫
让flash情何以堪，
追求炫你用Js，不脑残么

80 楼 LoriSun 2010-12-25  

duchengning 写道

其他不说了，有空去看一下http://www.hoouf.com

看过了, 效果很不错, 是基于qwikioffice 较早版本做的.  有很大的优化空间, 登录框出现之前白屏时间有些长, 你可以像extjs sample那样上来弄一个loading的图标.

建议使用JAWR和SmartSprite对你的JS和CSS压缩.

79 楼 skyfen 2010-12-24  

哈哈。。。
同志们，不用耽心啊，网速会越来越快的，关键是电脑硬件配置也要跟上来才行。

78 楼 starzhang 2010-12-24  

我以前也选用过extjs 在自己本机上测试使用的时候是很炫,速度也很快,可是如果真正用在开发项目中,一个extjs有600多kb吧, 你以为每个公司都像你们公司一样???  三年一换电脑, 我朋友他们公司, 现在还有在用 256的机子,最好的也就1G, 按照你这么说  extjs  是用来给大公司  有钱公司用的咯,  呵呵

77 楼 duchengning 2010-12-23  

其他不说了，有空去看一下http://www.hoouf.com

76 楼 LoriSun 2010-12-23  

skyfen 写道

其实flex Builder 生成的swf文件只有几个引用的swf基础文件，这几个flash文件只是接口，不包含什么内容，swf文件并不大。其它项目文件都是类似于XML文档的MXML文件，相当于文本文件，传输到客户端，由flash player 渲染

也许楼上的策略很好, 之前没有这么用过, 目前也不知道具体实现方式.
我们那时候用cairngorm framework. 有好一段时间没弄Flex了, 给个例子?

75 楼 skyfen 2010-12-23  

LoriSun 写道

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文件多大?

其实flex Builder 生成的swf文件只有几个引用的swf基础文件，这几个flash文件只是接口，不包含什么内容，swf文件并不大。其它项目文件都是类似于XML文档的MXML文件，相当于文本文件，传输到客户端，由flash player 渲染

74 楼 lietodie 2010-12-23  

web绝对是个潜力股 我相信经过努力会变的更好的 楼上也别说这个不好 那个不好 你有好的请赐教

73 楼 goldduck 2010-12-23  

carydeepbreathing 写道

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

如果你的应用都这是种场景，确实不适合用Ext.
用Ext未必不能开发出高效的web应用，看开发者的水平吧。

72 楼 hypercube1024 2010-12-23  

ExtJs 这个太庞大了，速度也慢，还是觉得原生的js做界面比较好

71 楼 liusu 2010-12-22  

看到很多人说ExtJS可以定制界面，但是就我从回帖中以及我实际做的项目中来看，从来没有看到过定制的界面，都是使用ExtJs原生的（改了点背景颜色的不算）

说ExtJs界面很炫酷，我觉得算不上。

实用，但是可以说的过去。

70 楼 rplees 2010-12-22  

181054867 写道

extjs太重量级了，不适合开发大众化的界面，用来做某些内部管理人员使用的系统最适合，不需要考虑太多性能问题，JQuery是最好的javascript类库

个人使用jquery跟前面某个兄弟使用pojo是一个感觉！

69 楼 LoriSun 2010-12-21  

buydzyj 写道

系统功能子菜单20个左右。排除登录页面，全部功能页面（包括前面所述的从EXCEL到页面的粘贴、逻辑检查、渲染）：几个swf文件一共299K，几个javascript文件一共32K，HTML页面5K。一共337K左右。

你这样的flex大小还可以,下载用时不是什么问题; 之前的一个flex项目, swf文件要将近2M的, 这个时候下载swf文件的时间就需要考虑啦..

68 楼 buydzyj 2010-12-21  

LoriSun 写道

buydzyj 写道

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

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

我的意思是：现在的各种RIA方案，与以前的白板页面相比，是强调渲染效果的。一个大数据量的表格，如果用HTML和javascript做，考虑现在的表格基本都用CSS等，一般较慢；如果改为FLEX做，在渲染速度上可以大大提高。
javascript的渲染性能，可能只有flash的百分之一，甚至是千分之一。

还有，我说的是做管理系统，而不是视频。比如，页面中做一个TABLE，单元格数量多一些，或者是加上CSS渲染；实现这一点，javascript比flex性能要差上很多。

67 楼 buydzyj 2010-12-21  

LoriSun 写道

buydzyj 写道

LoriSun 写道

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

skyfen 写道

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

Flex的性能比EXT强很多。

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

系统功能子菜单20个左右。排除登录页面，全部功能页面（包括前面所述的从EXCEL到页面的粘贴、逻辑检查、渲染）：几个swf文件一共299K，几个javascript文件一共32K，HTML页面5K。一共337K左右。

66 楼 LoriSun 2010-12-21  

wang1987 写道

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

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

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

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

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

说的比较有道理, 本帖初中并不是比较Flex Extjs Jquery谁的效率高.
应该从整个系统的运行角度谈谈 有什么好办法可以提高.