為Extjs加加速(javascript加速)_extjs

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,"<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 = 0; i < headers.length; i++) {
String[] temp = headers[i].split("=");
this.headers.put(temp[0].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>

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

大家可以看到以上，這塊是在外網使用的，其速度是比較快的。當然，瀏覽器解壓這個檔案需要一點時間，不過在本地解壓是非常快的，可以不用管。

雖說不能完全解決其速度問題，但是還是能有所協助。