社区应用 最新帖子 精华区 社区服务 会员列表 统计排行 银行

  • 18615阅读
  • 1回复

提升Web应用程序性能的方法

级别: 管理员
发帖
8532
金币
2762
威望
3231
贡献值
0
元宝
0
导读:作为开发人员,Web页面加载或刷新的速度对其网站至关重要。在浏览器中调整性能问题比在Java应用程序中更难。开发人员在各种浏览器中调试JavaScript的方法要少得多。比如,在Mozilla Firefox中,可以使用Firebug调试JavaScript,但仍然不能调整很多性能问题,如浏览器呈现消耗时间。为了解决这些问题,有必要开发浏览器插件来监控时间响应,以及确定其他对应解决方案如部分呈现或延时加载。


本文节选自IBM developerWorks 提升Web应用程序的性能的系列文章,该文通过Web应用程序性能的最佳实践案例,帮助开发者更好地理解影响Web应用程序性能的因素,学习如何诊断Web应用程序中的性能问题,找到客户端内容中的瓶颈,并确定解决方案。


一、提升Web应用程序性能的6种基本方式


1.减少HTTP请求数


每个HTTP请求都有开销,包括查找DNS、创建连接及等待响应,因此削减不必要的请求数可减少不必要的开销。要减少请求数:


合并文件。将总是同时使用的脚本合并到同一个文件中,不会减小总大小,但将会减少请求数。还可以同样方法合并CSS文件和图片。可以实现文件自动合并:
在构建阶段。用<concat>标记,通过运行Ant合并文件。
在运行时阶段。启用mod_concat模块。如果httpServer是Apache,用pack:Tag作为JSP标签库来合并JavaScript和样式表文件。(pack:Tag是一个JSP-Taglib,可缩减、压缩及合并资源,如JavaScript和CSS,并将它们在内容或普通文件中缓存。)
使用CSS Sprites。将背景图片合并成一个图片,并使用CSS background-image和background-position属性来显示所需图片部分。还可使用内联图片减少请求数。
2.后置加载组件


只呈现需要的组件;其余可等待。最好不要一次呈现太多组件。


某些情况下,可使用后置加载。由于浏览器可视区域外的组件可以后置加载,当这些组建进入可视区域不久后,初始呈现就会失效。


有些JavaScript可以在onload事件后后置加载,如JavaScript中初始呈现后拖动某个元素。


3.前置加载组件


通过前置加载组件,可以利用浏览器的空闲时间请求将来会用到的组件(如图像、样式和脚本)。当用户访问下个页面时,如果大多数组件都已在缓存中加载,那页面加载会快得多。


有两种前置加载:


无条件:一旦触发onload,就取得一些额外组件。


有条件:根据用户的动作,推测用户下一步的方向并进行相应的前置加载。


4.将脚本放在底部


脚本可能会产生问题,因为它们可能会阻碍并行下载。当下载脚本时,浏览器不会再启动其他下载,即使那些位于不同主机。将脚本,如样式表,放在底部,以保证它们在其他下载完成后再下载。


也可以使用延时脚本,这只有Internet Explorer支持。DEFER属性表示脚本不含document.write()。这就告诉浏览器他们可以持续呈现。


5.使用无cookie域组件


当浏览器发出对静态图片的请求,并随之发送cookie时,服务器不会使用那些cookie。由于这些cookie只会造成不必要的网络流量,确保用无请求来请求静态组件。然后使用子域和主机保存这些静态组件。


6.将JavaScript和CSS放在外部


现实世界中使用外部文件通常会使页面运行更快,因为JavaScript和CSS文件被浏览器缓存。HTML文档内的JavaScript和CSS会在每次请求HTML文档时被下载。这减少了需要请求的HTTP的数量,但增加了HTML文档的大小。另一方面,如果JavaScript和CSS在被浏览器缓存的外部文件中,就会减小HTML文档大小,而不会增加请求数。


二、改进RIA小部件性能方法


主流RIA Ajax框架,如ExtJS、YUI、Dojo及其他,都提供一些精巧的小部件库,以增强用户体验。与其他框架相比,Dojo在企业开发领域更强大,这是由于:


Object-oriented programming(OOP)编码
跨平台
本地数据存储的Dojo离线API支持
DataGrid、2D和3D图形(图表组件提供了在浏览器展示报表更简单的方法)
Dojo在很多网站广泛使用。这里将使用Dojo举例,分析RIA小部件的性能。可根据具体情况使用Dojo小部件调整工具,有Page Speed、Rock Star Optimizer及Jiffy。强烈建议使用YSlow和Firebug。


YSlow


YSlow根据一组高性能Web页面准则,通过检查页面上所有组件,包括由JavaScript创建的,来分析Web页面性能。YSlow是一个集成了Firebug Web开发工具的Firefox插件;它可提供提升页面性能的建议、总结组件性能、显示页面统计数据并提供用于性能分析的工具。


图中显示的是YSlow Grade选项卡上的信息。






YSlow的Web页面建立在22条可测试的规则基础上,这些规则在下方按重要性和效果排列。研究显示,按照以下规则,Web页面响应时间可提升25%到50%:


尽量减少HTTP请求数。
使用内容发布网络(CDN)。
添加Expires或Cache-Control头部。
用Gzip压缩内容。
将样式表放在顶部。
将脚本放在底部。
避免使用CSS表达式。
将JavaScript和CSS放在外部。
减少DNS搜索。
精简JavaScript和CSS。
避免使用重定向。
删除重复的脚本。
配置ETags。
使Ajax可缓存。
使用GET进行Ajax请求。
减少DOM元素数。
消除404错误。
减小cookie大小。
对组件使用无cookie的域。
避免使用过滤器。
不在HTML中测量图片大小。
使favicon.ico尽可能小,可缓存。
如图:图中的YSlow Statistics,对空缓存的访问用户和之前访问过页面的用户的页面大小做了对比。






Components选项卡显示了每个组件及相关的性能信息。例如,如果组件被gzip压缩,或ETag有内容(如果的话),都能看到。组件大小和超期时间也显示在Components选项卡中,如图所示。






Firebug


Firebug与Mozilla Firefox集成,在浏览网站时有大量开发工具随手可用。可以即时编辑、调试、监控Web页面中的CSS、HTML和JavaScript。


可以使用Firebug Net面板,如图所示,监控Web页面产生的HTTP流量。它向用户展示了所有收集到的和计算出的信息。每个条目表示页面的一个请求/响应来回。






Firebug Console面板,如图所示,提供了两种监控代码性能的方法。






Profile


对于某个特定的函数,使用Profiler。JavaScript Profiler是能用来测量每个JavaScript代码执行时间的Firebug特性。使用JavaScript Profiler来提升代码的性能,或是查看为什么某个函数运行时间过长。它与console.time();类似,但JavaScript Profiler能提供更多代码内部过程细节。


console.time()


对于特定代码段,使用console.time()。控制台会显示您输入到命令行的命令的结果。可以使用console.time(timeName)函数测量某个特定代码或函数执行多长时间。该特性对于提升JavaScript代码的性能非常有用,样例显示:


