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

    在网站性能优化时候,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提供了如此好的工具。

关于firebug和yslow的资料汇总帖

在“Firebug 及yslow的相关资料”已经有一些相关文档,作为补充,再整理和总结关于firebug的一些相关文档,供查找。

Firebug官方文档

An In-depth Look At The Future of Javascript Debugging With Firebug

Estelle Weyl’s Introduction to Firebug

John Barton’s introduction to the Firebug source(Firebug internals

Firebug Crash Course(slideshare)

Hacking Web 2.0 Applications with Firefox

Hacking Digg With Firebug and jQuery

Firebug Tutorial - Logging, Profiling and CommandLine (Part I)

Firebug Tutorial - Logging, Profiling and CommandLine (Part II)

AJAX Debugging with Firebug

Javascript的调试利器:Firebug使用详解

初识Firebug 全文 — firebug的使用

 

Introduction to YSlow: optimizing your actual and perceived download speed

yahoo developer network YSlow project

rules for high performance web sites

High Performance Websites Lalit Patel(slideshare)

High performance web sites(slideshare)

Using Firebug & YSlow(slideshare)

yahoo yui项目组一哥们的blog

Technorati 标签: , , , ,