的投稿:
进行优化前,关键是剖析当前的web性能,找到性能瓶颈,从而确定最需改进的地方;如果精力有限,首先将精力放在能明显提升性能的改进点上;
《高性能
优化后:
第二步,DNS
第四步,采用多台服务器提高并行加载量:
原理:一个浏览器对与同一域名的并行下载的个数默认是2个, HTTP.1.0中规定的是4个。这样,我们可以使用不同的域名来提升下载的速度;
观察上图中的下载数量,第一次并行下载的个数是4个,初始认为是浏览器对于同一个域名来源的下载所限导致;于是考虑将部分静态文件分别放在不同的服务器上;通过把css和js放在不同服务器上;结果并不理想,发现并未提高速度。
想到在哪曾看到过,浏览器必须得把放在页头的css和js下载完成了之后才会开始下载其它的静态组件;
关于并行下载这点上,后续将继续实验是否还有优化的空间。
第五步,合并脚本和样式表;
本站首页使用了2个js和3个css。如果采用朴素复制的方式,将js和css都分别整合到一个文件中,不但操作麻烦,而且不方便后期的管理。网络上有不少合并的工具,本站采用了CSS和JS合并优化工具-minify(下载地址:http://code.google.com/p/minify/)。如果使用的YII框架,更有YII整合版(minscript Extension),简单几步的配置,就自动将页面所有的js和css文件合并;
关于minscript Extension的使用,请参考:https://bitbucket.org/TeamTPG/minscript/wiki/Usage
第六步,压缩css/js/html/xml;
不同的web服务器设置方式有所差别,本站使用的Linux/apache,
在web根目录下的.htaccess文件中添加以下代码即可:
<ifmodule mod_deflate.c>
AddOutputFilter DEFLATE html xml php js css
</ifmodule>
通过firefox工具可看到,压缩前,html文档的大小是25KB;合并后的js大小为138KB;
压缩后,html文档大小为6.2KB。js大小为39.8KB;减少2/3的传输时间;
第七步,最大化的减少HTTP请求;
添加Expires头, 启用静态内容缓存,将jpg、gif等文件缓存;
方法也是在.htaccess中添加:
# Image and Flash content Caching for One Month
<FilesMatch “.(flv|gif|jpg|jpeg|png|ico|swf)$”>
Header set Cache-Control “max-age=2592360″
</FilesMatch>
结论
查看最终的测试结果,整体实现了较大的性能提升,最终页面展现时间为1.62s(测试使用的是一个第三方web测速工具,所有测试结果是在第三方本地无缓存的条件下进行)。仔细观察本站最后几个加载项:有一个第三方网站的
本次优化主要使用的是前端优化,其中大部分规则来自于这本书的指导《高性能网站建设指南》;如果你的web前端部分还没有充分优化,强烈建议读读这本书;
这是一本你只需画上三小时就能看完,但收获价值远远大于付出的一本书。
附上本书的目录:
绪言A:前端性能的重要性
第1章:规则1——减少HTTP请求
第2章:规则2——使用内容发布网络
第3章:规则3——添加Expires头
第4章:规则4——压缩组件
第5章:规则5——将样式表放在顶部
第6章:规则6——将脚本放在底部
第7章:规则7——避免CSS表达式
第8章:规则8——使用外部JavaScript和CSS
第9章:规则9——减少DNS查找
第10章:规则10——精简JavaScript
第11章:规则11——避免重定向
第12章:规则12——移除重复脚本
第13章:规则13——配置ETag
第14章:规则14——使AjaX可缓存
第15章:析构十大网站
页面大小、响应时间、YSlow等级
如何进行测试
顶: 5 踩: 0