为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 相关文章推荐
jQuery Study Notes学习笔记 (二)
Aug 04 Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
Bootstrap学习笔记之css样式设计(1)
Jun 07 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
vue设置一开始进入的页面教程
Oct 28 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
原创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
ExtJS 入门
2010/10/29 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
jQuery实现轮播图效果
2019/11/26 jQuery
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
python使用PyGame模块播放声音的方法
2015/05/20 Python
python中字符串前面加r的作用
2015/06/04 Python
Python中的sort()方法使用基础教程
2017/01/08 Python
python读取文件名称生成list的方法
2018/04/27 Python
python查看模块,对象的函数方法
2018/10/16 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
税务会计岗位职责
2014/02/18 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书