为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 相关文章推荐
js控制表单操作的常用代码小结
Aug 15 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
axios 封装上传文件的请求方法
Sep 26 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
JavaScript设计模式之命令模式实例分析
Jan 16 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
express框架下使用session的方法
Jul 31 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
React生命周期原理与用法踩坑笔记
Apr 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
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
jQuery 使用手册(五)
2009/09/23 Javascript
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
银行实习鉴定
2013/12/13 职场文书
法人委托书范本
2014/09/15 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
电影雨中的树观后感
2015/06/15 职场文书
婚宴新娘致辞
2015/07/28 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书