为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 实现的点击复制代码
Mar 24 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
js获得网页背景色和字体色的方法
Mar 21 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
jquery实现一个简单好用的弹出框
Sep 26 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
Vue 中mixin 的用法详解
Apr 23 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
JS继承定义与使用方法简单示例
Feb 19 Javascript
JS跨浏览器解析XML应用过程详解
Oct 16 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版)
2012/08/21 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
浅析python函数式编程
2020/09/26 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
初中生三年学习生活的自我评价
2013/11/03 职场文书
爱情保证书范文
2014/02/01 职场文书
优秀教师演讲稿
2014/05/06 职场文书
应届毕业生求职信
2014/05/26 职场文书
解除劳动关系协议书2篇
2014/11/28 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
计划生育工作总结2015
2015/04/03 职场文书
早安问候语大全
2015/11/10 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers
MySQL创建管理HASH分区
2022/04/13 MySQL