从博客优化出发

目录
[隐藏]

在博客部署上线后的第一次访问时,有几个数字让我至今记忆犹新。

1、小白之殇

在谷歌开发者工具中可以看到

38/38 requests | 6.1MB / 6.1MB transferred | Finish:54.08 s | DOMContentLoaded:11.29 s | Load:54.04

这样的结果,直白的说,就是一个毫无网站优化经验、完全没有考虑过优化网站响应时间的小白的“杰作”。显然,我就是这样一个小白。。。

打开一个网页需要 11.29 s 才能看到一点文档内容,将近一分钟才能把完整页面呈现出来。这放在 N 年前或许还可以接受,但现在是完全无法接受的。

先不说网站内容有多丰富、多有价值,网站的响应时间总是第一感觉,只要好几秒不显示出内容来,很大几率上都会选择离开,11.29 s 这样的体验已经不是差可以形容的了。

看到这样的情况我心里是立马就清楚的,但因为之前一直实在本地跑项目,怎么折腾访问起来都是无压力的,所以也就没有也不会去注意要对网站访问进行优化了。

缺乏经验和这种要去优化的想法肯定是产生这个结果的一个根本原因。

而一个直接的原因就是,传输的数据量太大了!对于 1M 的带宽,大致确实需要这么长一段时间去进行传输。虽然是这样,但肯定不能放着不管,那就去优化吧。

2、一步一步优化

因为没有经验,所以就按着自己的想法在做。

不断地删除浏览器缓存不断地访问,然后观察开发者工具里的请求,发现最耗时的就是图片请求了,平均一张图片大小有 500KB,,,,(这也是本地留下来的后遗症,开始怎么好看怎么高清怎么来,所以图片大小非常的“扎实”)。怎么让图片瘦身?
第一点想到就是,我以后不再上传这么大图片。但如果只这样,那还是会有意外也很不方便(太依靠人工了)。所以就又想到了在程序中对图片进行压缩,这一点我扒了几个博客网站的代码,发现有一种实现方式是在 加载时调用某个程序传入图片参数进行压缩后再 显示。例如:http://host/thump.php 就是实现压缩图片并返回的功能,那在代码中使用 http://host/thump.php?w=xx&h=xx&src=xx 就可以显示出一张压缩后的图片了。

我先也实现了这种方式,但最后没用(没啥原因,,,)。还是选择了在后台上传图片后立即压缩再存储这种方式。要压缩到何种程度,最好先多测试下参数,尽量在清晰度和大小之间均衡一下。

图片瘦身完毕,再继续观察请求,瘦身其它大文件,比如 js、css 文件使用压缩后的,这个压缩效果还是挺不错的。

接着把 HTML结构 稍微的调整优化了一下。再分析请求的时候,突然意识到 HTTP 请求的解析也是需要时间的,过多的 HTTP 请求在一定程度上也会影响响应时间,所以就把所有不必要的文件请求全部删掉了,把能合并的文件尽量合并了,这样减少了 11 个请求。。。

到这里,我感觉自己能想到的都做了,响应时间也确实发生了变化,从 11.29s 缩短到了 2s,但还是很慢

只能查资料,一查就发现还有一个法子,对于请求的文件,先在服务器上压缩后再进行传输!

2.1 apache 启用 Gzip 压缩

Apache 支持压缩功能,不过默认没有开启。所以需要先在 httpd.conf 中加载 deflate_moduleheaders_modulefilter_module 这三个模块,然后再 httpd。conf 中配置压缩选项(比如哪些东西需要压缩,哪些不需要压缩这些),下面给个配置样例:

<IfModule mod_deflate.c>

DeflateCompressionLevel 6
   SetOutputFilter DEFLATE
   AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/x-javascript

