为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创建表格(自动增加表格)代码分享
Dec 25 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
vue组件中的数据传递方法
May 14 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
Element Alert警告的具体使用方法
Jul 27 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 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自动反斜杠的函数代码
2010/01/05 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
php解决DOM乱码的方法示例代码
2016/11/20 PHP
javascript网页关键字高亮代码
2008/07/30 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
基于vue实现分页效果
2017/11/06 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python文件操作类操作实例详解
2014/07/11 Python
python实现绘制树枝简单示例
2014/07/24 Python
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
在Python中使用SQLite的简单教程
2015/04/29 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
PyQt5实现画布小程序
2020/05/30 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
会计系毕业个人自荐信格式
2013/09/23 职场文书
《燕子》教学反思
2014/02/18 职场文书
三问三解心得体会
2014/09/05 职场文书
优秀班集体申报材料
2014/12/25 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
python脚本框架webpy模板控制结构
2021/11/20 Python
MySQL 数据表操作
2022/05/04 MySQL