提高EXT js的加载速度的方法

最新推荐文章于 2014-11-24 16:52:41 发布

weixin_34224941

最新推荐文章于 2014-11-24 16:52:41 发布

阅读量258

点赞数

文章标签： java javascript web.xml ViewUI

原文链接：https://my.oschina.net/cmw/blog/29579

版权

为什么80%的码农都做不了架构师？>>>

我们知道，EXT的全部js是比较大的，一个ext-all-debug.js就达2m多，它的压缩版（去掉js中的换行及空格），也达600多k,这对于在网速不太快的时，下载js就得漫长的等待。
JOffice中的日历任务控件，js多达四五个，每个js大小都达70多k,尽管我们采用了后加载的方式，则当用户点击我的任务功能时，才下载该js，但这样仍然很慢，因为下载的js很慢
，鉴于此，在互联网上使用类似Joffice类似的程序，速度会使很多开发商不敢选用ext作为开发技术。据本人当时参与移动一个内部采购平台的开发，就是因为其运行程序慢，遭到移动的终端用户的弃骂，
所以，要想用EXT来开发应用，需要解决其运行慢的特点。

我们可以从以下几种方法来提高应用程序的运行速度：

一.前期尽量少加载js.

这点在Joffice中有比较好的运用，采用的是由ScriptMgr.load方法来完成，加载完成后，其会在body中插入一个div,只要当前页面不被刷新，下次再访问该功能时，不需要再加载js

     Java代码    
     
   
  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,"<div id='"  
                                            + 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来进行的。

１.把ext.all.js.gz文件名改为ext.all.gzjs，Filter等一下就会拦截这种文件的访问。

２.写一个Filter,完成向Header添加指令
代码如下：

     Java代码    
     
   
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 instanceof HttpServletRequest) {  
                doFilter((HttpServletRequest)req, (HttpServletResponse)res, chain);  
            }else {  
                chain.doFilter(req, res);  
            }  
        }  
        public void doFilter(HttpServletRequest request,  
                HttpServletResponse response, FilterChain chain)  
                throws IOException, ServletException {  
                request.setCharacterEncoding("UTF-8");  
                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 = ; i < headers.length; i++) {  
                String[] temp = headers[i].split("=");  
                this.headers.put(temp[].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>  