`
wolfandlili
  • 浏览: 77356 次
  • 性别: Icon_minigender_1
  • 来自: 河北
社区版块
存档分类
最新评论
阅读更多

     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.split("=");   
                this.headers.put(temp[0].trim(), temp[1].trim());   
             }   
         }   
     }  
   
3.在WEB.xml 文件中,添加以下配置:
Java代码
<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> 
</filter-mapping>   
<servlet-mapping> 
 
4.在index.jsp中引入该压缩文件:
<script type="text/javascript" src="<%=request.getContextPath()%>/ext3/ext-all.gzjs"></script> 


可以看到浏览器解压后,其代码是一样的:


大家可以看到以上,这块是在外网使用的,其速度是比较快的。当然,浏览器解压这个文件需要一点时间,不过在本地解压是非常快的,可以不用管。
虽说不能完全解决其速度问题,但是还是能有所帮助。



分享到:
评论

相关推荐

    ExtJS 7.6 SDK trial

    10. **社区支持和更新**:随着7.6的发布,ExtJS社区也会提供大量的教程、讨论和解决方案,帮助开发者解决问题并分享最佳实践。 要深入学习ExtJS 7.6,你需要通过SDK中的示例和文档开始,熟悉新特性和改进,然后在...

    包含各种类型的extjs小图标,Extjs4小图标

    综上所述,ExtJS 4小图标是框架中不可或缺的部分,它们提升了用户体验,同时也体现了ExtJS对细节的关注和对开发者友好性的考虑。使用这些图标时,开发者应注意图标的选择、格式、自定义以及无障碍性和性能优化等方面...

    extjs 3.3正式版

    EXTJS 3.3 正式版是EXTJS框架的一个稳定版本,提供了许多改进和新特性,旨在提升开发效率和用户体验。 EXTJS 3.3 版本的主要特性包括: 1. **组件库增强**:EXTJS 3.3 提供了大量预先封装的UI组件,如表格(Grid)...

    extjs6.2 SDK下载

    3. **性能优化**:EXTJS致力于提供高性能的应用,6.2版本可能在渲染速度、数据处理和内存管理等方面进行了优化,以提高应用的响应速度。 4. **CMD命令行工具**:Sencha CMD是EXTJS的命令行工具,用于自动化构建、...

    extjs2.1 开发包

    在开发过程中,开发者可以通过调整配置,将EXTJS库进行定制化裁剪,减少不必要的代码,提升应用加载速度。同时,这个目录也包含了压缩和优化过的JavaScript文件,以便在生产环境中使用。 适配器(adapter)是EXTJS...

    EXTjs4.2中文版

    在性能方面,EXTjs4.2进行了优化,减少了DOM操作,提升了渲染速度。同时,它提供了大量的主题和皮肤,允许开发者根据需求定制应用的外观。EXTjs4.2还支持触摸事件,使得开发响应式和移动设备友好的应用成为可能。 ...

    extjs 2000个 icon 图标素材

    在Web开发中,这种小尺寸的图标常用于保持页面加载速度和节省屏幕空间,同时不失清晰度。16x16像素的大小也符合许多设计规范,确保在不同设备和分辨率下都能显示得体。 在Web开发中,图标素材通常以SVG(Scalable ...

    extjs 4.0 extjs

    调试版本包含额外的错误检查和日志记录,便于开发过程中定位问题;生产版本则进行了优化,用于部署到生产环境,体积更小,运行更快。 `bootstrap.js` 文件是ExtJS的启动脚本,它负责加载框架的基础配置和必要的组件...

    extjs3源文件下载

    9. **性能优化**:通过延迟加载、脚本压缩和合并等方式,可以优化页面加载速度和运行效率。 10. **社区支持**:ExtJS拥有活跃的社区,开发者可以在这里找到示例、插件、教程和解答疑问。 通过下载和研究ExtJS 3的...

    Extjs 性能优化 High Performance ExtJs

    合理的布局和动画效果能够极大地提升用户体验,但不当的使用也可能导致性能问题。例如,过度复杂的布局结构或过于复杂的动画效果都会增加页面渲染的负担,从而影响整体性能。因此,在设计布局和动画时,应该尽可能地...

    Extjs6.2最新文档

    ExtJS 是一个强大的JavaScript框架,主要用于构建富客户端的Web应用程序。它提供了丰富的组件库、数据绑定、布局管理和可...通过研究这些文件,开发者可以深入了解ExtJS 6.2的内部结构和使用方法,进一步提升开发技能。

    extjs4.2 desktop mvc

    8. **性能优化**:EXTJS 4.2在性能方面有所提升,比如组件渲染速度更快,内存管理更加高效。 "platform"这个文件名可能是EXTJS 4.2 Desktop MVC中的一个核心模块,通常EXTJS会将不同功能划分为不同的模块或平台,...

    spring+extjs项目文件

    3. 数据绑定:ExtJS的数据绑定机制,可以实现视图与数据模型的实时同步,提升用户体验。 4. 动态加载:通过Ajax技术,实现页面内容的异步更新,提高页面响应速度。 三、Spring与ExtJS整合 1. RESTful API:Spring ...

    安装Extjs的插件spket,extjs3.2版.doc

    如果你遇到下载速度慢的问题,可以寻找已经下载好的Spket插件文件,如`spket-1.6.16.jar`,将其复制到Eclipse的安装目录中进行安装。 另一种安装方式是通过运行`spket-1.6.16.jar`文件(如果JDK版本高于1.6),或者...

    ExtJS icons(5000个extjs小图标).zip

    在这个"ExtJS icons(5000个extjs小图标).zip"文件中,包含了丰富的图标资源,对于使用ExtJS开发Web应用的开发者来说,这些图标是提升用户体验的重要元素。 首先,了解ExtJS的图标系统。在ExtJS中,图标通常用于...

    ExtJS 7.7 SDK trial

    9. **性能优化**:每个新版本都会关注性能提升,7.7可能包括更快的启动时间、组件渲染速度或内存管理优化。 10. **开发工具**:ExtJS SDK通常包括一套完整的开发工具,如Sencha CMD,用于构建、打包和调试应用。7.7...

    extjs最新版 3.2版本

    9. **性能提升**:通过对DOM操作的优化和内存管理的改进,EXTJS 3.2在渲染速度和响应时间上有显著提升。 10. **文档和社区支持**:EXTJS 3.2的发布伴随着详尽的API文档,方便开发者查阅和学习。同时,EXTJS拥有活跃...

    ExtJS官方帮助文档6.5.0

    10. **性能优化**:ExtJS持续关注性能提升,可能在6.5.0版本中实现了更快的渲染速度和更小的内存占用。 11. **API文档**:官方文档是学习和使用ExtJS的关键资源,6.5.0的文档详尽介绍了所有组件、类和方法,帮助...

    ExtJS内存调试工具 sIEve

    通过熟练使用sIEve,开发者可以有效地提高ExtJS应用在IE浏览器中的性能,减少内存泄漏,从而提升用户的浏览体验。对于任何处理大量数据或需要长时间运行的ExtJS应用来说,sIEve都是一个必不可少的调试利器。

    extjs-4.1.1完整压缩包

    10. **性能优化**:EXTJS 4.1.1 在4.x系列中进行了大量性能优化,如延迟加载、异步树结构等,降低了内存占用和提升了页面加载速度。 11. **API文档**:EXTJS 提供详尽的API文档,帮助开发者快速理解和使用各种组件...

Global site tag (gtag.js) - Google Analytics