为Extjs加加速(javascript加速)


Posted in Javascript onAugust 19, 2010

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

为Extjs加加速(javascript加速)

可以看到浏览器解压后,其代码是一样的:

为Extjs加加速(javascript加速)

大家可以看到以上,这块是在外网使用的,其速度是比较快的。当然,浏览器解压这个文件需要一点时间,不过在本地解压是非常快的,可以不用管。

虽说不能完全解决其速度问题,但是还是能有所帮助。

Javascript 相关文章推荐
setTimeout和setInterval的区别你真的了解吗?
Mar 31 Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
js change,propertychange,input事件小议
Dec 20 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
underscore之function_动力节点Java学院整理
Jul 11 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
原创javascript小游戏实现代码
Aug 19 #Javascript
jQuery与ExtJS之选择实例分析
Aug 19 #Javascript
JQuery跨Iframe选择实现代码
Aug 19 #Javascript
JQuery中each()的使用方法说明
Aug 19 #Javascript
jquery获取input的value问题说明
Aug 19 #Javascript
JavaScript开发规范要求(规范化代码)
Aug 16 #Javascript
JavaScript学习历程和心得小结
Aug 16 #Javascript
You might like
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
Django自带的用户验证系统实现
2020/12/18 Python
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
毕业自我鉴定
2013/11/05 职场文书
高中家长寄语
2014/04/02 职场文书
小学一年级评语大全
2014/04/22 职场文书
超市活动计划书
2014/04/24 职场文书
红色故事演讲稿
2014/05/22 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
2014年安全员工作总结
2014/11/13 职场文书
孔庙导游词
2015/02/04 职场文书
珍爱生命主题班会
2015/08/13 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
小学数学教学反思范文
2016/02/16 职场文书
详解Redis复制原理
2021/06/04 Redis