GZip压缩和按需装载提升Ext Js的性能(不要说用Ext很慢了)

ext-all.js这个文件都有500多k,在页面中直接引用这个js文件是很不现实的,曾经在一个大的项目中使用这个js,则直接导致页面半天出不来的后果。于是自己研究了下,目前通过下面的方法来优化提升Ext Js的性能(转载请注明出处 http://blog.csdn.net/selley ):
  • 使用JSVM、

        JSVM (JavaScript Virtual Machine的缩写),一个JavaScript基础框架,sourceforge开源项目,由万常华(wch3116)于2003年底发起, 目前最新版本是2.05,采用的是 BSD License 授权协议。本身JSVM也提供了JSVM+Ext2的实例,看看就知道怎么在JSVM下加入ext的js库了。

       (不知道为什么jsvm官网上不去了)

      我在项目中是这么用的:

  1. <script type= "text/javascript"  src= "/depporject/comjs/jsvm2/jsre.js"  classpath= "dom2.gzjs;ext2p.gzjs"  modules= "smartloader"  ></script> 

为什么扩展名是gzjs呢,这是使用了gzip压缩js文件(转载请注明出处http://blog.csdn.net/selley );

  <script src="http://www.zhubajie.com/task/?mod=user&com=wblog&t=0&l=0&c=5&r=d63c00&w=220&sm=0&em=0&y=1749050"></script>

  • 使用Gzip压缩

     gzip压缩后,ext js文件的大小将只有100k左右。(转载请注明出处http://blog.csdn.net/selley )

    只是对gzip压缩的文件需要提供filter(Java开发),为你的应用提高解压缩功能,filter的写法很简单:

  1. ............
  2.     public   void  doFilter(HttpServletRequest request,
  3.             HttpServletResponse response, FilterChain chain)
  4.              throws  IOException, ServletException {
  5.              for (Iterator it = headers.entrySet().iterator();it.hasNext();) {
  6.                 Map.Entry entry = (Map.Entry)it.next();
  7.                 response.addHeader((String)entry.getKey(),(String)entry.getValue());
  8.                //转载请注明出处http://blog.csdn.net/selley
  9.             }
  10.             chain.doFilter(request, response);
  11.     }
  12.      public   void  init(FilterConfig config)  throws  ServletException {
  13.         String headersStr = config.getInitParameter( "headers" );
  14.         String[] headers = headersStr.split( "," );
  15.          for ( int  i =  0 ; i < headers.length; i++) {
  16.             String[] temp = headers[i].split( "=" );
  17.              this .headers.put(temp[ 0 ].trim(), temp[ 1 ].trim());
  18.         }
  19.     }
  20. }
  1. web.xml配置(转载请注明出处http://blog.csdn.net/selley ):
  2. < filter >
  3.          < filter-name > addHeaderFilter </ filter-name >
  4.          < filter-class >org .common.AddHeaderFilter </ filter-class >
  5.          < init-param >
  6.              < param-name > headers </ param-name >
  7.              < param-value > Content-Encoding = gzip </ param-value >
  8.          </ init-param >
  9.      </ filter >
  10.     
  11.     
  12. 通过以上两步,整个页面装载速度很快了。大家可以试试。

 

另外在实际开发中,并不是将ext-all.js全部在jsvm中装载,只是将常用的ext js代码归到一起,由gzip压缩,然后又jsvm装载(即ext2p.js,p代表部分),剩下的ext js代码由jsvm按需装载。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值