《高性能网站建设指南》总结

简介: 性能黄金法则：只有10%-20%的最终用户相应时间花在了下载HTML文档上面，其余的80%-90%时间花在了下载页面中的所有组件上。既是你的文档没有改变，缓存到了浏览器中，正常情况下，浏览器也会与服务器产生一次通信。

这本书确实不错，总结的都很有道理，虽然有很多自己都没体验过，还有的都没听过呢，嘻嘻…………毕竟是大牛嘛！佩服！推荐阅读！下面是笔记，主要有14个原则需要注意一下，还有几个查看工具！自己看下吧！

规则1：减少HTTP请求。

规则2：使用内容发布网络。

规则3：浏览器缓存。

规则4：压缩组件。

规则5：将样式表放在顶部。

规则6：将脚本放在底部。

规则7：避免css表达式。

规则8：使用外部js和css。

规则9：减少DNS查找。

规则10：精简js。

规则11：避免重定向。

规则12：移除重复脚本。

规则13：配置ETag。

规则14：使用ajax。

性能黄金法则：只有10%-20%的最终用户相应时间花在了下载HTML文档上面，其余的80%-90%时间花在了下载页面中的所有组件上。

既是你的文档没有改变，缓存到了浏览器中，正常情况下，浏览器也会与服务器产生一次通信。

当浏览器看到相应中有一个Expires头时，它就会和相应的过期时间组件一起保存到其缓存中。只要组件没有过期，浏览器就会使用缓存版本而不会进行任何HTTP请求。

HTTP构建在TCP智商。

在管道被广泛应用之前，Keep-Alive依然是浏览器和服务器使用HTTP的socket连接最有效的方式。这对于HTTPS来说甚至更重要，因为建立新的安全socket连接要消耗更多的时间。

规则1解决方法：图片地图，Css Sprite，内联图片和脚本，样式表的合并。运用这些技术，估计页面响应时间会减少到50%左右。

图片地图在淘宝中很是蛮常见的，就是用一个图来挂N个连接地址，通过分析点击图片的坐标和位置来产生连接，这样，会减少服务器的连接。

图片地图有很多难点，不太容易控制，但是，如果你正在导航栏或者其他超链接中使用多个图片，将他们转换为图片地图是加速页面的最简单的方式。

Css Srprites是利用css来控制的，主要是控制背景图片的坐标来控制图片的显示，可以将毫无关联的图片集成到一张图片中。当然，合成图片有很大的难度，需要专业人员做，还有，制作成本可能较高。但是可以考虑在那些不经常变动的地方使用它，例如，如果需要在页面中为背景，按钮，导航栏，连接等提供大量图片，css sprites绝对是一种优秀的解决方案，干净的标签，很少的图片和很短的相应时间。

在站点发布时，将多个js文件，和多个css文件合并成单个或者尽可能的合并，是有好处的。

规则2：使用内容发布网络：是一组分布在多个不同地理位置的web服务器，用于更有效的向用户发布内容。

除了缩短响应时间之外，cdn还可以带来其他优势。他们的服务包括备份，扩展存储能力和进行缓存。CDN还有助于缓和web流量峰值压力。

规则3：使用Expires头

长久的Exxpires头最常用于图片，但应该将其用在所有组件上，包括脚本，样式表和flash。很多顶级网站现在还没做到这一点。

web服务器使用Expires头来告诉web客户端它可以使用一个组件的当前副本，知道指定的时间位置。

对于Expires头来说，它使用了一个特定的时间，它要求服务器和客户端的时钟严格同步。

换种方式，Cache-Control使用max-age指令指定组件被缓存多久。

跨浏览器改善缓存的最佳解决方案就是使用ExpiresDefault设置的Expires头。

解决获取最新版本的文档的最有效方式是:修改其所有连接，这样，全心的请求将从原始服务器下载最新的内容。

规则4：压缩组件

web客户端可以通过HTTP请求中的Accept-Encoding头来标识对压缩的支持。

web服务器通过响应中的Content-Encoding头来通知Web客户端。

gzip是最流行和最有效的压缩方式。

在使用压缩组件时，比较常见的压缩有：HTML文档压缩，脚本和样式表压缩。

配置gzip时使用的模块取决于apache的版本。

因为某些浏览器不支持压缩功能，所以，可以通过添加白名单的方式，为指定浏览器压缩！

规则5：将样式表放在顶部

