Extjs虽然有着华丽的界面,但是真正使用过的人才知道,它运行起来的速度是让人抓狂的,而导致速度慢的重要原因,就是js的加载。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来进行的。
1.把ext.all.js.gz文件名改为ext.all.gzjs,Filter等一下就会拦截这种文件的访问。
2.写一个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.split("=");
this.headers.put(temp[0].trim(), temp[1].trim());
}
}
}
3.在WEB.xml 文件中,添加以下配置:
Java代码
<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>
可以看到浏览器解压后,其代码是一样的:
大家可以看到以上,这块是在外网使用的,其速度是比较快的。当然,浏览器解压这个文件需要一点时间,不过在本地解压是非常快的,可以不用管。
虽说不能完全解决其速度问题,但是还是能有所帮助。
分享到:
相关推荐
extjs 4.1 预览版,测试可用,速度提升,修改很多bug!!!!
Extjs 本身是一个加载慢的JS框架,这个需要程序员的多去优化,之前说过了JS的打包的优化 这次来写写怎么减少冗余代码,也是提高运行速度,包含了1、删除代码通用2、提交表单通用3、初始化Gird通用化 本次只写 删除...
特别是新增了如何优化基于EXT的应用,提升加载速度,如何创建用户扩展组件以及常用的第三方扩展件等内容。大家可以看到如何在EXT中使用漂亮的图表,尽情欣赏EXT在性能方面实现的巨大突破,以及各种各样的绚丽组件。
每个知识点都配有相应的示例,可操作性极强,同时补充了两个功能强大的实例,并加入了如何优化基于EXT的应用,提升加载速度,如何创建用户扩展组件以及常用的第三方扩展件等内容。 本书适合所有Web开发人员阅读。
特别是新增了如何优化基于EXT的应用,提升加载速度,如何创建用户扩展组件以及常用的第三方扩展件等内容。大家可以看到如何在EXT中使用漂亮的图表,尽情欣赏EXT在性能方面实现的巨大突破,以及各种各样的绚丽组件。 ...
为了构建更加动态,响应更加灵敏的Web应用程序,作者对基于AJAX技术的ExtJS框架进行了深入研究,提出了一种新的基于ExtJS+SSH的Web应用架构,极大地提升了Web应用程序的响应速度和用户体验,使服务器更加方便、快捷地和...
特别是新增了如何优化基于EXT的应用,提升加载速度,如何创建用户扩展组件以及常用的第三方扩展件等内容。大家可以看到如何在EXT中使用漂亮的图表,尽情欣赏EXT在性能方面实现的巨大突破,以及各种各样的绚丽组件。 ...
特别是新增了如何优化基于EXT的应用,提升加载速度,如何创建用户扩展组件以及常用的第三方扩展件等内容。大家可以看到如何在EXT中使用漂亮的图表,尽情欣赏EXT在性能方面实现的巨大突破,以及各种各样的绚丽组件。 ...
特别是新增了如何优化基于EXT的应用,提升加载速度,如何创建用户扩展组件以及常用的第三方扩展件等内容。大家可以看到如何在EXT中使用漂亮的图表,尽情欣赏EXT在性能方面实现的巨大突破,以及各种各样的绚丽组件。 ...
特别是新增了如何优化基于EXT的应用,提升加载速度,如何创建用户扩展组件以及常用的第三方扩展件等内容。大家可以看到如何在EXT中使用漂亮的图表,尽情欣赏EXT在性能方面实现的巨大突破,以及各种各样的绚丽组件。 ...
这个ajax类最合适不过了,ajax功能全,简单好用堪比jquery,最重要的是,它无比轻量级,与jquery、extjs等框架的ajax相比,它小多了,可大大减轻网络传输压力,有效提升web访问速度。这个js类里有详细API和实例,...
ExtAspNet - ExtJS based ASP.NET Controls with Full AJAX Support ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有ViewState,没有JavaScript,没有CSS,没有...
-修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的...
我们就可以既充分利用Java语言的开发优势降低Ajax应用开发的难度,加快Ajax应用的开发速度,为Ajax的大规模应用创造可能,又可以充分发挥Ajax技术的优势,创建更加动态和交互性更好的Web应用程序,提升用户的浏览...