application/javascript application/json
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary #设置不对后缀gif,jpg,jpeg,png的图片文件进行压缩
   SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
   AddOutputFilterByType DEFLATE text/* #设置对文件是文本的内容进行压缩,例如text/html  text/css  text/plain等
   AddOutputFilterByType DEFLATE application/ms* application/vnd* application/postscript application/javascript

application/x-javascript
   AddOutputFilterByType DEFLATE application/x-httpd-php application/x-httpd-fastphp
   BrowserMatch ^Mozilla/4 gzip-only-text/html # Netscape 4.x 有一些问题,所以只压缩文件类型是text/html的
   BrowserMatch ^Mozilla/4.0[678] no-gzip # Netscape 4.06-4.08 有更多的问题,所以不开启压缩
   BrowserMatch \bMSIE !no-gzip !gzip-only-text/html # IE浏览器会伪装成 Netscape ,但是事实上它没有问题

</IfModule>

至此,网站响应速度终于是正常的了!几百毫秒内就能加载完毕,和我关注的几个博客网站的速度差不多,优化也就可以告一段落了。

2.2 优化总结

遇到这样的问题,虽然很low,但确实感到很幸运。这样一次优化过程,从无到有,从 11.29s 到 755ms,带给我的不仅仅是学会了一些优化的方法,更重要的是让我会一直注意要去优化,也就是有了优化的概念。这是本地项目完全学不到(突然想到《浪潮之巅》中的一个词“够用思想”,在本地访问不用优化也足够用了,所以就不会去进行优化)。

虽然还只是网站优化的一点皮毛,但也还是又为自己的金字塔添了一块砖。

列一下所用到的方法吧:优化HTML结构、大文件进行瘦身、压缩合并 js 和 css 文件、减少 HTTP 请求、启用服务器压缩功能。

关于 Apache Gzip 压缩可以参考下面的内容。

http://blog.csdn.net/u010552788/article/details/51052018

http://www.cnblogs.com/fly_binbin/p/4253064.html

http://www.jb51.net/article/38351.htm

3、压力测试 Apache Bench

既然优化网站响应时间搞定了,那就再学一下怎么去进行压力测试咯。

吞吐率 是指单位时间内服务器处理的请求数,通常用“reqs/s”表示。实际应用中,通常更加关心服务器并发处理的上限(即最大吞吐率)。要测试这个,用人力还是太困难了,通常使用压力测试工具。

压力测试工具有 LoadRunnderJMeterab 等,以前接触过 LoadRunner,很庞大很复杂(还是交给专业测试人员把玩吧)。ab (Apache Bench)是 Apache 附带的压力测试软件,容易使用,也足够我这种业余的使用啦。

ab 工具在 apache 主目录的 bin 目录下,在 cmd 中切换到 bin 目录就可以执行了。

ab -V 查看版本信息

ab -h 查看参数说明

虽然参数很多,不过常用下列几个:

-n:测试会话中执行的请求个数,默认执行一个请求

-c:要创建的用户数,默认创建一个用户数

-t:等待服务器响应的最大时间,默认没有时间限制

-k:使用 Keep-Alive 特性

-c:对请求附带一个 Cookie

下面放几张测试结果图(建议在内网里玩,也不要搞得太夸张免得服务器资源被耗尽。我这里用把服务器放在虚拟机上了)。

一次普通的压力测试,请求一个 300 多字节的文件

ab -c10 -n100 http://172.16.15.3/......    省略了具体路径,执行结果如下

测试的结果还是很明显的,大部分内容都比较容易理解,就说几个吧

Document Length:HTTP 响应数据的正文长度

Concurrency Level:并发用户数量

Time taken of tests:所有请求处理完成所话费的总时间

Request per second:Web服务器的吞吐率

Time per request:用户平均请求等待时间

再看一个使用 Keep Alive 特性的压力测试(会减少连接次数,就减少了 TCP 握手消耗)

ab -c10 -n100 -k http://172.16.15.3/......    仔细看,多了一个 -k 选项

相比上一个没有使用 Keep Alive 持久连接的,吞吐率还是有很大的提升!当然, 使用长连接不一定完全是正效应,还是可能会影响服务器并发性能的。

4、总结

高性能网站架构还有很多很多内容,数据库优化、缓存、负载均衡 等等。但一口也是吃不成胖子的,一点点去积累吧。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

To