将样式表放在文档底部会导致在浏览器中组织内容逐步呈现。为避免当样式变化时重绘页面中的元素，浏览器会阻塞内容逐步呈现。

这个规则对于加载页面所需要的时间没有太多影响，它影响更多的是浏览器对这些组件顺序的反映。

在IE中，将样式表放在文档底部会导致摆平问题。

如果样式表仍在加载，构建呈现树就是一种浪费，因为在所有样式表加载并解析完毕之前，无需绘制任何东西，否则，在其准备好之前显示内容会遇到FOUC（无样式内容的闪烁）问题。

规则6：将脚本放在底部

HTTP1.1规范建议浏览器从每个主机名并行的下载两个组件。

如果将脚本放在页面顶部，正如通常的情况那样，页面中的所有东西都位于脚本之后，整个页面的呈现和下载都会被阻塞，知道脚本加载完毕。

放置脚本的最好地方就是页面的底部，这不会阻止页面内容的呈现，而且页面中的可视组件可以今早下载。

规则7：避免CSS表达式

css表达式是动态设置css属性的一种强大而且又危险的方式。

ie中不支持min-width。

有些规则用于处理页面加载之后的性能问题，这通常是由CSS表达式引起的问题。然而，有些时候，css表达式也会影响页面的加载时间。

在没有深入了解底层影响的情况下使用css表达式是很危险的。

规则8：使用外部的javascript和css

对于内联和外联来说，内联相对是快点的。但是尽管结果如此，现实中还是推荐使用外部文件会产生较快的页面。

如果js和css是外部文件，浏览器就能缓存他们，HTML文档的大小减小，而且不会增加http请求的数量。

如果你的网站的本质上能够为用户带来高完整缓存绿，使用外部文件的收益就越大，如果大不可能产生完整缓存，则内联是更好的选择。

外部文件可以极大的提高组件的重用率。

规则9：减少DNS查找

DNS查找可以被缓存起来提高性能。

在用户请求了一个主机名之后，DNS信息会留在操作系统的DNS缓存中，之后对于该主机名的请求将无需进行过多的DNS查找，至少短时间内不需要。

重启浏览器会清空浏览器缓存，但是不会清空DNS Client缓存。

当网络操作中心尝试通过DNS变化来转移流量时。如果一个IP上的流量已经被专一走，但该IP扔在运行，则使用旧的DNS记录的IE用户至少需要30分钟才能更新DNS。访问站点的活跃用户会一直使用旧的ip地址而不会更新DNS，指导发生错误。

当客户端的DNS缓存为空，DNS查找的数量与web页面中惟一主机名的数量相等。减少唯一主机名的数量就可以减少DNS查找的数量。这方面的优秀事例是Google，它的页面只需要一次DNS查找。

规则10：精简JS代码

精简js代码的最流行的工具是JSMin.JSMin的源代码以C,C#,Java,Javascript,Perl,Php,Python和Ruby等语言公开。

内联的js块也应该精简，尽管对于现金的网站这一实践的效果并不很明显。

精简css能够带来的节省通常要小于精简js，因为通常css中的注释和空白比js少。

规则11：避免重定向

重定向用于将用户从一个URL重新路由到另一个URL，重定向有很多种。

重定向会使页面变慢。

重定向是解决很多问题的简单方式，但最好使用其他不会减慢页面加载速度的解决方案。

规则12：移除重复脚本

即便脚本可以缓存，当用户重新加载页面时也会产生额外的HTTP请求。

在页面中多次包含相同的脚本会使页面变慢。

在IE中，如果脚本没有被缓存，或者在重新加载页面时，会产生额外的HTTP请求。

在FF和IE中，脚本会被多次求值。

规则13：配置ETag

实体标签，是web服务器和浏览器用于确认缓存组件的有效性的一种机制。

ETag在HTTP1.1中引入。ETag是唯一标识了一个组件的一个特定版本的字符串。唯一的格式约束是该字符串必须用引号引起来，原始服务器使用ETag相应头来指定组件的ETag.

iis和apache的etag是不一样的。如果etag不匹配，用户丸不会按照etag的设计计划那样接受到更小更快的304响应。

规则14：使ajax可缓存。

用户是否需要等待的关键因素在于ajax请求是被动还是主动的。被动请求是为了将来使用预先发起的。

主动请求是基于用户当前的操作而发起的。

确保ajax请求遵守性能知道，尤其应具有长久的Expires头。

IBM Page Detailer可以用来对你的网页进行抓包，分析。

用与分析页面性能的主要工具是YSlow!