为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 HashTable
Jan 22 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
iframe子父页面调用js函数示例
Nov 07 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
Element Steps步骤条的使用方法
Jul 26 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
原创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
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
php事件驱动化设计详解
2016/11/10 PHP
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
jQuery的学习步骤
2011/02/23 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
python实现将文本转换成语音的方法
2015/05/28 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
Python自动创建Excel并获取内容
2020/09/16 Python
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
编程输出如下图形
2013/11/24 面试题
2014年清明节寄语
2014/04/03 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
2015年材料员工作总结
2015/04/30 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript