共计 2150 个字符，预计需要花费 6 分钟才能阅读完成。
进行优化前，关键是剖析当前的 web 性能，找到性能瓶颈，从而确定最需改进的地方; 如果精力有限，首先将精力放在能明显提升性能的改进点上;
《高性能网站建设指南》提出了一个性能黄金法则：
只有 10%-20% 的最终用户响应时间花在了下载 HTML 文档上; 其余的 80%-90% 的时间花在了下载页面中的所有组件上。
案例说明：
优化之前的网站规模：
2 个 js、一个页头、一个页脚;3 个 css;
类型：博客类站点; 后台逻辑简单; 首页不到 10 个 sql 查询;
首页 html 文档 52kb;
第一步：后台优化，启用页面缓存;
实验站点首页后台逻辑并不复杂，不超过 10 个 Sql 查询，通过查看时间线，本站在获取 HTML 文档时，花费的时间不到总响应时间的 20%，优化之前没有使用缓存，所有的数据都是从数据库读取，这里，我们使用静态页面缓存，将首页整个页面完全的存放在缓存中(关于 YII 静态页面缓存的使用，参考这里);
通过查看 html 文档的生成时间来检测优化效果;
首字节时间为 376ms;html 生成的时间大大缩短，后台时间减少了一倍。
优化前：
优化后：
WEB 站点性能优化实践（加载速度提升 2s）性能优化 建站教程 第 2 张
第二步，DNS 域名解析加速：
DNS 解析是用户访问站点的第一步，在此之前，你的网站无法做任何事情;
站点的 DNS 解析时间不应该超过 500ms，如果站点原始 DNS 解析时间过长，就该考虑考虑使用第三方解析加速服务;
实验站点的原始 DNS 解析较慢，平均耗时 1017ms，算是非常长的; 对于 DNS 加速，可以使用 DNS 域名解析加速服务，本站点采用的国内的一款免费 DNS 加速服务 DNSPOD，效果还不错，使用后平均耗时降到 370ms;
加速前测试：平均解析时间：1017ms
使用 DNS 域名解析服务之后的测试：370ms
第三步：使用 CDN 加速;
采用第三方 CDN 加速，时间缩短到 2.1s; 从下图中看到主要的耗时在于并行下载的个数有些低，如果能够提升并行下载量的个数，那么整体加载时间就会降低;
注：个人建议，启用 CDN 最好放在最后一步，等将站点本身的优化都做完了之后，再启用 CDN 可以明显的看到优化效果。(开启 CDN 后，由于有 CDN 缓存的原因，观测站点的本身的优化就不是很方便了);
第四步，采用多台服务器提高并行加载量：
原理：一个浏览器对与同一域名的并行下载的个数默认是 2 个，HTTP.1.0 中规定的是 4 个。这样，我们可以使用不同的域名来提升下载的速度;
观察上图中的下载数量，第一次并行下载的个数是 4 个，初始认为是浏览器对于同一个域名来源的下载所限导致; 于是考虑将部分静态文件分别放在不同的服务器上; 通过把 css 和 js 放在不同服务器上; 结果并不理想，发现并未提高速度。
想到在哪曾看到过，浏览器必须得把放在页头的 css 和 js 下载完成了之后才会开始下载其它的静态组件;
关于并行下载这点上，后续将继续实验是否还有优化的空间。
第五步，合并脚本和样式表;
本站首页使用了 2 个 js 和 3 个 css。如果采用朴素复制的方式，将 js 和 css 都分别整合到一个文件中，不但操作麻烦，而且不方便后期的管理。网络上有不少合并的工具，本站采用了 CSS 和 JS 合并优化工具 -minify(下载地址：http://code.google.com/p/mini…。如果使用的 YII 框架，更有 YII 整合版(minscript Extension)，简单几步的配置，就自动将页面所有的 js 和 css 文件合并;
关于 minscript Extension 的使用，请参考：https://bitbucket.org/TeamTPG…
第六步，压缩 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 中添加：
<ifmodule mod_deflate.c>
AddOutputFilter DEFLATE html xml php js css
</ifmodule>
结论
查看最终的测试结果，整体实现了较大的性能提升，最终页面展现时间为 1.62s(测试使用的是一个第三方 web 测速工具，所有测试结果是在第三方本地无缓存的条件下进行)。仔细观察本站最后几个加载项：有一个第三方网站的广告 (加载广告的时刻，页面已经全部呈现，对用户体验影响不大)，以及 cnzz 的统计数据。这样看来，在第 12 项加载完后，整个页面就完整的呈现在用户面前，优化最终结果是 1.1s，较优化前加载速度提升 2s; 由于物理条件(虚拟机、国外站点) 所限，本次优化就到此为止(后续将在并行下载上做做文章，看是否有进一步提升空间)。
原文链接：http://www.html-js.com/articl…
