Ext JS雖然有著華麗的界面，但是真正使用過的人才知道，它運(yùn)行起來的速度是讓人抓狂的，而導(dǎo)致速度慢的重要原因，就是JavaScript的加載。Ext JS的全部JavaScript是比較大的，一個(gè)ext-all-debug.js就達(dá)2m多，它的壓縮版也達(dá)600多k，這對(duì)于在網(wǎng)速不太快的時(shí)，下載JavaScript就得漫長的等待。

51CTO推薦閱讀：應(yīng)用最廣的十大Javascript框架

其中日歷任務(wù)控件，JavaScript多達(dá)四五個(gè)，每個(gè)JavaScript大小都達(dá)70多k，盡管我們采用了后加載的方式，則當(dāng)用戶點(diǎn)擊我的任務(wù)功能時(shí)，才下載該JavaScript，但這樣仍然很慢，因?yàn)橄螺d的JavaScript很慢，鑒于此，在互聯(lián)網(wǎng)上使用類似Joffice類似的程序，速度會(huì)使很多開發(fā)商不敢選用Ext JS作為開發(fā)技術(shù)。我們可以從以下幾種方法來提高應(yīng)用程序的運(yùn)行速度：

一.前期盡量少加載JavaScript

這點(diǎn)在Joffice中有比較好的運(yùn)用，采用的是由ScriptMgr.load方法來完成，加載完成后，其會(huì)在body中插入一個(gè)DIV，只要當(dāng)前頁面不被刷新，下次再訪問該功能時(shí)，不需要再加載JavaScript。實(shí)例代碼：

view sourceprint?01 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);       
 
                  }       
 
      });       
 
 }  

#p#

二.用Gzip進(jìn)行JavaScript的超強(qiáng)壓縮

Gzip的官方網(wǎng)址

http://www.gnu.org/software/gzip/

Gzip的使用很簡單

解壓至某個(gè)目錄，會(huì)看到有一個(gè)Gzip.exe文件，然后在命令窗口進(jìn)入該目錄，執(zhí)行：

gzip ext-all.js

ext-all.js馬上變成為ext-all.js.gz。大小從原來600多k搖身一變成了160多k，簡直壓細(xì)小很多。這回下載速度就非?？炝?。那么瀏覽器能否解析這種壓縮文件？答案是肯定的，前提是告訴瀏覽器，這種文件需要解壓，然后再執(zhí)行，解壓的過程由瀏覽器來執(zhí)行。那么應(yīng)用程序如何告訴瀏覽器，該文件需要解壓呢，這得由服務(wù)器通過Http的Header指令來進(jìn)行。在JOffice中，就是通過Filter來進(jìn)行的。

1.把ext.all.js.gz文件名改為ext.all.gzjs，F(xiàn)ilter等一下就會(huì)攔截這種文件的訪問。

2.寫一個(gè)Filter,完成向Header添加指令。

view sourceprint?01 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 = 0; i < headers.length; i++) {       
 
                 String[] temp = headers[i].split("=");       
 
                 this.headers.put(temp[0].trim(), temp[1].trim());       
 
              }       
 
          }       
     }   
 
      
3.在WEB.xml 文件中，添加以下配置：  
 
view sourceprint?01 <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> 
 

可以看到瀏覽器解壓后，其代碼是一樣的：

大家可以看到以上，這塊是在外網(wǎng)使用的，其速度是比較快的。當(dāng)然，瀏覽器解壓這個(gè)文件需要一點(diǎn)時(shí)間，不過在本地解壓是非?？斓模梢圆挥霉?。雖說不能完全解決其速度問題，但是還是能有所幫助。

原文地址：http://www.cnblogs.com/single1970/archive/2010/08/19/Extjs.html

【編輯推薦】

1. 移花接木 實(shí)例講解Ext JS控件的擴(kuò)展
2. Ext JS + jQTouch + Raphael = Sencha
3. 應(yīng)用最廣的十大Javascript框架
4. JavaScript框架的選擇標(biāo)準(zhǔn)