聚沙成塔-小哈的记事薄

之前的几篇文章，都是从中间件的角度来思考程序该如何优化。可是我们知道，一个应用的响应时间，除了从中间件接受请求到返回请求之间的处理时间，还包括在网络上传输的时间、浏览器展现的时间。如果你的应用是对Internet提供服务的，就不得不考虑这一层情况，否则中间件、数据库做了大量优化，能承担很大的并发量，却因为前端没有做过优化导致响应时间过长、用户体验变差，那么是相当郁闷的一件事。

我自己也亲身经历过这样的情况。一个OA项目开发完成后需要做性能测试，发现登录的响应速度很慢，loadrunner显示的吞吐率很高，完成的事务数却不多。用TPV查看WebSphere的使用率，发现JVM回收很正常，于是以为瓶颈在数据库查询上，但是数据库查询SQL执行的很快。最后用Firefox启用Firebug插件，不看不要紧，一看吓一跳：首页有8M大。虽然是内网，但也禁不住这么折腾啊。原来是客户上传了一张照片，程序没有做任何处理就在首页作为新闻放出了缩略图，所以网络流量很高，但是完成的登录数寥寥无几。

于是花了两天时间，在路上和中午阅读了一下《 高性能网站建设指南》。本书是由原Yahoo的Chief Performance撰写。书很薄，2个小时就能看完，但是内容却很丰富，15章章章有精彩。除了要修改代码的“减少HTTP请求”、“使用外部和CSS”、“避免CSS表达式”、“使Ajax可缓存”，更多的是不用修改任何代码，只要做一些配置就能享受到的性能提升——“添加Expires头”、“将样式表放在顶部”、“将脚本放在底部”、“精简JavaScript”、“配置Etag”。虽然这些内容似乎网上随处可见，但是原理解释到位，又结合实验数据说明，外加完整的示例代码的文章却不多见。看完这本书，可以让你不仅知其然，更知其所以然。

我的博“聚沙成塔-小哈的记事簿”也根据这些原则做了优化，把图片和CSS的Expires头都设置为了“增加10年”，这样第二次访问我的网页会迅速很多。同时启用了WordPress2.7默认关闭的gzip功能，同时使用了smartoptimizer工具来压缩CSS和JS，这样整个页面的传输量小了近1/3。由此我也能停用了SuperCache插件（其实就俺这些访问量用不着supercache，当时启用也是为了访问速度的考虑），启用Postviews来记录文章访问的情况。就这么简简单单的一些配置，让我的Yslow标准成绩从D提升到了C（还有些优化牵涉到CSS的修改，本人不是很擅长，还有些方面因为是个人博客不能避免的会引用到其它的服务），Small Site or Blog成绩为B。

怎么样，有没有兴趣买来读一读。如果只想具体了解一些的话，可以先看看Yahoo的这篇文章《Best Practices for Speeding Up Your Web Site》，和大牛Fenng的《高性能网站建设指南》读后随感。

最后附上简单有效的配置，在.htaccess文件中，新加入

<IfModule mod_expires.c>
<FilesMatch “\.(gif|jpg|jpeg|png|swf|css|js|htm?|xml|txt)$”>
ExpiresActive On
ExpiresDefault “access plus 10 years”
</FilesMatch>
</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*\.(js|css))$ smartoptimizer/?$1
<IfModule mod_expires.c>
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^(.*\.(js|css|htm?|xml|txt))$ smartoptimizer/?$1
</IfModule>
<IfModule !mod_expires.c>
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^(.*\.(gif|jpg|jpeg|png|swf|css|js|htm?|xml|txt))$ smartoptimizer/?$1
</IfModule>
</IfModule>
<FilesMatch “\.(gif|jpg|jpeg|png|swf|css|js|htm?|xml|txt)$”>
FileETag none
</FilesMatch>

即可添加长期的Expires头，转发js、css被smartoptimizer压缩，关闭Etag。

在根目录的index.php中define(‘WP_USE_THEMES’, true);后添加

if(ereg(‘gzip’,$_SERVER['HTTP_ACCEPT_ENCODING'])){
if(substr($_SERVER['REQUEST_URI'],0,10)!=’/wp-content/uploads/’)
ob_start(‘ob_gzhandler’);
}

wordpress的gzip压缩功能。