为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 核心函数以及jQuery对象
Mar 23 Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
AngularJs中route的使用方法和配置
Feb 04 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 Javascript
React 子组件向父组件传值的方法
Jul 24 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
php简单静态页生成过程
2008/03/27 PHP
PHP 进程锁定问题分析研究
2009/11/24 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
js实现网页图片延时加载 提升网页打开速度
2016/01/26 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
python操作列表的函数使用代码详解
2017/12/28 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
银行实习生自我鉴定范文
2013/09/19 职场文书
优秀毕业大学生推荐信
2013/11/13 职场文书
开学典礼主持词
2014/03/19 职场文书
优秀党员个人总结
2015/02/14 职场文书
Python操作CSV格式文件的方法大全
2021/07/15 Python
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
Nginx速查手册及常见问题
2022/04/07 Servers
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL