昨天晚上看了大牛stave souders的<<High.Performance.Web.Sites>>，结合其他一些文章，对其搭建高效网站前端优化的14条原则作一下总结：
BTW: 使用ySlow工具可以更容易分析和进行网站前端优化

搭建高性能网站，前端优化的14条规则：

  1. Make fewer HTTP requests
  2. Use a CDN
  3. Add an Expires header
  4. Gzip components
  5. Put stylesheets at the top
  6. Put scripts at the bottom
  7. Avoid CSS expressions
  8. Make JS and CSS external
  9. Reduce DNS lookups
  10. Minify JS
  11. Avoid redirects
  12. Remove duplicate scripts
  13. Configure ETags
  14. Make AJAX cacheable
    http://stevesouders.com/hpws/rules.php

  1. Make fewer HTTP requests — 尽可能少的http请求
    也就是说页面中尽量少的引用外部静态资源，js、css以及图片

  2. Use a CDN — 使用CDN CDN大家应该不陌生，内容分发网络，U966的图片服务器开始负载相当的大，使用cdn之后，基本上所有的请求都被squid挡了，主服务器只有极少数的请求。即，将页面中的静态资源分布到离用户最近的网络节点上。

3.Add an Expires header — 为静态资源文件增加过期时间 设置Expires Header，说白了是将js,css, 图片, Flash等静态元素缓存在用户浏览器的缓存中，让用户通过本地缓存来更快的访问网站。用户第二次使用的时候，就不会下载全部内容，只是进行状态检查；

4.Gzip components — Gzip压缩静态资源内容 Gzip格式是一种很普遍的压缩技术，几乎所有的浏览器都有解压Gzip格式的能力，而且它可以压缩的比例非常大，一般压缩率为85%，就是说服务器端100K的页面可以压缩到25K左右的Gzip格式的数据发给客户端，客户端收到Gzip格式的数据后自动解压缩后显示页面。提高页面下载速度，减少网络传输时间，减少带宽消耗的好办法

5.Put CSS at the top — 将css放在网页顶部 能够更快渲染页面，其实这个原则我们一般都遵守的,不多说

6.Put JS at the bottom — 把js脚本尽量放到页面底部
一般情况下JS的下载是阻塞模式的，放在页面顶部会阻塞其他资源的下载

7.Avoid CSS expressions — 避免CSS表达式
因为CSS表达式需要很多资源，有时甚至会造成页面假死

8.Make JS and CSS external — 将CSS和JS使用外部的独立文件

9.Reduce DNS lookups — 减少DNS查找
(暂时没弄很明白，看文章后面摘录的一段)

10.Minify JS — 尽可能压缩你的js代码，使之更mini
使用YUI Compressor或者JSMin将JS文件进行分析，最小化，我们写的JS往往包含空格、TAB等对JS执行没用影响的字符，但是这却实实在在的增加了JS的体积，使用工具能够去除这些无用的字符，减少文件体积。但是同样带来的问题就是，JS不能有错误，另外压缩后的JS代码很难阅读，所以如何在开发时和发布时协调好就是很大的问题，为了这点我们使用不同的文件引用，在开发时(DEBUG)使用未压缩版，在发布时(RELEASE)使用压缩版。

  1. Avoid redirects — 避免无意义的跳转

12.Remove duplicate scripts — 去除重复的脚本
不光是文件，甚至是同功能的函数

  1. Configure ETags — 设置Etags,配置实体标签

摘录（关于减少DNS查找）：

详细解释下YSlow的第9点，减少DNS查找。
通常情况下按照我们的理解，静态资源文件都是放在本站点目录下的。由于以前大家的网络速度都不快，IE浏览器为了防止大量的http请求阻塞了网络连接，所以同一域名下的http请求，只允许2个并发线程，所以这就导致我们看到有的页面的图片是逐步逐步显示出来的。通过Safari的网络时间线工具就能看出来。
显而易见，为了突破这个限制，我们可以增加几个域名，从而增加并发下载，加快速度。
最好的方式是自己指定每个文件的域名，按照i1、i1、i2、i2、i3、i3、i1、i1的排列方式，但是同时还要考虑引用的文件大小，进行合理的排列，这对于团队开发就过于复杂了。我们使用了i1.dpfile.com、i2.dpfile.com和i3.dpfile.com三个域名，然后在每个调用静态资源文件地方都是用函数调用：DianPing.Common.StaticFile(“/s/js/g.mt.min.js”)，函数会根据文件进行hash，分配一个域名，这样就能最大化的散列静态文件的域名，虽然有缺点，却是比较平衡的方式。

就在我写文章的同时，Figo仔细分析了YSlow的评分标准，找到我们丢失的一分原因，也是因为第9点。第9点满分是100分，YSlow认为一个页面上最合理的是2个以内域名，每增加一个扣除5分，我们的页面有4个域名（www\i1\i2\i3），扣除了10分。这个占总比例的1/12，所以四舍五入，被扣除了1分。（不过我认为这1分还是值得的，页面加速很明显，而且DNS查找是可以缓存哒～～～）

从Safari的网络时间线工具上看到JS（橙色）的加载会阻塞其他资源的下载，所以我打算再独立一个域名j1.dpfile.com，专门加载JS文件。