用压缩工具来提高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提供了如此好的工具。

无线增值业务门户建设技术思考

 

    eSales这样的业务运营、支撑系统由于大部分内容都是动态的且由于并发用户数相对较少、压力也相对较低,在设计合理的情况下,性能并不是最大的瓶颈,因此此种情况下采用动态页面的方式是比较恰当。对于门户社区而言,高并发、高负载、高性能、高可用性是第一位的,需要采用各种手段来提高其性能。关于网站优化最好的方法论是Yahoo 的Best Practices for Speeding Up Your Web Site ,技术层面细节的优化策略参看Yahoo的方法论。

    同时这是一个用户为中心(user centered)的年代,诸如“以用户为中心的设计”、“以用户为中心的系统”、“用户为中心的营销”等等。 但是怎样才能够让门户设计中充分考虑用户体验,避免致命性的坏体验(bad smell)?这是门户建设需要重点考虑的问题,这一点上所谓的交互设计模式对于我们还是有所益处的。关于用户交互设计的模式:Yahoo Design Pattern LibraryInteraction Design Pattern Library

    此处重点从技术层面谈一下在门户开发时候需要考虑的重点内容:

    Web2.0化:除了充分使用诸如TAG、RSS、DIGG、SNS、UGC这些典型的Web2.0的元素外,“用户体验”是门户建设的重中之重,以用户体验为中心,把这些web2.0元素恰当地融入无线增值业务门户中,相信我们才会造就一个伟大的无线互联网门户,否则只是一堆与别人雷同的舶来品。

    无线门户、互联网门户一体化:WAP门户及互联网门户采用同样的技术架构,在整个系统的基础架构仍然沿用目前的Struts2+Spring+Hibernate(ibatis)的架构,但在View层不使用JSP,而是采用Freemarker,充分利用Freemarker对模板支持及对xml较好支持,将对WML(WAP1.0)、XHTML(WAP2.0)、HTML(Internet)的处理都统一到同一架构下。

    REST(Representational State Transfer):遵循REST设计原则,尤其是无状态通信(statelessness)。

    页面静态化:对门户社区页面都尽量采用页面静态化方案,这样能够充分利用cache机制及实现replication、load balance及镜像(例如南北电信部署)。为了实现页面静态化策略,采用Freemarker+FMPP方案来实现页面静态化的策略。

    SEO:在设计时候一定要首先重点考虑搜索引擎友好及针对google、baidu搜索引擎进行优化,主要是Meta Tag部分内容及网站架构,所有的页面url遵循RSET模式,对无法遵循REST模式的,采用lighhttpd的mod_rewrite来实现。

    爬虫:简单的垂直爬虫主要采用httpclient+htmlparser方案实现,复杂爬虫策略采用Heritrix(或Nutch)实现。

    搜索引擎:采用Nutch+Lucene+Compass方案,对门户定时索引,提供全站搜索功能。

    AJAX:在eSales后台的ajax主要采用struts2的dojo实现,可以充分利用struts2的标签,保持架构的统一。在门户实现时候,由于主要采用静态页面化方案,对于需要动态内容的地方,采用ajax来实现动态数据的状态。在ajax库选择上,不再采用dojo,采用jquery方案。

    CSS:在eSales后台主要还是采用frame、table方式来实现页面布局,在门户开发时候完全采用CSS方案,以保证页面布局的灵活性及页面大小。

    Cache:尽量使用诸如memcache和squid的cache机制,提高性能

     镜像采用rsync来实现对静态页面内容的镜像及同步,解决因不同运营商(移动(铁通)、电信、联通(网通)、教育网、有线网)及地域用户访问速度上差异。

    其他的部署策略参看下图:

    平台系统部署方案

 

参考资料:

  • 性能方面:

http://developer.yahoo.com/performance/rules.html

http://highscalability.com/

High Performance Web Sites

Building Scalable Web Sites

http://www.sitepoint.com/print/web-site-optimization-steps

 

  • 用户体验方面

http://www.welie.com/patterns/index.php

http://developer.yahoo.com/ypatterns/atoz.php

http://en.wikipedia.org/wiki/Interaction_design_pattern

http://www.visi.com/~snowfall/InteractionPatterns.html