ExtJs性能优化

最新推荐文章于 2018-03-21 22:19:36 发布

Wilson伟庭

最新推荐文章于 2018-03-21 22:19:36 发布

阅读量9k

点赞数

分类专栏： Asp.net 文章标签： extjs import 浏览器 filter string 性能优化

Asp.net 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

ExtJs性能优化
在使用ExtJs过程中，性能一直是一个比较头疼的问题，从用户的角度来看，就一个字：慢。从技术的角度来说，这个“慢”字可以分为两种，加载“慢”和渲染 “慢”。想分辨这两种情况很容易：如果居于网不慢而互联网上慢，说明是加载慢；如果Chrome不慢而IE慢，就是渲染慢。还有另一种情况：越用越慢，这个“慢”通常是内存泄露造成的。

针对以下这三种情况讨论一下解决方案：

1，加载慢

1.1 减少要加载的东西

不要动不动就ext-all.js，extjs是可以定制的，如果你用不到tree，就不要包含这个组件了。ExtJs的官网上有详细的定制方法和工具。

1.2 给出合适的用户提示

把Js后置，然后前面做一个加载的提示。如果像Gmail那样给出进度条，或者像很多网游那样来点图片或者Tips啥的就更好了，说不定用户还会觉得怎么加载这么快，我还没看清楚呢，呵呵。

1.3 用的时候再加载

动态加载，参考使用ExtJs开发MIS系统（2）：Js的动态加载。

1.4 只加载一次

别用iframe了，如果你的静态内容过期做的不好，浏览器会经常再不厌其烦的从服务器下载同样的东西。

1.5 对你的Js添加过期标记

ext-base.js、ext-all.js都可以设置很长的过期时间，甚至永不过期（如果你不换extjs的版本）。这点对所有静态内容都很有用，如何设置过期标记请垂询Google。

2，渲染慢

2.1 少加载少解析、晚加载晚解析

1.1，1.3，1.4都对改善渲染慢的情况有效——加载的少了自然渲染的快了。

2.2 别用iframe

iframe不仅仅可能会使浏览器加载两遍，还一定会使浏览器解析两遍，放弃它吧，真的。

2.3 精心设计你的Js代码

例如缓存getElementByID()的结果、编译查询表达式之类的东西，这个纯看Js功力。

2.4 可能的话，让用户换个浏览器吧

Chrome比IE的Js渲染快是数量级上的差异！构造一个40列，50行的复杂GridPanel试试，你就会深有体会了……对于企业内部的MIS系统，换浏览器还是具有可能性的。

3，内存泄露

对于Js这样具有垃圾回收特性的语言来说，如果出现了内存泄露，那么就只有一种可能：引擎有问题！不幸的是，这个问题我们没有办法，但是有很多技巧可以避开……还是问Google吧：“JavaScript 内存泄露”，这个问题够再写一个系列的了。

用Gzip进行js的超强压缩

Gzip的使用很简单

解压至某个目录，会看到有一个Gzip.exe文件，然后在命令窗口进入该目录，执行
gzip ext-all.js
ext-all.js马上变成为ext-all.js.gz
大小从原来600多k摇身一变成了160多k，简直压细小很多。这回下载速度就非常快了。
那么浏览器能否解析这种压缩文件？答案是肯定的，前提是告诉浏览器，这种文件需要解压，然后再执行，解压的过程由浏览器来执行。
那么应用程序如何告诉浏览器，该文件需要解压呢，这得由服务器通过Http的Header指令来进行。
在JOffice中，就是通过Filter来进行的。

１.把ext.all.js.gz文件名改为ext.all.gzjs，Filter等一下就会拦截这种文件的访问。

２.写一个Filter,完成向Header添加指令
代码如下：
Java代码

 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 文件中，添加以下配置：
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>

1.http://man1900.iteye.com/blog/675687

2.压缩代码，能用BoxComponent就不用Panel或Container，window如果你不追求完美，可以设置shadow：false。能不显示边框的就不要显示边框。frame：true其实不好看，就默认白色就不错。

3.几个建议，比如里面的window，不要关闭，而是隐藏，如果是删除或添加，不要从数据库返回集合，而是自己直接在gridpanel中根据返回的结果，用extjs代码删除行，这样可以减少显然的时间。还有就是控制占时不显示的内容不要渲染了，当触发的时候再加载

引用 2 楼 fanchuanzhidu 的回复:
动态加载是没问题的主要取决于
1、你的加载方法
我之前做过的是从服务端获取js文件 load至浏览器缓存中后续再次点击则不需要再次加载
2、你的代码构造是否影响页面的渲染当然这当中会包括很多涉及到js性能方面的优化及
Ext自身渲染过程的限制刚开始加载的页面尽量做到简单如果配置项或列表很多折中处理实在没辙了加loading遮罩
3、4.0比2.2在性能上好多了 IE下慢也……

上面正解，最近本人研究出相应的折中解决方案，是使用extjs版本3的，而且框架使用技术类似C#，完全面向对象。主要思路是使用Ajax请求js文件，提前预加载进index.jsp里，不要到使用的时候再加载。
jsp页面只有个index.jsp，里面只含有Extjs核心js文件，以及三个主js文件，后续边使用边加载，不使用不加载。

ExtJS 4 组件化编程，动态加载，面向对象，Direct
http://www.cnblogs.com/luyingxue/archive/2011/05/12/2044673.html

6.在Extjs4应用中使用Ext.Loader
http://www.mhzg.net/a/20116/201163010100284.html

7.让Extjs加加速

http://www.cnblogs.com/single1970/archive/2010/08/19/extjs.html

8.记一复杂页面的前端优化(1) - 不一样的延迟加载
http://www.cnblogs.com/BearsTaR/archive/2010/07/14/tally_optimization.html

9.http://www.cnblogs.com/yuandong/archive/2008/12/17/1356747.html
使用ExtJs开发MIS系统（1）：基于ExtJs的MIS构架设计