我们知道,EXT的全部js是比较大的,一个ext-all-debug.js就达2m多,它的压缩版(去掉js中的换行及空格),也达600多k,这对于在网速不太快的时,下载js就得漫长的等待。
JOffice中的日历任务控件,js多达四五个,每个js大小都达70多k,尽管我们采用了后加载的方式,则当用户点击我的任务功能时,才下载该js,但这样仍然很慢,因为下载的js很慢
,鉴于此,在互联网上使用类似Joffice类似的程序,速度会使很多开发商不敢选用ext作为开发技术。据本人当时参与移动一个内部采购平台的开发,就是因为其运行程序慢,遭到移动的终端用户的弃骂,
所以,要想用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[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>
</filter-mapping>
<servlet-mapping>
4.在index.jsp中引入该压缩文件:
<script type="text/javascript" src="<%=request.getContextPath()%>/ext3/ext-all.gzjs"></script>
可以看到浏览器解压后,其代码是一样的:
大家可以看到以上,这块是在外网使用的,其速度是比较快的。当然,浏览器解压这个文件需要一点时间,不过在本地解压是非常快的,可以不用管。
三、通过Js缓存,更加可以提高EXT的加载速度,关于缓存,本文不作讨论。
- 大小: 55 KB
- 大小: 56.3 KB
分享到:
- 2009-11-12 10:03
- 浏览 4127
- 评论(0)
- 论坛回复 / 浏览 (0 / 6737)
- 查看更多
相关推荐
这样做的好处是,可以降低初始页面的体积,提高页面的加载速度,同时也有利于模块化的代码组织。在 Ext4 中,`Ext.Loader` 提供了这样的功能,使得开发者可以灵活地控制哪些类或文件应该在何时被加载。 下面我们将...
本文将对EXT JS的动态加载机制进行详细探讨,并对其实施方法及效果进行分析。 EXT JS是一种基于JavaScript的前端框架,它提供了丰富的界面组件和类库,以帮助开发者构建具有统一外观和感觉的Web应用。与传统的Web...
6. **动态加载**:节点可以配置为延迟加载,只有当用户展开时才请求子节点数据,以提高初始加载速度。 7. **拖放功能**:EXT JS的树形组件支持节点间的拖放操作,方便用户重新组织结构。 8. **树型表格**:TreeGrid...
在IT行业中,"ext扩展 延时加载"是一个关于前端开发的重要概念,特别是对于使用Ext JS框架的应用程序。Ext JS是一个强大的JavaScript库,用于构建数据驱动的富客户端应用程序。延时加载(Lazy Loading)是一种优化...
5. **文件小巧**:这可能意味着开发者通过优化代码和利用Ext JS 的模块化结构,减少了不必要的文件大小,提高了应用的加载速度和性能。Ext JS 允许按需加载组件,避免了加载未使用的代码。 6. **交互与功能**:虚拟...
1. **预编译的JavaScript文件**:这些是Ext JS库的已压缩和优化版本,用于提高页面加载速度。 2. **Java接口或适配器**:这些接口允许Java代码与JavaScript库进行交互,通常是通过Java的ScriptEngine API或者第三方...
这些代码体积较小,加载速度更快,适合生产环境使用。 - **docs**: 提供了 Ext JS 的官方文档,特别是 Ext JS 的 API 文档,对于开发人员来说极为重要。 - **examples**: 包含了官方提供的示例程序,可以帮助...
`protoculous-packer.js`可能是一个打包工具,用于压缩和优化JavaScript代码,提高加载速度和性能。而`Ext.ux.Notification.js`则是实际的Notification插件源代码,它扩展了Ext JS框架,添加了显示通知的功能。 在...
9. **优化和性能提升**: 当你的应用程序变得复杂时,可以考虑使用Sencha CMD工具进行构建,它可以帮助你压缩和合并JavaScript和CSS文件,提高应用加载速度。 10. **持续学习和更新**: Ext JS社区活跃,有许多资源和...
JavaScript文件可能通过异步方式加载,以提高页面加载速度。 在这个学生信息管理系统中,可能有以下关键功能: 1. 学生列表:展示所有学生的信息,支持搜索和排序。 2. 新增学生:允许用户添加新的学生记录。 3. ...
书中会提供一些建议和技巧,帮助开发者减少页面加载时间、优化内存管理和提高响应速度。 总之,《Ext JS 6 by Example》中文版是一本全面的教程,覆盖了Ext JS 6的各个方面,无论你是初学者还是有经验的开发者,都...
Ext JS 是一个强大的JavaScript框架,主要用于构建富客户端Web应用程序。其强大的功能之一是支持自定义皮肤,这使得开发者可以根据需求创建具有独特外观和感觉的应用。皮肤是改变Ext JS组件视觉样式的一种方式,允许...
在一些情况下,如果项目对加载速度有较高要求,可以先加载`ext-base.js`,然后再按需加载其他组件,以实现按需加载(延迟加载)来减少页面的初始加载时间。 甘特图是一种图形表示项目计划的方法,通常用水平条形图...
EXT 3.2.0是EXT JS框架的一个版本,它是一个强大的JavaScript库,主要用于构建富互联网应用程序(RIA)。EXT JS提供了丰富的用户界面组件和强大的数据管理功能,使得开发者能够创建功能丰富的、交互性强的Web应用,...
特别是新增了如何优化基于EXT的应用,提升加载速度,如何创建用户扩展组件以及常用的第三方扩展件等内容。大家可以看到如何在EXT中使用漂亮的图表,尽情欣赏EXT在性能方面实现的巨大突破,以及各种各样的绚丽组件。
JavaScript压缩的主要目的是减少代码的体积,提高页面的加载速度。通过删除不必要的空格、注释和换行,以及进行变量名混淆,压缩工具能够显著减小JS文件的大小,从而加快网络传输速度。对于大型的Ext JS项目,这种...
在大型应用中,这种特性尤为重要,因为它可以提高页面的加载速度,只在用户需要时才加载相关的树节点数据,而不是一次性加载所有数据。这种异步加载通常通过Ajax请求实现,能显著减少初始页面的加载时间,并且优化...
EXT-JS的构建过程是为了生成更小容量的`ext.js`文件,以提高网页加载速度和性能。在EXT-JS的早期版本中,它依赖于其他JavaScript库如Prototype或YUI来解决跨浏览器兼容性问题,但从1.1版开始,EXT-JS实现了自包含,...
6. **Ajax通信**:EXT JS 内置了Ajax通信机制,可以轻松实现后台数据的异步加载和提交,增强了Web应用的响应速度。 7. **图表组件**:EXT JS 包含多种图表类型,如柱状图、饼图、线图等,便于数据可视化。 8. **...
然而,这种方式可能导致页面加载速度变慢,特别是当代码量大或者有多个外部依赖时。动态加载则允许我们在需要的时候才去请求并执行特定的JS文件,例如在用户交互、页面滚动到某个位置或者某些条件满足时。 在Ext JS...