出家如初,成佛有余

用压缩工具来提高web应用程序效率

Posted in Uncategorized by chuanliang on 2008/06/18

    在网站性能优化时候,Yahoo Performance Team的rules for high performance web sites是较好的调优指南(或者yahoo的大牛Steve Souders在其《High Performance Web Sites》书中提出提高网页效率的14条准则),Firefox的插件Firebug及Yahoo提供的Firebug 插件Yslow(http://developer.yahoo.com/yslow/)也是进行性能调优较好的工具。

    按照调优指南,一个重要的原则就是对js、css等文件采用Gzip、deflate等压缩工具进行压缩,以降低网络传输带宽。

1、网页压缩原理

    网页压缩是一项由WEB服务器(应用服务器)和浏览器之间共同遵守的协议,也即WEB服务器(应用服务器)和浏览器都必须支持该技术,现在流行的浏览器(IE、FireFox、Opera )都是支持的;Lighttpd、Apache 、Ngix、 IIS、Tomcat等应用服务器或web服务器都支持。双方的协商过程如下:

  1. 浏览器请求某URL,并在请求的头 (head) 中设置属性 accept-encoding 值为 gzip, deflate,表明浏览器支持 gzip 和 deflate 这两种压缩方式(事实上 deflate 也是使用 gzip 压缩协议);
  2. WEB 服务器接收到请求后判断浏览器是否支持压缩,如果支持就传送压缩后的响应内容,否则传送不经过压缩的内容;
  3. 浏览器获取响应内容后,判断内容是否被压缩,如果是则解压缩,然后显示响应页面的内容。

    具体的交互过程可以利用Livehttpheader来查看http的交互过程。

2、网页压缩的方法

对JS、CSS文件压缩分为两大方面:

  • 对js、CSS采用yuicompressor、JsPacker这样的工具对js等文件进行压缩。主要是删除诸如空行、回车换行、注释等无用的字符,减少文件本身的大小,这也是诸如jquery、prototype等javascript库发布时候所采用的方法。
  • 采用应用服务器(web服务器)及浏览器对gzip、deflate等压缩方法的支持来对请求进行实时的压缩

    在实际应用时候,应当结合两种方法来使用。在大型应用中,会采用lighttpd、apache这样的web服务器来做前端,可以在lighttpd或apache中配置gzip、deflate支持。这里只是简单说明一下采用Jboss对gzip的支持来提高web应用程序的效率

3、修改jboss配置,让其支持gzip压缩

    这里使用jboss 4.2.2,servlet容器采用的是tomcat,因此让jboss支持gzip的配置方法,实际上就是修改tomcat的配置

    修改jboss-4.2.2.GA/server/default/deploy/jboss-web.deployer/server.xml,增加如下内容

    <Connector port=”80″ address=”0.0.0.0″

         maxThreads=”1500″ maxHttpHeaderSize=”8192″

         emptySessionPath=”true” protocol=”HTTP/1.1″

         enableLookups=”false” redirectPort=”8443″ acceptCount=”100″

         connectionTimeout=”20000″ disableUploadTimeout=”true”

         compression=”on”      

         compressableMimeType=”text/html,text/xml,text/plain,text/css,text/javascript,application/xhtml+xml,

         application/x-javascript,application/javascript,text/xhtml”

        />

    在Tomcat与gzip相关的几个参数如下,具体可以参考

http://www.jboss.org/file-access/default/members/jbossweb/freezone/docs/2.1.0/config/printer/http.html

或:

http://tomcat.apache.org/tomcat-5.5-doc/config/http.html

  • compressableMimeType

    The value is a comma separated list of MIME types for which HTTP compression may be used. The default value is text/html,text/xml,text/plain.

  • compression

    The Connector may use HTTP/1.1 GZIP compression in an attempt to save server bandwidth. The acceptable values for the parameter is “off” (disable compression), “on” (allow compression, which causes text data to be compressed), “force” (forces compression in all cases), or a numerical integer value (which is equivalent to “on”, but specifies the minimum amount of data before the output is compressed). If the content-length is not known and compression is set to “on” or more aggressive, the output will also be compressed. If not specified, this attribute is set to “off”.

  • noCompressionUserAgents

  The value is a comma separated list of regular expressions matching user-agents of HTTP clients for which compression should not be used, because these clients, although they do advertise support for the feature, have a broken implementation. The default value is an empty String (regexp matching disabled).

采用gzip压缩后,一个典型例子为struts2中所采用的dojo.js,原来大小为258K,压缩后只有72K,压缩的效果还是很显著的

4、调试

    在web开发时候firefox提供了比IE等浏览器更好的web开发工具

    Firebug:http://www.getfirebug.com/

    Yslow:http://developer.yahoo.com/yslow

    Livehttpheader:http://livehttpheaders.mozdev.org/

    Web Developer: http://chrispederick.com/work/web-developer/

4.1、采用Yslow查看对网站的建议

yslow

3.2、采用Firebug参看页面交互情况

firebug

另外今天是Firefox3正式发布的日子,下载支持一下,感谢Firefox提供了如此好的工具。

No Responses Yet

Subscribe to comments with RSS.

  1. […]    Gzip(Deflate):服务器端可以直接通过配置apache、tomcat等来实现对gzip、deflate的支持(用压缩工具来提高web应用程序效率 ),java、python对gzip也有较好的库支持。在客户端symbian、windows mobile、j2me等都提供了对gzip的支持 […]

  2. […] Gzip(Deflate):服务器端可以直接通过配置apache、tomcat等来实现对gzip、deflate的支持(用压缩工具来提高web应用程序效率 ),java、python对gzip也有较好的库支持。在客户端symbian、windows mobile、j2me等都提供了对gzip的支持 […]


发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: