注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

北漂的小羊

Java编程,开发者,程序员,软件开发,编程,代码。新浪微博号:IT国子监

 
 
 

日志

 
 
关于我

在这里是面向程序员的高品质IT技术学习社区,是程序员学习成长的地方。让我们更好地用技术改变世界。请关注新浪微博号: IT国子监(http://weibo.com/itguozijian)

网易考拉推荐

讨论Ext项目的性能优化  

2013-02-04 21:48:23|  分类: Ext Js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

在使用ExtJs过程中,性能一直是一个比较头疼的问题,从用户的角度来看,就一个字:慢。从技术的角度来说,这个“慢”字可以分为两种,加载“慢”和渲染“慢”。想分辨这两种情况很容易:如果居于网不慢而互联网上慢,说明是加载慢;如果Chrome不慢而IE慢,就是渲染慢。还有另一种情况:越用越慢,这个“慢”通常是内存泄露造成的。


针对以下这三种情况讨论一下解决方案:

1,加载慢

1.1 减少要加载的东西

不要动不动就ext-all.js,extjs是可以定制的,如果你用不到tree,就不要包含这个组件了。ExtJs的官网上有详细的定制方法和工具。

1.2 给出合适的用户提示

把Js后置,然后前面做一个加载的提示。如果像Gmail那样给出进度条,或者像很多网游那样来点图片或者Tips啥的就更好了,说不定用户还会觉得怎么加载这么快,我还没看清楚呢,呵呵。

1.3 用的时候再加载

动态加载,参考使用ExtJs开发MIS系统(2):Js的动态加载。

1.4 只加载一次

别用iframe了,如果你的静态内容过期做的不好,浏览器会经常再不厌其烦的从服务器下载同样的东西。

1.5 对你的Js添加过期标记

ext-base.js、ext-all.js都可以设置很长的过期时间,甚至永不过期(如果你不换extjs的版本)。这点对所有静态内容都很有用,如何设置过期标记请垂询Google。

2,渲染慢

2.1 少加载少解析、晚加载晚解析

1.1,1.3,1.4都对改善渲染慢的情况有效——加载的少了自然渲染的快了。

2.2 别用iframe

iframe不仅仅可能会使浏览器加载两遍,还一定会使浏览器解析两遍,放弃它吧,真的。

2.3 精心设计你的Js代码

例如缓存getElementByID()的结果、编译查询表达式之类的东西,这个纯看Js功力。

2.4 可能的话,让用户换个浏览器吧

Chrome比IE的Js渲染快是数量级上的差异!构造一个40列,50行的复杂GridPanel试试,你就会深有体会了……对于企业内部的MIS系统,换浏览器还是具有可能性的。

3,内存泄露
Ext性能调优方案

   1. 将JS进行合并压缩。

        使用yahoo的yui-compress.jar进行压缩JS,去掉过多的空格和注释,并合并,减少IO的支出。

     2. 将前后台传输的数据进行GZIP压缩。

        大数据量的数据传输,通过GZIP的压缩方案,可以减少到25%,有些数据可能会更多。

    3. 对大量的JS分析依赖关系,进行动态加载。

         这个是关键,通过分析所有的JS中的依赖关系,减少了JS加载的数量。从很大程度上提高了性能

    4. 另外对部分页面进行缓存,而非真正的关闭。

 还有一个外部的因素,由于系统使用的客户机环境上的复杂,我们在多个浏览器上进行了测试,只有IE是最慢的,尤其是IE6,后来发现不是IE6要比IE7慢,是因为发现MS发布了脚本引擎cscript 5.7, 而大部分的ie6系统都装的是5.6, 这个版本上的升级,不仅仅是修改了BUG,在JS的执行速度上也有了较大的提升,于是我们在环境因素上又加上了一条,要求客户安装cscript5.7,也大大的提升了页面的打开时间。


以下来自网络:


方法一:

压缩传输,比如tomcat6下面启用gzip,修改server.xml的配置: 
<Connector port="8081" protocol="HTTP/1.1" maxThreads="150"  
  compression="on" 
  noCompressionUserAgents="gozilla, traviata"  
  compressableMimeType="text/html,text/xml,text/javascript,text/css" 
  connectionTimeout="20000" redirectPort="8443" URIEncoding="GBK"/>

 

一篇介绍Gzip的文章:http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/  不错!

  

一篇介绍iframe直接使用父页面的js和css技术的文章:http://matthew.delmarters.com/weblog/injecting-javascript-and-css-into-iframes/#comment-64462 不是很明白!

 

当然还有其他的一些压缩工具:比如E3压缩。

 

方法二:

项目中Ext代码优化。

1. 不推荐使用iframe加载的方式,使用autoload。

2. 在完成了组件对象的使用以后必须回收,可以使用对应对象的destroy,beforeDestroy,removeAll等方法销毁对象以及一些孤立节点。

3. 不要把继承层次弄的太深。

  评论这张
 
阅读(406)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016