我們知道,EXT的全部js是比較大的,一個(gè)ext-all-debug.js就達(dá)2m多,它的壓縮版(去掉js中的換行及空格),也達(dá)600多k,這對(duì)于在網(wǎng)速不太快的時(shí),下載js就得漫長(zhǎng)的等待。
JOffice中的日歷任務(wù)控件,js多達(dá)四五個(gè),每個(gè)js大小都達(dá)70多k,盡管我們采用了后加載的方式,則當(dāng)用戶點(diǎn)擊我的任務(wù)功能時(shí),才下載該js,但這樣仍然很慢,因?yàn)橄螺d的js很慢
,鑒于此,在互聯(lián)網(wǎng)上使用類(lèi)似Joffice類(lèi)似的程序,速度會(huì)使很多開(kāi)發(fā)商不敢選用ext作為開(kāi)發(fā)技術(shù)。
我們可以從以下幾種方法來(lái)提高應(yīng)用程序的運(yùn)行速度:
一.前期盡量少加載js.
這點(diǎn)在Joffice中有比較好的運(yùn)用,采用的是由ScriptMgr.load方法來(lái)完成,加載完成后,其會(huì)在body中插入一個(gè)div,只要當(dāng)前頁(yè)面不被刷新,下次再訪問(wèn)該功能時(shí),不需要再加載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);
- }
- });
- }
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./software/gzip/
Gzip的使用很簡(jiǎn)單
解壓至某個(gè)目錄,會(huì)看到有一個(gè)Gzip.exe文件,然后在命令窗口進(jìn)入該目錄,執(zhí)行
gzip ext-all.js
ext-all.js馬上變成為ext-all.js.gz
大小從原來(lái)600多k搖身一變成了160多k,簡(jiǎn)直壓細(xì)小很多。這回下載速度就非??炝?。
那么瀏覽器能否解析這種壓縮文件?答案是肯定的,前提是告訴瀏覽器,這種文件需要解壓,然后再執(zhí)行,解壓的過(guò)程由瀏覽器來(lái)執(zhí)行。
那么應(yīng)用程序如何告訴瀏覽器,該文件需要解壓呢,這得由服務(wù)器通過(guò)Http的Header指令來(lái)進(jìn)行。
在JOffice中,就是通過(guò)Filter來(lái)進(jìn)行的。
1.把ext.all.js.gz文件名改為ext.all.gzjs,F(xiàn)ilter等一下就會(huì)攔截這種文件的訪問(wèn)。
2.寫(xiě)一個(gè)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());
- }
- }
- }
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>
<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>
</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í)間,不過(guò)在本地解壓是非??斓模梢圆挥霉?。
三、通過(guò)Js緩存,更加可以提高EXT的加載速度,關(guān)于緩存,本文不作討論。