BlogJava-paulwong-随笔分类-EXTJS

ExtJs性能优化

paulwong — Thu, 21 Apr 2011 15:25:00 GMT

在使用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，也大大的提升了页面的打开时间。

paulwong 2011-04-21 23:25 发表评论

GZip压缩和按需装载提升Ext Js的性能

paulwong — Thu, 21 Apr 2011 15:17:00 GMT

ext-all.js这个文件都有500多k，在页面中直接引用这个js文件是很不现实的，曾经在一个大的项目中使用这个js，则直接导致页面半天出不来的后果。于是自己研究了下，目前通过下面的方法来优化提升Ext Js的性能。

使用JSVM
JSVM (JavaScript Virtual Machine的缩写)，一个JavaScript基础框架，sourceforge开源项目，由万常华（wch3116）于2003年底发起, 目前最新版本是2.05,采用的是 BSD License 授权协议。本身JSVM也提供了JSVM+Ext2的实例，看看就知道怎么在JSVM下加入ext的js库了。
我在项目中是这么用的：

为什么扩展名是gzjs呢，这是使用了gzip压缩js文件

使用Gzip压缩

gzip压缩后，ext js文件的大小将只有100k左右。
只是对gzip压缩的文件需要提供filter（Java开发），为你的应用提高解压缩功能,filter的写法很简单：

    public   void  doFilter(HttpServletRequest request,
            HttpServletResponse response, FilterChain chain)
             throws  IOException, ServletException {
             for (Iterator it = headers.entrySet().iterator();it.hasNext();) {
                Map.Entry entry = (Map.Entry)it.next();
                response.addHeader((String)entry.getKey(),(String)entry.getValue());
            }
            chain.doFilter(request, response);
    }

     public   void  init(FilterConfig config)  throws  ServletException {
        String headersStr = config.getInitParameter( "headers" );
        String[] headers = headersStr.split( "," );
         for ( int  i =  0 ; i < headers.length; i++) {
            String[] temp = headers[i].split( "=" );
             this .headers.put(temp[ 0 ].trim(), temp[ 1 ].trim());
        }
    }

}

web.xml配置

< filter >
         < filter-name > addHeaderFilter  filter-name >
         < filter-class >org .common.AddHeaderFilter  filter-class >
         < init-param >
             < param-name > headers  param-name >
             < param-value > Content-Encoding = gzip  param-value >
          init-param >
filter >

通过以上两步，整个页面装载速度很快了。大家可以试试。
另外在实际开发中，并不是将ext-all.js全部在jsvm中装载，只是将常用的ext js代码归到一起，由gzip压缩，然后又jsvm装载（即ext2p.js，p代表部分），剩下的ext js代码由jsvm按需装载。

paulwong 2011-04-21 23:17 发表评论

EXTJS入门

paulwong — Wed, 21 Jan 2009 08:32:00 GMT

摘要: EXTJS是一个兼容AJAX的前台WEB UI的框架，在普通的HTML文件的 BODY 元素中无须写任何HTML代码，就能产生相应的表格等元素。

阅读全文

paulwong 2009-01-21 16:32 发表评论