`

为Extjs加加速(javascript加速)

阅读更多
      Extjs虽然有着华丽的界面,但是真正使用过的人才知道,它运行起来的速度是让人抓狂的,而导致速度慢的重要原因,就是js的加载。
      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-3.2.0.rar

    ExtJS是一个基于JavaScript的开源富客户端框架,专为构建企业级Web应用程序而设计。这个"ExtJs-3.2.0.rar"压缩包包含了ExtJS 3.2.0版本的所有资源,允许开发者利用其强大的组件库和丰富的功能来创建交互式、数据驱动...

    spring+extjs项目文件

    Spring以其强大的企业级应用支持和模块化设计,成为Java开发的主流选择,而ExtJS则是一款功能丰富的JavaScript前端框架,擅长构建富交互的用户界面。当这两者结合,能够构建出高效、用户体验优良的人力资源管理系统...

    Extjs3.0中文文档大全

    ExtJS 3.0 是一个历史悠久的JavaScript框架,主要用于构建富客户端Web应用程序。这个框架以其强大的组件模型、数据绑定机制和丰富的用户界面控件而闻名。"Extjs3.0中文文档大全"提供了全面的指南,帮助开发者深入...

    extjs_4.1.0 api 中文版_0.6 天涯浪子

    "天涯浪子"是这个翻译版本的作者或贡献者,他通过iteye网站分享了这一资源,为中国的EXTJS社区提供了宝贵的资料。 EXTJS 4.1.0的核心特性包括: 1. **组件模型**:EXTJS采用组件化的思想,几乎所有的界面元素都是...

    extjs可视化开发软件

    EXTJS是一种基于JavaScript的前端框架,专用于构建富互联网应用程序(RIA)。它提供了一套完整的组件库,可以创建复杂的用户界面,并且具有高度可定制性和灵活性。EXTJS的核心特性包括数据绑定、拖放功能、丰富的...

    Extjs2.x主题

    ExtJS是一个广泛使用的JavaScript库,专门用于构建富客户端应用程序。在2.x版本中,它提供了丰富的用户界面组件和强大的数据管理功能。主题是ExtJS应用的外观和感觉,定义了控件的颜色、字体、布局样式等。下面我们...

    ExtJs4.2 Tomcat可运行API

    ExtJs4.2是Sencha公司推出的一款强大的JavaScript框架,用于构建富客户端...开发者可以通过API文档深入学习ExtJs的各种组件和功能,结合Tomcat服务器实现Web应用的发布和运行,同时利用可运行的API示例加速学习过程。

    Extjs 文件,图片管理系统

    总之,ExtJS 文件图片管理系统是一个结合了前端交互设计和后端数据处理的综合性应用,它利用 ExtJS 的组件化特性、Hibernate 的 ORM 功能和 MySQL 的数据库服务,为用户提供了高效、可靠的文件和图片管理解决方案。...

    简单的Extjs例子

    ExtJS是一种基于JavaScript的前端框架,用于构建交互式的、数据驱动的Web应用程序。...同时,掌握使用Sencha CMD(命令行工具)自动化构建和压缩代码,以及利用官方文档和社区资源进行学习,都能加速你对ExtJS的掌握。

    ExtJs3.0中文帮助文档(chm格式)

    ExtJS 3.0 是一个历史悠久的JavaScript框架,主要用于构建富客户端Web应用程序。这个框架以其强大的组件库、灵活的布局管理、丰富的数据绑定机制以及优雅的API而闻名。"ExtJs3.0中文帮助文档(chm格式)"是针对开发者...

    Eclipse下ExtJS开发插件

    Eclipse下的ExtJS开发插件是专门为简化ExtJS开发而设计的。这款插件通常包含以下功能: 1. **代码自动完成**:提供ExtJS API的智能提示,帮助开发者快速输入正确的函数和方法名,减少错误和提高效率。 2. **语法...

    ExtJS6学习资料

    - **示例说明**:以 AJAX 调用为例,使用 ExtJS 无需担心浏览器兼容性问题,框架内部已经处理好了这些问题。对于复杂的控件如网格(grid),ExtJS 提供了一站式的解决方案,包括分页、排序、过滤等功能。 #### 二、...

    ExtJS3.1.0

    ExtJS 3.1.0 是一个基于JavaScript的开源框架,专为构建功能丰富的、交互性强的Web应用程序界面而设计。这个版本是ExtJS框架的一个重要里程碑,它提供了许多先进的功能和改进,使开发者能够更加高效地构建RIA(Rich ...

    HTML5中ExtJS和Web SQL Database的使用.pdf

    ExtJS是一个Ajax框架,是采用JavaScript编写的,用于在客户端创建丰富多彩的Web应用程序界面,还可以用于开发RIA也即富客户端的Ajax应用。ExtJS为开发者提供了丰富的UI组件,具有统一的主题,方便快速开发和提高效率...

    ExtJS下拉列表树控件1

    而“工具”标签可能意味着博主可能介绍了一些辅助开发的工具或库,这些工具可能加速了下拉列表树控件的构建。 从压缩包子文件的名称“Extjs中ComboBoxTree实现的下拉框树效果(自写)_extjs_脚本之家.htm”来看,这是...

    ExtJS_3.3中文帮助文档

    "ExtJS_3.3中文帮助文档"是针对这个版本的中文版官方文档,对于中国开发者来说,它是一个不可或缺的资源,能够极大地加速开发进程,提升开发效率。 在ExtJS 3.3中,开发者可以找到一系列精心设计的UI组件,如表格、...

    SSH+axis2+extjs4.0项目

    EXTJS4.0是一个JavaScript库,专用于构建富互联网应用程序(RIA)。它提供了丰富的组件和强大的数据绑定功能,使得前端界面设计和交互变得更加简单。EXTJS4.0引入了许多新特性,如可扩展的图表库、改进的布局系统和...

    基于PHP的基于Extjs的PHP企业级开发框架源码.zip

    ExtJS是一款强大的JavaScript库,专门用于构建富客户端的Web应用。它提供了丰富的组件库,包括表格、图表、窗体、菜单等,这些组件具有高度可定制性和交互性。ExtJS使用MVC(Model-View-Controller)架构模式,有助...

Global site tag (gtag.js) - Google Analytics