快捷導(dǎo)航

為Extjs加加速(javascript加速)

更新時(shí)間：2010年08月19日 15:10:01 作者：

Extjs雖然有著華麗的界面，但是真正使用過的人才知道，它運(yùn)行起來的速度是讓人抓狂的，而導(dǎo)致速度慢的重要原因，就是js的加載。

EXT的全部js是比較大的，一個(gè)ext-all-debug.js就達(dá)2m多，它的壓縮版（去掉js中的換行及空格），也達(dá)600多k,這對于在網(wǎng)速不太快的時(shí)，下載js就得漫長的等待。其中日歷任務(wù)控件，js多達(dá)四五個(gè)，每個(gè)js大小都達(dá)70多k,盡管我們采用了后加載的方式，則當(dāng)用戶點(diǎn)擊我的任務(wù)功能時(shí)，才下載該js，但這樣仍然很慢，因?yàn)橄螺d的js很慢
，鑒于此，在互聯(lián)網(wǎng)上使用類似Joffice類似的程序，速度會使很多開發(fā)商不敢選用ext作為開發(fā)技術(shù)。

我們可以從以下幾種方法來提高應(yīng)用程序的運(yùn)行速度：
一.前期盡量少加載js.
這點(diǎn)在Joffice中有比較好的運(yùn)用，采用的是由ScriptMgr.load方法來完成，加載完成后，其會在body中插入一個(gè)div,只要當(dāng)前頁面不被刷新，下次再訪問該功能時(shí)，不需要再加載js

復(fù)制代碼代碼如下:

 
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進(jìn)行js的超強(qiáng)壓縮
Gzip的官方網(wǎng)址為：
http://www.gnu.org/software/gzip/
Gzip的使用很簡單
解壓至某個(gè)目錄，會看到有一個(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)行的。
１.把ext.all.js.gz文件名改為ext.all.gzjs，F(xiàn)ilter等一下就會攔截這種文件的訪問。
２.寫一個(gè)Filter,完成向Header添加指令
代碼如下：

復(fù)制代碼代碼如下:

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

復(fù)制代碼代碼如下:

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