为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 相关文章推荐
javascript StringBuilder类实现
Dec 22 Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
ajax请求get与post的区别总结
Nov 04 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
详解javascript中原始数据类型Null和Undefined
Dec 17 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
Vue中component标签解决项目组件化操作
Sep 04 Javascript
JS+CSS实现炫酷光感效果
Sep 05 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
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
javascript下数值型比较难点说明
2010/06/07 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
python 网络爬虫初级实现代码
2016/02/27 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
详解Python之unittest单元测试代码
2018/01/24 Python
分享vim python缩进等一些配置
2018/07/02 Python
浅谈Python爬虫基本套路
2019/03/25 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
python3实现高效的端口扫描
2019/08/31 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
工作自我评价怎么写
2014/01/29 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
法制宣传口号
2014/06/16 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
导游词之凤凰古城
2019/10/22 职场文书