paulwong

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

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库了。
我在项目中是这么用的:

<script type= "text/javascript"  src= "/depporject/comjs/jsvm2/jsre.js"  classpath= "dom2.gzjs;ext2p.gzjs"  modules= "smartloader"  ></script>

为什么扩展名是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按需装载。

posted on 2011-04-21 23:17 paulwong 阅读(1067) 评论(0)  编辑  收藏 所属分类: EXTJS


只有注册用户登录后才能发表评论。


网站导航: