读高性能网站建设指南

性能黄金法则：只有10%~20%的最终用户响应时间花在了下载HTML文档上。其他的80%~90%时间花在了下载页面中全部组件上

规则1：减小HTTP请求

• 图片地图（Map）
• CSS Sprites(css精灵)
• 内联图片（<a><img src = "" ></a>）
• 合并脚本和合并样式表
• 图片地图鱼css sprites响应时间几乎同样，比原来为每一个图片使用连接快50%以上，将内联图片放置在外部样式表中增长了一个额外的http请求，但被缓存后能够得到额外的收获

规则2：使用内容发布网络（CDN）

• 将全部静态组件转移到CDN上

规则3：添加Expries头

• Expires字段声明了一个网页或URL地址再也不被浏览器缓存的时间     
• 长久的Expires头应该用在全部组件上，包括脚本、样式表、和Flash
• HTTP1.1引入Cache-Control头来克服expries头的限制，由于expries头使用一个特定的时间，他要求服务器鱼客户端时钟严格同步。
• Cache-Control头使用max-age指定组件被缓存多久，他以秒为单位（不支持HTTP1.1的浏览器使用无效）
• HTML文档不该该使用长久的Expires头，由于他包含动态内容

规则4：压缩组件

• 使用gzip编码来压缩HTTP响应包
• web客户端经过HTTP请求中的Accept-Encoding头来标识对压缩的支持
• Accept-Encoding:gzip,deflate
• web服务器是经过Content-Encoding头来通知web客户端
• Content-Enconding:gzip(gzip是目前最流行最有效的压缩方法)
•     使用Vary:* 或 Cache-Control:private头来禁用代理缓存，Vary:*头防止了使用浏览器使用缓存的组件，推荐使用Cache-Control:private，他是为全部浏览器禁用代理缓存。由于代理没法缓存你的内容

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

• 逐步呈现（逐步加载）
• 将样式表放在文档底部会致使浏览器中阻止内容逐步呈现
• 使用LINK标签将样式表放在文档HEAD中

规则6：将脚本放在底部

• 将脚本放在页面越靠下的地方，意味着越多的内容可以逐步地呈现
• 并行下载
• 最差的状况：将脚本放在顶部，脚本会阻塞对其后面的内容/组件的下载
• 将脚本移到页面底部

规则7：避免CSS表达式

• CSS表达式是动态设置CSS属性的一种强大（而且危险）的方式

规则8：使用外部的JavaScript和CSS

• 加载后下载

规则9：减小DNS查找

• DNS缓存和TTL（DDN查找能够被缓存起来以提升性能）

规则10：精简JavaScript

• 精简
• 从代码中移除没必要要的字符以减小其大小，进而改善加载时间的实践，在代码被精简后，全部的注释以及没必要要的空白字符（空格、制表符、换行）都将被移除
• 混淆
• 和精简同样，也会移除注释与空白，同时它会改写代码。做为改写的一部分，函数和变量名将被转换为更短的字符串，这时代码更精炼，也变得更难以阅读
• 三个主要缺点
• 缺陷：混淆过程自己颇有可能引入错误
• 维护：因为混淆会改变JavaScript字符，所以须要对任何不能改变的符号进行标记，防止混淆器修改它们
• 调试：混淆的代码很难阅读，形成产品在调式问题更加困难
• 节省
• 精简JavaScript脚本最流行的工具jsMin
• 结合使用gzip压缩以后，精简和混淆之间的差距会减小，精简脚本能够下降响应时间，但不会带来混淆的风险

规则11：避免重定向

• 重定向会使你的页面变慢
• 使用重定向会延迟整个HTML文档的传输。在HTML文档到达以前，页面中不会呈现出任何东西，也没有任何组件会被下载
• 使用Alias/mod_rewrite/DirectorySlash和直接链接代码来避免重定向

规则12：移除重复脚本

• 重复脚本损伤性能——没必要要HTTP请求和执行JavaScript所浪费的时间
• 在页面中包含相同的脚本会使页面变慢
• 在IE中，若是脚本没有被缓存，或在从新加载页面时，会产生额外的HTTP请求
• 在Firefox和IE中，脚本会被屡次求值
• 避免重复脚本
• 在模板系统中实现一个脚本管理模块

规则13：配置ETag

• ETag：实体标签（Entity Tag，ETag）是web服务器和浏览器用于确认缓存组件的有效性的一种机制
• 服务器在检测缓存的组件是否和原始服务器上的组件匹配时有两种方式
• 比较最新日期
• 比较实体标签
• ETag是惟一标识了一个组件的一个特定版本的字符串。惟一的格式约束是该字符串必须用引号引发来
• ETag还下降了代理缓存的效率

规则14：使用Ajax缓存

• DHTML：动态HTML容许在页面加载完成后，HTML页面的表现可以变化。这是JavaScript和css与浏览器的文档对象模型进行交互来实现
• Ajax：异步的JavaScript与XML。它将Web体验从“浏览页面”转变为“与应用程序进行交互
• Ajax的请求：
• 被动请求：是为了未来使用而预先发起的
• 主动请求：是基于用户当前的操做而发起的
• 确保Ajax请求遵照性能指导，尤为应具备长久的Expires头