提升EXT js的加載速度的方法

咱們知道，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

  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添加指令
   代碼以下：

 

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 文件中，添加如下配置：

 <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>
  

能夠看到瀏覽器解壓後，其代碼是同樣的：

 

 

你們能夠看到以上，這塊是在外網使用的，其速度是比較快的。固然，瀏覽器解壓這個文件須要一點時間，不過在本地解壓是很是快的，能夠不用管。

 

 

3、經過Js緩存，更加能夠提升ＥＸＴ的加載速度，關於緩存，本文不做討論。