让Extjs加加速

Extjs虽然有着华丽的界面,但是真正使用过的人才知道,它运行起来的速度是让人抓狂的,而导致速度慢的重要原因,就是js的加载。EXT的全部js是比较大的,一个ext-all-debug.js就达2m多,它的压缩版(去掉js中的换行及空格),也达600多k,这对于在网速不太快的时,下载js就得漫长的等待。其中日历任务控件,js多达四五个,每个js大小都达70多k,尽管我们采用了后加载的方式,则当用户点击我的任务功能时,才下载该js,但这样仍然很慢,因为下载的js很慢,鉴于此,在互联网上使用类似Joffice类似的程序,速度会使很多开发商不敢选用ext作为开发技术。

我们可以从以下几种方法来提高应用程序的运行速度:
一.前期尽量少加载js.
这点在Joffice中有比较好的运用,采用的是由ScriptMgr.load方法来完成,加载完成后,其会在body中插入一个div,只要当前页面不被刷新,下次再访问该功能时,不需要再加载js

function $ImportJs(viewName,callback) {   
var b = document.getElementById(viewName+'-hiden');   
if (b != null) {   
     var view = eval('new ' + viewName + '()');  
     callback.call(this, view);   
} else {   
     var jsArr = eval('App.importJs.' + viewName);  
    if(jsArr==undefined){   
         var view = eval('new ' + viewName +'()');   
         callback.call(this, view);   
        return ;   
     }   
     ScriptMgr.load({   
                scripts : jsArr,   
                callback : function() {   
                      
                    Ext.DomHelper.append(document.body,"<divid='"  
                                           + viewName   
                                           + "-hiden'style='display:none'></div>");   
                    var view = eval('new ' + viewName + '()');   
                    callback.call(this, view);   
                }   
     });   
}   

二.用Gzip进行js的超强压缩
Gzip的官方网址为:
http://www.gnu.org/software/gzip/

Gzip的使用很简单
解压至某个目录,会看到有一个Gzip.exe文件,然后在命令窗口进入该目录,执行
gzip ext-all.js
ext-all.js马上变成为ext-all.js.gz
大小从原来600多k摇身一变成了160多k,简直压细小很多。这回下载速度就非常快了。

那么浏览器能否解析这种压缩文件?答案是肯定的,前提是告诉浏览器,这种文件需要解压,然后再执行,解压的过程由浏览器来执行。

那么应用程序如何告诉浏览器,该文件需要解压呢,这得由服务器通过Http的Header指令来进行。

在JOffice中,就是通过Filter来进行的。
1.把ext.all.js.gz文件名改为ext.all.gzjs,Filter等一下就会拦截这种文件的访问。
2.写一个Filter,完成向Header添加指令

package com.htsoft.core.web.filter;   
    import java.io.IOException;   
    import java.util.HashMap;   
    import java.util.Iterator;   
    import java.util.Map;   
    import javax.servlet.Filter;   
    import javax.servlet.FilterChain;   
    import javax.servlet.FilterConfig;   
    import javax.servlet.ServletException;   
    import javax.servlet.ServletRequest;   
    import javax.servlet.ServletResponse;   
    import javax.servlet.http.HttpServletRequest;   
    import javax.servlet.http.HttpServletResponse;   
      
    public class GzipJsFilter implements Filter {   
         Map headers = new HashMap();  
        public void destroy() {   
         }   
        public void doFilter(ServletRequest req,ServletResponse res,   
                FilterChain chain) throws IOException, ServletException{   
            if(req instanceofHttpServletRequest) {   
                doFilter((HttpServletRequest)req, (HttpServletResponse)res,chain);   
             }else {   
                chain.doFilter(req, res);   
             }   
         }   
        public void doFilter(HttpServletRequestrequest,   
                 HttpServletResponseresponse, FilterChain chain)   
                throwsIOException, ServletException {   
                request.setCharacterEncoding("UTF-8");   
                for(Iteratorit = 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.split("=");   
               this.headers.put(temp[0].trim(), temp[1].trim());   
             }   
         }   
     }  
   
3.在WEB.xml 文件中,添加以下配置:
Java代码
<filter>     
     <filter-name>GzipJsFilter</filter-name>    
    <filter-class>com.htsoft.core.web.filter.GzipJsFilter</filter-class>    
     <init-param>     
        <param-name>headers</param-name>     
        <param-value>Content-Encoding=gzip</param-value>    
     </init-param>   
</filter>   
<filter-mapping>   
<filter-name>GzipJsFilter</filter-name>   
<url-pattern>*.gzjs</url-pattern>   
lt;/filter-mapping>   
<servlet-mapping>  

4.在index.jsp中引入该压缩文件:
<script type="text/javascript"src="<%=request.getContextPath()%>/ext3/ext-all.gzjs"></script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值