为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 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
validator验证控件使用代码
Nov 23 Javascript
javascript学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
js遍历td tr等html元素
Dec 13 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
Node.js pipe实现源码解析
Aug 12 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
webpack 模块热替换原理
Apr 09 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
原生js滑动轮播封装
Jul 31 Javascript
原创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
c#中的实现php中的preg_replace
2009/12/21 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
php curl模拟post提交数据示例
2013/12/31 PHP
PHP chop()函数讲解
2019/02/11 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
Javascript - HTML的request类
2007/01/09 Javascript
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
python opencv实现图像边缘检测
2019/04/29 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
美国手机支架公司:PopSockets
2019/11/27 全球购物
大学毕业通用个人的求职信
2013/12/08 职场文书
最受欢迎的自我评价
2013/12/22 职场文书
核心价值观演讲稿
2014/05/13 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
大学课外活动总结
2014/07/09 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
Pillow图像处理库安装及使用
2022/04/12 Python
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技