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.s
[1] [2] 下一页

[
开发实例]
ExtJs+WCF打造分行信息管理功能的一些心得 (myext整理,04-05)
博客园 老蒋之前在网上看了不少的ExtJs文章,对这个JavaScript类库也有少少的了解(初级入门级 J ),最近开始慢慢尝试在公司项目里进行实际的应用,现在有个项目里要加个功能,正好就来实战一下了,本篇文章我们主要介绍一些开发中需要注意的地方,基础教程请查看本论坛的其它帖子。另外考虑到高版本E……

[
开发实例]
[图文]ExtJS之上传文件示例【struts2方式】 (myext整理,07-10)
<SPAN style=FONT-SIZE: medium>var uploadForm= new Ext.FormPanel({  ……

[
开发实例]
用Extjs实现分页自动加载数据的Ajax实现 (未知,09-06)
需要用到的外部js文件为prototype.js,和extjs官方的ext-base.js,ext-all.js,ext-lang-zh_CN.js和resources整个文件夹。所有文件都放在同一个目录下。----------------------array-grid-page.html----……

[
开发实例]
请跟我来(完)--使用Ext及其llano的注意事项 (Alex,08-02)
公司事情越来越多!所以赶紧挤点时间一口气把我知道的要点写出来,和大家探讨交流。虽然在软件业混了10多年,但是总感觉自己知道的东西太少(Ext2.0确实十分优秀,我也才接触3个月,以前很不熟悉以js代码,目前只是看了一下我们的实际项目常用到的地方)。希望……

[
开发实例]
ExtJS 3.0 Chart 小用一下 (佚名,08-06)
实际上就是YUI CHART, 具体的文档可以看: http://developer.yahoo.com/yui/charts/ 而YUI CHART就是把Yahoo的Astra-Chart给封装了下而已:http://developer.yahoo.com/flash/astra-flash/ &……