网站优化

本来想直接发到javaeye上的，但是这里只能上传3个图片文件，所以还是选择了自己的网站。
本文以http://www.eaful.com网站为例，为刚做完第一阶段的性能优化作一个总结，希望能给大家抛砖引玉。
我的这个网站刚上线不久，因为时间比较仓促，所以先发布，再来优化性能。经过优化后从数据看是非常明显的，不过你访问的时候可能还是比较慢，因为目前我的服务器带宽只有电信2M独享，呵呵，见笑了吧！穷，没办法。这个网站主要以分享图片为主题，功能比较简单。将来也不会做的复杂，因为你从名字中就可以看出 eaful , easy is beautiful. 呵呵。

我的性能优化分两个阶段实现：
第一阶段：前台性能优化
主要指减小页面输出流，完善客户端cache策略。
第二阶段：后台性能优化
主要包括数据库优化，cache优化，算法优化和Page Stream Cache。
目前完成了第一阶段，第二阶段估计在10月国庆节完成。下面详细介绍第一阶段的性能优化。

1）为静态文件独立域名
因为我的网站主要是图片，每张图片就有50－60K，以后访问量大的时候会独立一台图片服务器，以减轻应用服务器的压力，所以为静态文件的URL独立一个二级域名(img.eaful.com)，为什么不独立一个顶级域名，因为考虑到cookie共享等因素，比如有些图片必须登陆后访问。

2）优化客户端cache
比如一些静态文件，如图片，css文件，js文件等不用每次都更新，所以使用永久cache。方法是在response头中设置Cache-Control 为max-age=99999999，大概缓存3年左右吧。如果css文件修改了怎么办呢，所以这里的关键点是在URL中放入版本参数。如：http://img.eaful.com/virtual/all.css.v1222319367387其中v1222319367387是版本信息，当文件修改后，就修改这个版本号输出链接。这样浏览器发现这是一个新URL，所以会重新请求。
这里要注意的是只对有含有版本号的URL缓存，否则一旦客户端永久cache你就不能让他何时更新了。如更改了js文件，客户端没有更新，这样可能报错了你也不知道。
对图片的链接，就算不包含版本号，也至少让他缓存到凌晨过期(使用Expires头)。这样不会每次刷新页面都更新图片。而且就算图片有修改，最多也是晚一天看到罢了。

3）合并css，js文件
我本来有3个css文件，5个js文件。首次打开的时候要请求8次，虽然现代浏览器支持长连接，但还是没有放到一个文件中快，只要下载一次就够了。我把css文件合并为一个，js文件合并为一个，效果很明显。我这里使用的合并不是发布期手工合并,而是运行期根据配置合并,在应用启动时合并载入在内存中。
谢谢quake wang的提醒：把css中的小图片合成一张大图片，然后在css中调节显示位置。但这里需要注意的是修改图片时，要保持原图片的位置不变，并且不影响其他图片的位置。我目前的做法是给每个小图片一定的空余空间，如一个30*30px的图片，我给它在大图中的空间是50×50px，这样的话以后这个图片需要变大的话，不会影响右边和下边的图片了。如果超过50×50px,就给它100×100px,反正是某个整数的倍数，这样便于在css中调节显示位置。

4）压缩文本输出
css文件，js文件，html文件都是文本输出，都可以用gzip压缩，而且有立竿见影的效果。我的200K的js文件压缩后只有49K了，还是很满意的。也可以考虑在压缩前用ShrinkSafe先瘦身，它可以把注释去掉，缩短变量名的方法减小js文件，以我200K的js文件为例，瘦身后只有 100K了，但是用gzip压缩，只能压到39K，感觉效果不是很明显，而且据说有eval的bug，所以我这里没有采用。还可以考虑对css文件， html文件进行瘦身，比如删除两边的空格，回车等，但我觉的使用了gzip压缩，删除和不删除空格，压缩效果应该不会相差太大，所以也没有采用。

以下是我在firefox中使用firebug测试性能的截图，优化前和优化后的效果比较。

优化前：


优化后：


以上是firfox首次打开http://www.eaful.com/myforum/forum/list.ef的截图，整整提高了1秒多。第二次打开就更快了，几乎所有东西静态文件都在客户端有缓存。

也可以使用http://www.websiteoptimization.com/services/analyze/index.html来分析页面下载性能。
优化前：
Object Size Totals
Object type Size (bytes) Download @ 56K (seconds) Download @ T1 (seconds)
HTML: 46442 9.46 0.45
HTML Images: 10354 2.46 0.45
CSS Images: 19620 6.31 2.50
Total Images: 29974 8.77 2.95
Javascript: 186931 38.66 2.39
CSS: 16635 4.12 0.89
Multimedia: 0 0.00 0.00
Other: 0 0.00 0.00

优化后：
Object Size Totals
Object type Size (bytes) Download @ 56K (seconds) Download @ T1 (seconds)
HTML: 45412 9.25 0.44
HTML Images: 10354 2.46 0.45
CSS Images: 0 0.00 0.00
Total Images: 10354 2.46 0.45
Javascript: 47708 9.71 0.45
CSS: 4028 1.00 0.22
Multimedia: 0 0.00 0.00
Other: 0 0.00 0.00

优化前和优化后的效果还是很明显的，但是js文件中使用了prototype.js这个js文件，有126K，以后有时间的话会把这个文件替换掉

评论

1 楼 Jummy 2008-10-08  

　　转的别人的一篇文章，不错．写的挺有技术深度．．．