提高程序运行速度 让Ext JS华而又实
来源:互联网 发布:网络推广与seo 编辑:程序博客网 时间:2024/05/22 01:52
Ext JS虽然有着华丽的界面,但是真正使用过的人才知道,它运行起来的速度是让人抓狂的,而导致速度慢的重要原因,就是JavaScript的加载,这里我们介绍几种方法,来提高Ext JS的运行速度,尽管不能完全解决,但对于程序还是很有帮助的。
AD: 2013云计算架构师峰会课程资料下载
Ext JS虽然有着华丽的界面,但是真正使用过的人才知道,它运行起来的速度是让人抓狂的,而导致速度慢的重要原因,就是JavaScript的加载。Ext JS的全部JavaScript是比较大的,一个ext-all-debug.js就达2m多,它的压缩版也达600多k,这对于在网速不太快的时,下载JavaScript就得漫长的等待。
51CTO推荐阅读:应用最广的十大Javascript框架
其中日历任务控件,JavaScript多达四五个,每个JavaScript大小都达70多k,尽管我们采用了后加载的方式,则当用户点击我的任务功能时,才下载该JavaScript,但这样仍然很慢,因为下载的JavaScript很慢,鉴于此,在互联网上使用类似Joffice类似的程序,速度会使很多开发商不敢选用Ext JS作为开发技术。我们可以从以下几种方法来提高应用程序的运行速度:
一.前期尽量少加载JavaScript
这点在Joffice中有比较好的运用,采用的是由ScriptMgr.load方法来完成,加载完成后,其会在body中插入一个DIV,只要当前页面不被刷新,下次再访问该功能时,不需要再加载JavaScript。实例代码:
- view sourceprint?01 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进行JavaScript的超强压缩
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添加指令。
- view sourceprint?01 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 文件中,添加以下配置:
- view sourceprint?01 <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>
可以看到浏览器解压后,其代码是一样的:
大家可以看到以上,这块是在外网使用的,其速度是比较快的。当然,浏览器解压这个文件需要一点时间,不过在本地解压是非常快的,可以不用管。虽说不能完全解决其速度问题,但是还是能有所帮助。
- 提高程序运行速度 让Ext JS华而又实
- 提高程序运行速度 让Ext JS华而又实
- 让程序的运行速度提高100倍
- 【转】提高matlab程序的运行速度
- 提高程序运行速度的方法
- C++程序提高运行速度的方法
- 提高eclipse运行速度
- 提高eclipse运行速度
- 提高eclipse运行速度
- 提高Magento运行速度
- 提高eclipse运行速度
- matlab提高运行速度
- 提高matlab运行速度
- 提高studio运行速度
- 系统资源,js、图片缓存,提高系统运行速度
- 提高PLC程序运行速度的编程方法
- 让ASP提高执行速度
- 提高VS2010的运行速度
- 《jQuery技术内幕:深入解析jQuery架构设计与实现原理》
- Oracle数字函数
- Android AsyncTask
- C#中调整代码格式
- 设计模式
- 提高程序运行速度 让Ext JS华而又实
- ssh连接时认证时间过长解决方法
- Linux总结之工作管理和进程管理
- HTML小技巧的一些小技巧
- Activity has leaked window that was originally added解决办法
- Early Retransmit for TCP原理以及实现
- 射频MEMS移相器
- android audio Strategy
- ListView