zoukankan      html  css  js  c++  java
  • ExtJs性能优化

    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来进行的。

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

    2.写一个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代码删除行,这样可以减少显然的时间。还有就是控制占时不显示的内容不要渲染了,当触发的时候再加载

    4.
    引用 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文件,后续边使用边加载,不使用不加载。
     
    5
    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加加速
     
    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构架设计 

  • 相关阅读:
    Event 事件(最简单实用)
    Codeforces Beta Round #93_A题
    欧几里得算法扩展(extended gcd)解不定方程_初入门
    HDU2955_Robberies_01背包变种
    HDU2602_Bone Collector_很水的01背包
    USACO_2_1_3_Sorting a ThreeValued Sequence_交换环
    Codeforces Beta Round #93_B题
    中国剩余定理的_非互素同余模板
    HDU1114_DP_完全背包
    HDU3809_Decrypt coordinate_迭代法
  • 原文地址:https://www.cnblogs.com/neso520/p/12491261.html
Copyright © 2011-2022 走看看