`
牧羊人
  • 浏览: 210752 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

GZip压缩和按需装载提升Ext Js的性能

阅读更多
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官网上不去了)

      我在项目中是这么用的:

<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);


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

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

............
   public void doFilter(HttpServletRequest request,
             HttpServletResponse response, FilterChain chain)
            throws IOException, ServletException {
            for(Iterator it = headers.entrySet().iterator();it.hasNext();) {
                 Map.Entry entry = (Map.Entry)it.next();
                 response.addHeader((String)entry.getKey(),(String)entry.getValue());
               //转载请注明出处http://blog.csdn.net/selley
             }
             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());
         }
     }
}
web.xml配置(转载请注明出处http://blog.csdn.net/selley):
<filter>
        <filter-name>addHeaderFilter</filter-name>
        <filter-class>org.common.AddHeaderFilter</filter-class>
        <init-param>
            <param-name>headers</param-name>
            <param-value>Content-Encoding=gzip</param-value>
        </init-param>
    </filter>
   
   
通过以上两步,整个页面装载速度很快了。大家可以试试。

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

相关推荐

Global site tag (gtag.js) - Google Analytics