`
chella
  • 浏览: 33055 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

ExtJS使用gzip压缩

阅读更多

前段时间老是被客户投诉,说每天早上上班登陆我们的系统都要等好久。
终于下定决心要把这块优化下。

 

首先检查问题所在,调研发现客户的习惯是把浏览器cache过期时间设置为12个小时。
每天在上登陆的时候都需要重新再把全部的css,js,html,jpg。。。文件全部加载一遍。
而我们系统使用的gwt ext编写的前端页面,完全符合ajax的风格。
在用户登录之后,再也不做整体的页面刷新。也就是说,全部的js,html,css文件全部
被编译在了index.html之中。检查发现index.html有5M+,好吧,就是你的问题。。。

 

关于加快页面访问速度的实现,总体而言有两个努力的方向。
1:使用缓存。
2:压缩传输。

 

关于基于资源的Http Cache实现,参见robbin的相关文章,这里就跳过了。
http://robbin.iteye.com/blog/462476

 

主要讲下压缩传输文件的实现。
压缩文件的途径有两种:1 手动压缩JS,编写自己的过滤器(Filter),配置自己过滤器。2 使用工具包。

1 我只相信自己写的代码
  【1】将js文件手动压缩。如项目中的ext-all.js 和 ext-core.js.使用gzip压缩,压缩之后将
  文件后缀改为.gzjs.(压缩比例大致为70%)。
  【2】编写Filter。

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 = this.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

<filter> 
      <filter-name>GzipJsFilter</filter-name> 
      <filter-class>com.monica.bussiness.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>

 
  加入过滤器配置。指定我们需要解压的文件类型。

2 我不想写自己的轮子
  【1】下载tk-filter工具包。下载地址 http://sourceforge.net/projects/filterlib
  【2】将解压后得到的jar包引入工程。将tk-filters.properties加入工程WEB-INF/class目录下
       修改tk-filters.properties GZIPFilter.Enabled=true
      (其他还有几个打印压缩比例之类的控制,自己改变参数选择就可以了)
  【3】配置web.xml

<filter>
    <filter-name>GZIPFilter</filter-name>
    <filter-class>com.tacitknowledge.filters.gzipfilter.GZIPFilter</filter-class>
</filter>

  <filter-mapping>
    <filter-name>GZIPFilter</filter-name>
    <url-pattern>*.js</url-pattern>
  </filter-mapping>

  <filter-mapping>
    <filter-name>GZIPFilter</filter-name>
    <url-pattern>*.css</url-pattern>
  </filter-mapping>

  <filter-mapping>
    <filter-name>GZIPFilter</filter-name>
    <url-pattern>*.html</url-pattern>
  </filter-mapping>

  <filter-mapping>
    <filter-name>GZIPFilter</filter-name>
    <url-pattern>*.gif</url-pattern>
  </filter-mapping>

 

我们来看下压缩之后网络传输的大小

 

Elapsed Time   2.915 seconds
Network Round Trips  2 
Downloaded Data   1258448 bytes
Uploaded Data   989 bytes
HTTP Compression Savings 4585156 bytes
DNS Lookups   0 
TCP Connects   0

(使用工具为HttpWatcher 下载地址 http://www.httpwatch.com/download/

压缩之后index页面大小为 1.1M,ext-all.js大小为138k。 压缩比例在80%左右。

 

推荐使用tk-filter,因为不仅不需要你新加入代码(预示着你需要重新测试),而且可以简便的配置
各个类型的文件,如html等。当然,手动压缩html也可以,但是这样你就需要每次在发布新版本的时候
都需要把新编译的html文件重新压缩一遍。在自动构建的过程中,这简直就是个灾难。

分享到:
评论
1 楼 ietttt 2012-10-11  
设置了好像不管用,用IE9自带的开发人员工具查看,大小没有变

相关推荐

    Javascript开发之js压缩篇.pdf

    文章中介绍了两种解决方法:一、使用yui-compressor对js文件进行压缩混淆,二、使用gzip压缩来减少文件体积。 首先,作者提到使用ExtJS库时遇到的问题,即ExtJS庞大的体积如何进行压缩和优化。作者引入了OPOA组件式...

    extjs+java实现短信猫发生短信dom

    在描述中提到“使用了EXTJS和GZIP压缩”,可能是指在前端,EXTJS可能被用来对请求或响应进行GZIP压缩,以优化网络性能。在服务器端,Java也可能有相应的处理,如使用Servlet API中的GZIPOutputStream来压缩响应数据...

    ExtJS5 整合Spring4之二

    在Spring中,`Filter`接口用于处理HTTP请求和响应,例如,实现认证、日志记录、GZIP压缩等功能。 - 集成时,可能会配置一个过滤器来处理ExtJS和Spring之间的通信,比如添加必要的头信息或者处理特定的请求格式。 5...

    extjs整合ssh框架

    为了提高性能,我们可以启用Tomcat的GZIP压缩。在Tomcat的`conf/server.xml`中,找到`Connector`标签,添加`useGzipCompression`属性并设为`true`。 **步骤6:配置Web.xml** 在`web.xml`中配置登录验证过滤器,这...

    asp.net与extjs开发点卡在线销售系统

    可以通过缓存策略减少数据库访问,使用GZip压缩减小HTTP响应大小,以及利用ASP.NET的输出缓存提高页面渲染速度。 总的来说,ASP.NET与ExtJS的结合为点卡在线销售系统提供了强大且灵活的开发平台。通过C#实现业务...

    为Extjs加加速(javascript加速)

    总之,通过减少加载的JavaScript文件数量,结合Gzip压缩技术和服务器端过滤器的配置,可以有效提升ExtJS应用程序的运行速度。这些技术的应用能够大幅度减少客户端与服务器之间的数据传输量,改善用户体验,并在带宽...

    E3Resource

    4. 提供多种压缩策略,有jsMin, cssMin, GZip等压缩算法,也可以根据需要自定义压缩算法 5. 允许把css,js等资源打成jar包,放到WEB-INF/lib目录下去,如果需要的话,您还可以对css,js等资源名称进行混淆处理. 6. ...

    ext-2.2.zip.tar.gz

    在实际操作中,首先需要使用`gunzip`命令去除gzip压缩,然后使用`tar -xvf`解压tar文件,最后用`unzip`解开zip文件。解压后的文件将提供更详细的关于ext-2.2和如何与Oozie集成的信息。对于开发者而言,理解这些内容...

    第1章JQuery系统介绍.docx

    1. **轻量级**:jQuery的核心库非常小巧,压缩后的大小只有30KB左右,使用Gzip压缩后甚至不到18KB,这对于网页加载速度有着显著提升。 2. **兼容性**:jQuery致力于解决不同浏览器间的差异,提供了一致的API,使得...

    第1章JQuery系统介绍.pdf

    1. 轻量级:压缩后的大小不到30KB,经过Gzip压缩后更是减少到18KB,这大大提高了页面加载速度。 2. 易用性:jQuery的API设计简洁,使得开发者易于理解和使用。 3. 兼容性:jQuery对各种浏览器的良好支持,减少了...

    PyPI 官网下载 | extdirect-0.2.tar.gz

    tar用于打包多个文件和目录,而gzip则负责对打包后的文件进行压缩,以节省存储空间。在Python环境中,我们可以使用内置的`tarfile`模块来解压这个文件,例如: ```python import tarfile with tarfile.open('...

    Json(struts2+Ext)

    这包括如何配置Action返回JSON,如何处理JSON数据的序列化和反序列化,以及如何优化JSON的性能,例如启用GZIP压缩、控制JSON输出的白名单等。 总结来说,“Json(struts2+Ext)”是一个关于使用Struts2框架和ExtJS库...

    JQuery系统介绍

    JQuery的压缩版本大小不到30KB,在服务器端启用Gzip压缩后,甚至可缩小至18KB,这使得加载速度极快,适用于各种网络环境。 #### 强大的选择器 JQuery支持几乎所有CSS1至CSS3的选择器,以及XPath选择器,甚至允许...

    JBob开发手册

    **8.6 Gzip压缩配置** - **压缩规则**:定义了哪些类型的数据应该被压缩传输,以减少网络流量。 #### 九、开发管理 **9.1 开发规范** - **代码规范**:提供了一套标准的代码编写规范,以提高代码质量和可读性。 - ...

    Ext Core Manual

    而对于生产环境,应使用未带`-debug`后缀的版本(`ext-core.js`),其大小经过压缩和gzip处理后仅为25KB: ```html &lt;script src="ext-core.js"&gt;&lt;/script&gt; ``` 值得注意的是,Ext Core不包含任何CSS文件,因此无需...

Global site tag (gtag.js) - Google Analytics