提高程序运行速度让ExtJS华而又实

Ext JS虽然有着华丽的界面，但是真正使用过的人才知道，它运行起来的速度是让人抓狂的，而导致速度慢的重要原因，就是JavaScript的加载。Ext JS的全部JavaScript是比较大的，一个ext-all-debug.js就达2m多，它的压缩版也达600多k，这对于在网速不太快的时，下载JavaScript就得漫长的等待。

创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于成都网站制作、成都网站建设、富裕网络推广、微信小程序开发、富裕网络营销、富裕企业策划、富裕品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联公司为所有大学生创业者提供富裕建站搭建服务，24小时服务热线：18982081108，官方网址：www.cdcxhl.com

推荐阅读：应用最广的十大Javascript框架

其中日历任务控件，JavaScript多达四五个，每个JavaScript大小都达70多k，尽管我们采用了后加载的方式，则当用户点击我的任务功能时，才下载该JavaScript，但这样仍然很慢，因为下载的JavaScript很慢，鉴于此，在互联网上使用类似Joffice类似的程序，速度会使很多开发商不敢选用Ext JS作为开发技术。我们可以从以下几种方法来提高应用程序的运行速度：

一.前期尽量少加载JavaScript

这点在Joffice中有比较好的运用，采用的是由ScriptMgr.load方法来完成，加载完成后，其会在body中插入一个DIV，只要当前页面不被刷新，下次再访问该功能时，不需要再加载JavaScript。实例代码：

 
 
 
    
  
  
  
  1. view sourceprint?01 function $ImportJs(viewName,callback) {     
    2.   
  
  
  2. var b = document.getElementById(viewName+'-hiden');       
    3.   
  
  
  3.  
    4.   
  
  
  4.  if (b != null) {       
    5.   
  
  
  5.  
    6.   
  
  
  6.       var view = eval('new ' + viewName + '()');       
    7.   
  
  
  7.  
    8.   
  
  
  8.      callback.call(this, view);       
    9.   
  
  
  9.  
    10.   
  
  
  10.  } else {       
    11.   
  
  
  11.  
    12.   
  
  
  12.       var jsArr = eval('App.importJs.' + viewName);       
    13.   
  
  
  13.  
    14.   
  
  
  14.      if(jsArr==undefined){       
    15.   
  
  
  15.  
    16.   
  
  
  16.           var view = eval('new ' + viewName + '()');       
    17.   
  
  
  17.  
    18.   
  
  
  18.           callback.call(this, view);       
    19.   
  
  
  19.  
    20.   
  
  
  20.          return ;       
    21.   
  
  
  21.  
    22.   
  
  
  22.      }       
    23.   
  
  
  23.  
    24.   
  
  
  24.       ScriptMgr.load({       
    25.   
  
  
  25.  
    26.   
  
  
  26.                   scripts : jsArr,       
    27.   
  
  
  27.  
    28.   
  
  
  28.                   callback : function() {       
    29.   
  
  
  29.  
    30.   
  
  
  30.                              
    31.   
  
  
  31.  
    32.   
  
  
  32.                      Ext.DomHelper.append(document.body,"  
  
  
  33.  
    34.   
  
  
  34.                                               + viewName       
    35.   
  
  
  35.  
    36.   
  
  
  36.                                               + "-hiden' style='display:none'>
");       
  •                       var view = eval('new ' + viewName + '()');       
  •  
  •                       callback.call(this, view);       
  •  
  •                   }       
  •  
  •       });       
  •  
  •  }  

    • #p#

    二.用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添加指令。

     
 
 
      
  
  
  
    1. view sourceprint?01 package com.htsoft.core.web.filter;       
      2.   
  
  
    2.  
      3.   
  
  
    3.     import java.io.IOException;       
      4.   
  
  
    4.  
      5.   
  
  
    5.      import java.util.HashMap;       
      6.   
  
  
    6.  
      7.   
  
  
    7.      import java.util.Iterator;       
      8.   
  
  
    8.  
      9.   
  
  
    9.      import java.util.Map;       
      10.   
  
  
    10.  
      11.   
  
  
    11.      import javax.servlet.Filter;       
      12.   
  
  
    12.  
      13.   
  
  
    13.      import javax.servlet.FilterChain;       
      14.   
  
  
    14.  
      15.   
  
  
    15.     import javax.servlet.FilterConfig;       
      16.   
  
  
    16.  
      17.   
  
  
    17.      import javax.servlet.ServletException;    
      18.   
  
  
    18.      
      19.   
  
  
    19.      import javax.servlet.ServletRequest;       
      20.   
  
  
    20.  
      21.   
  
  
    21.      import javax.servlet.ServletResponse;       
      22.   
  
  
    22.  
      23.   
  
  
    23.      import javax.servlet.http.HttpServletRequest;       
      24.   
  
  
    24.  
      25.   
  
  
    25.      import javax.servlet.http.HttpServletResponse;       
      26.   
  
  
    26.  
      27.   
  
  
    27.              
      28.   
  
  
    28.  
      29.   
  
  
    29.      public class GzipJsFilter implements Filter {       
      30.   
  
  
    30.  
      31.   
  
  
    31.           Map headers = new HashMap();       
      32.   
  
  
    32.  
      33.   
  
  
    33.          public void destroy() {       
      34.   
  
  
    34.  
      35.   
  
  
    35.           }       
      36.   
  
  
    36.  
      37.   
  
  
    37.          public void doFilter(ServletRequest req, ServletResponse res,       
      38.   
  
  
    38.  
      39.   
  
  
    39.                  FilterChain chain) throws IOException, ServletException {       
      40.   
  
  
    40.  
      41.   
  
  
    41.              if(req instanceof HttpServletRequest) {       
      42.   
  
  
    42.  
      43.   
  
  
    43.                   doFilter((HttpServletRequest)req, (HttpServletResponse)res, chain);       
      44.   
  
  
    44.  
      45.   
  
  
    45.              }else {       
      46.   
  
  
    46.  
      47.   
  
  
    47.                   chain.doFilter(req, res);       
      48.   
  
  
    48.  
      49.   
  
  
    49.               }       
      50.   
  
  
    50.  
      51.   
  
  
    51.           }    
      52.   
  
  
    52.      
      53.   
  
  
    53.          public void doFilter(HttpServletRequest request,       
      54.   
  
  
    54.  
      55.   
  
  
    55.                   HttpServletResponse response, FilterChain chain)       
      56.   
  
  
    56.  
      57.   
  
  
    57.                  throws IOException, ServletException {       
      58.   
  
  
    58.  
      59.   
  
  
    59.                  request.setCharacterEncoding("UTF-8");       
      60.   
  
  
    60.  
      61.   
  
  
    61.                  for(Iterator it = headers.entrySet().iterator();it.hasNext();) {       
      62.   
  
  
    62.  
      63.   
  
  
    63.                       Map.Entry entry = (Map.Entry)it.next();       
      64.   
  
  
    64.  
      65.   
  
  
    65.                       response.addHeader((String)entry.getKey(),(String)entry.getValue());       
      66.   
  
  
    66.  
      67.   
  
  
    67.                   }       
      68.   
  
  
    68.                  chain.doFilter(request, response);       
      69.   
  
  
    69.  
      70.   
  
  
    70.           }       
      71.   
  
  
    71.  
      72.   
  
  
    72.              
      73.   
  
  
    73.  
      74.   
  
  
    74.          public void init(FilterConfig config) throws ServletException {       
      75.   
  
  
    75.  
      76.   
  
  
    76.               String headersStr = config.getInitParameter("headers");       
      77.   
  
  
    77.  
      78.   
  
  
    78.               String[] headers = headersStr.split(",");       
      79.   
  
  
    79.  
      80.   
  
  
    80.              for(int i = 0; i < headers.length; i++) {       
      81.   
  
  
    81.  
      82.   
  
  
    82.                  String[] temp = headers[i].split("=");       
      83.   
  
  
    83.  
      84.   
  
  
    84.                  this.headers.put(temp[0].trim(), temp[1].trim());       
      85.   
  
  
    85.  
      86.   
  
  
    86.               }       
      87.   
  
  
    87.  
      88.   
  
  
    88.           }       
      89.   
  
  
    89.      }   
      90.   
  
  
    90.  
      91.   
  
  
    91.       
      92.   
  
  
    92. 3.在WEB.xml 文件中，添加以下配置：  
      93.   
  
  
    93.  
      94.   
  
  
    94. view sourceprint?01          
      95.   
  
  
    95.  
      96.   
  
  
    96.       GzipJsFilter         
      97.   
  
  
    97.  
      98.   
  
  
    98.       com.htsoft.core.web.filter.GzipJsFilter         
      99.   
  
  
    99.  
      100.   
  
  
    100.                
      101.   
  
  
    101.  
      102.   
  
  
    102.           headers         
      103.   
  
  
    103.  
      104.   
  
  
    104.           Content-Encoding=gzip         
      105.   
  
  
    105.  
      106.   
  
  
    106.              
      107.   
  
  
    107.  
      108.   
  
  
    108.        
      109.   
  
  
    109.  
      110.   
  
  
    110.        
      111.   
  
  
    111.  
      112.   
  
  
    112. GzipJsFilter       
      113.   
  
  
    113.  
      114.   
  
  
    114. *.gzjs       
      115.   
  
  
    115.  
      116.   
  
  
    116. lt;/filter-mapping>       
      117.   
  
  
    117.  
      118.   
  
  
    118.   
      119.

    4.在index.jsp中引入该压缩文件：

     
 
 
      
  
  
  
    1.  
      2.   
  
  
    2.  
      3.

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

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

    原文地址：http://www.cnblogs.com/single1970/archive/2010/08/19/Extjs.html

    分享文章：提高程序运行速度让ExtJS华而又实
    本文链接：http://www.csdahua.cn/qtweb/news21/65371.html

    网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

    成都快上网为您推荐相关内容

    动态网站知识

    分类信息网站

    成都app软件开发公司　　 　华泰海航　　 　边坡防护网厂家　　 　小谭网创广告　　 　正泰动物　　 　手机网站制作　　 　网站收录　　 　教育培训网站建设方案　　 　成都电信服务器托管　　 　网站运维托管　　 　成都网络公司　　 　微信小程序开发　　 　外贸网站建设　　 　外贸网站设计方案　　 　成都网站建设　　 　企业邮箱　　 　四川艾名斯　　 　研帮主　　 　zyfdjwx.com　　 　成都名片印刷