var timeName = 'measuringTime';    
console.time(timeName); //start of the timer    
for(var i=0;i<1000;i++){    
//do something    
console.timeEnd(timeName);  //end of the timer
measuringTime:xxms将显示在控制台。


结束语


文中,开发者学习了如何识别Web应用程序中的一些问题或瓶颈。开发者们应了解一些工具、窍门和技巧,以用于调整和改善对用户的性能。
关键词: web 程序 性能 工具
QQ: 378890364 微信:wwtree(省短信费) 紧急事宜发短信到0061432027638  本站微博:http://t.qq.com/wwtree QQ群:122538123
级别: 管理员
发帖
8532
金币
2762
威望
3231
贡献值
0
元宝
0
只看该作者 沙发  发表于: 2013-07-29
Web开发者易犯的五大严重错误
摘要:无论你是编程高手,还是技术爱好者,在进行Web开发过程中,总避免不了犯各种各样的错误,而这些错误往往是最普通,最容易避免。本文列举了最需要注意的五大错误,比如“重新发明轮子、把自己想像成Web设计者等。

无论你是编程高手,还是技术爱好者,在进行Web开发过程中,总避免不了犯各种各样的错误。
犯了错误,可以改正。但如果犯了某些错误,则会带来重大损失、遗憾。令人惊讶的是,这些错误往往是最普通,最容易避免。下面将列举最需要注意的五大错误。
“重新发明轮子”
你希望把自己的网站打造成独一无二、与竞争对手相区别的网站,这一点我们理解。
但你不必“重新发明轮子”。
苹果并不是从零开始设计iPhone的。它是由不同的微处理器、锂电池、固件、电容性屏幕及所有包装组装而成的漂亮的智能手机。即便它的专利操作系统iOS也是模仿UNIX操作系统设计而成。
所以,不要因为模仿了他人的网站,而觉得羞愧。他们的网站可能也是模仿他人网站而来。基于现存的、集合的、他人的智慧去创造,是人类的天性,也是推动人类社会发展的主要方式。
你不必要求自己设计出的网站举世无双、精彩绝伦。只需要在外观和感觉上比其他网站略胜一筹即可。
如何避免该错误呢?

    找到你、客户喜欢的网站,了解一下该网站风格,并体会一下你所欣赏的地方。然后在Google中键入与你商业相关的关键字,并点击搜索列表中前几条结果。访问similarweb.com,看看其他哪些网站出现在你的视野里。




    同时,你也可以使用如iSpionage.com这样的网站,来快速了解你竞争对手有哪些。



你自认为很清楚你的直接竞争对手是谁。其实,当你的目标用户在Google中根据搜索条件搜索出来的网站,才是你真正的竞争对手。那些运用Google Adwords的竞争对手正在强烈地吸引并获得你目标用户的注意力。
不清楚你希望访问者做什么
当访问者访问你网站时,你希望他们做什么?
仔细思考片刻……
事实上,仅有一小部分访问者会按照你希望的去做。在互联网世界里,获得2~5%的转化率已很不错了。想一下,100个访问者中才有2个人。别让这个数字再低了!
你需要为访问者定义清晰的目标。

    如果你涉足的是服务行业,希望访问者给你打电话,那你就要把电话号码放在导航的顶部。




    如果是电子商务行业:你可能希望访问者记住你热销的产品,或者最惊人的销量。



一旦你清楚了你想让用户做什么,那么你就可以去设计每个单独页面,及网站的导航结构,去试图达到该目标。
为所有网页设计统一的风格主题,并增强访问者在网站上的用户体验。
把自己想像成Web设计者
尤其对于那些会使用Photoshop的开发者来说。
利用Photoshop将你的“设计”设计得更美观些,会浪费掉很多时间。有很多隐含的因素,可能会花费你很多很多时间,如颜色组合、字体样式、字体大小、对齐、空白等等,而这对于专业的Web设计师来说却是轻而易举的。
如何避免它?
较好的方法是雇佣一个平面设计师。你可以在99designs.com这样的网站中举行一个Web设计竞赛,以发现你喜欢的设计者。


你所理解的,认为Web设计师也一定理解
这是问题的另一个极端。你可能想把所有工作外包出去。但外包设计师可能并不像你一样了解你的商业及你的客户。你知道并理解所有的需求,但外包设计师了解你所需要的最终视觉产品吗?
如何避免它?
可以使用BalsamiqMockingbird工具创建一些线框图。这样可以让你专注于思考访问者的体验,可以帮助你组织、构造你的内容。


这也为你的Web设计者提供了可参照的框架,便于他们理解你心里所想的。它可以加速网站的构建过程。
基于定制平台构建网站
除非是构建Web应用或SaaS企业网站,否则最好使用通用框架。

    如果你需要不断地更新企业的内容,可以使用CMS,如WordPress、Joomla、Drupal等。




    如果你想在线销售某物品,需要一个购物车平台,可能用bigcommerce.comshopify.com、Yahoo Store这样的平台。



使用已广泛采用的平台,最主要的原因是这样的平台具有好的可维护性。你不希望世界上仅有少数人可以更新和升级你的网站吧。
从一个平台迁移到另一个平台也是一件痛苦的事,所以请明智选择你的平台。
如果你的网站交由代理商来建设,一定请他们采用知名度高的平台,不要使用代理商的“专利”平台。
结论
你之前可能已经了解该文提到的内容。但你是否利用已有知识来避免这些问题呢?你是否因为没有采取任何避免它们的措施,而一次次地掉进同一陷阱中?向后退一步,仔细回顾问题所在,制定一个策略来避免它们,从而实现你的计划。

QQ: 378890364 微信:wwtree(省短信费) 紧急事宜发短信到0061432027638  本站微博:http://t.qq.com/wwtree QQ群:122538123
描述
快速回复

您目前还是游客,请 登录注册
如果您在写长篇帖子又不马上发表,建议存为草稿