【原创】我的网站优化

原文地址: http://samy.eaful.com/myforum/blog/detail.ef?id=108

本来想直接发到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，以后有时间的话会把这个文件替换掉。

参考文章：http://www.thinkvitamin.com/features/webapps/serving-javascript-fast

评论

16 楼 hama 2008-10-02  

jacklondon 写道

Quake Wang 所说的去除空格，注释，我不赞同。浏览器可以缓存 js 文件，所以只要把 js 从 html 文件中独立出来就可以了。去除空格，注释使部署复杂度增大，同时没有很好的效果，不值得。

部署难度有多大？用个脚本跑一下就好了。不过确实不应该只是去除空格、注释而已，可以用YUI Compressor 进行混淆压缩

15 楼 hama 2008-10-02  

大家可以去找《High.Performance.Web.Sites》这本书看看，视频地址：
http://www.youtube.com/watch?v=BTHvs3V8DBA

是yahoo原来的首席性能专家的作品（现在好像跳到google了），yslow也是他的作品

14 楼 samy_3 2008-09-30  

raymond2006k 写道

css，js等文件的版本问题，我想一般项目中修改内容后文件名很少修改，所以即使缓存1天，半夜清除一次，也是可以接受的。

不好意思，你理解错了。不是把硬盘上的物理文件名改掉，而是在url中加入版本信息，目的是让浏览器觉得这是一个新资源，需要重新下载。在服务器上接收到这个url后，把版本信息去除，可以使用apache的url rewrite。
有两种方式可以在url中加入版本号：
1。http://www.xxx.com/xxx.css.v12345
2。http://www.xxx.com/xxx.css?v12345
第一种方式需要服务器对url rewrite
第二种方式不用处理也可以，如tomcat的DefaultServlet。这种方式http协议中规定是不缓存的，不过ie和ff都可以缓存。

raymond2006k 写道

gzip压缩，这个未怎么采用过，css，js，images压缩成一个gzip， html文件中不需要改链接吗？ 浏览器自动可以处理吗？ 请教了。 期待下一篇 关于后台的缓存处理。

image不需要压缩，因为它本身就是就是一种压缩方式。
在apache中可以通过mod_deflate配置实现。
如果自己写的话，在java中可以使用GZIPOutputStream实现，然后在response头中加入Content-Encoding为gzip，告诉浏览器这个流需要gzip解压就可以了。

13 楼 raymond2006k 2008-09-30  

很好，很强大。楼主给我们提供了一个网页优化的范本实践，既有原理，又有实践和测试报告，分享出来大家都可以学习，借鉴。

因为平时忙于JEE后台，前台的缓存考虑的不多；你分享的几个经验我们有时间会在项目中实践一下。

css，js等文件的版本问题，我想一般项目中修改内容后文件名很少修改，所以即使缓存1天，半夜清除一次，也是可以接受的。

gzip压缩，这个未怎么采用过，css，js，images压缩成一个gzip， html文件中不需要改链接吗？ 浏览器自动可以处理吗？ 请教了。

期待下一篇 关于后台的缓存处理。

12 楼 Arden 2008-09-30  

2）优化客户端cache

这一点怎么做？

11 楼 javaeyename 2008-09-29  

samy_3 写道

robbin老大到此一游，感觉还是有些激动。

你图片太小，真是看不清楚呀！哎！！！快用robbin老大的方法改一下吧！

10 楼 sam0411 2008-09-28  

Fckeditor 用这个做文章发布应该比现在好看些. 

9 楼 hustKiwi 2008-09-28  

jacklondon 写道

之前见过 yahoo 工程师写的网站优化一些经验，觉得不错。比你这里提到的全面。另，对于第二条缓存3年左右，我不赞成。一般缓存几个小时或者几天就可以了。在URL中放入版本参数把问题复杂化了，不是很好。web 服务器总的负荷在于动态内容+静态内容，静态内容缓存缓存与缓存3年相比， 服务器总的负荷变化并不明显。

恩，yahoo那个工程师说的经验现在已经出书：http://www.china-pub.com/39986
这里的很多优化与书中提到的一样。

8 楼 downpour 2008-09-28  

把js文件放到html的末尾，可以使得你的页面更快的显示出来。因为js文件不是并行下载的，需要在js文件下载完毕后才处理后续请求，所以在最后下载js文件，就能提前进行并行下载。

7 楼 samy_3 2008-09-28  

jacklondon 写道

之前见过 yahoo 工程师写的网站优化一些经验，觉得不错。比你这里提到的全面。另，对于第二条缓存3年左右，我不赞成。一般缓存几个小时或者几天就可以了。在URL中放入版本参数把问题复杂化了，不是很好。web 服务器总的负荷在于动态内容+静态内容，静态内容缓存缓存与缓存3年相比， 服务器总的负荷变化并不明显。

如果没有指定静态内容在客户端需要缓存的话，每次浏览器都会请求这个文件，然后服务器根据请求中的Last-Modified或Etag判断客户端的是不是最新文件，如果是发送一个304头，如果不是就把最新文件发送过去。
所以每次访问一个页面都请求的所有的css和js是一种浪费。

6 楼 samy_3 2008-09-28  

Quake Wang 写道

另外还有一点可以优化的是CSS的背景多个小图片可以放到一个大的图片文件里面（css sprite），不过这个需要手工处理比较麻烦，我们目前也还没做。

这个有时间肯定是要做的

5 楼 QuakeWang 2008-09-28  

jacklondon 写道

Quake Wang 所说的去除空格，注释，我不赞同。浏览器可以缓存 js 文件，所以只要把 js 从 html 文件中独立出来就可以了。去除空格，注释使部署复杂度增大，同时没有很好的效果，不值得。

部署用自动化脚本，手工处理是不可想像的，Java或者Ruby都有现成的压缩脚本可以用。
效果还是蛮明显的，比如一个richeditor JS脚本，gzip后带注释和不带注释的对比在：62KB v.s 43KB

4 楼 QuakeWang 2008-09-28  

很棒的经验分享, 我们对JavaEye也做了很多类似优化，关于第4点，在gzip开启的情况下是否做JS ShrinkSafe压缩区别不大，我们现在是去除空格，注释就可以了，这样万一在生产环境有JS错误，还能准确地报告错误行号。

另外还有一点可以优化的是CSS的背景多个小图片可以放到一个大的图片文件里面（css sprite），不过这个需要手工处理比较麻烦，我们目前也还没做。

3 楼 samy_3 2008-09-27  

robbin老大到此一游，感觉还是有些激动。

2 楼 jyasa 2008-09-27  

  有时间多指教...

1 楼 robbin 2008-09-27  

你可以把图片放在自己的博客相册里面，然后在文章里面引用