高性能网站建设进阶指南：Web开发者性能优化最佳实践

2.4.5 虚拟内存 18
2.4.6 内存问题的疑难解答 18
2.5 总结 19
第3章：拆分初始化负载 21
3.1 全部加载 21
3.2 通过拆分来节省下载量 22
3.3 寻找拆分 23
3.4 未定义标识符和竞争状态 24
3.5 个案研究：Google日历 25
第4章：无阻塞加载脚本 27
4.1 脚本阻塞并行下载 27
4.2 让脚本运行得更好 29
4.2.1 XHR Eval 29
4.2.2 XHR注入 31
4.2.3 Script in Iframe 31
4.2.4 Script DOM Element 32
4.2.5 Script Defer 32
4.2.6 document.write Script Tag 33
4.3 浏览器忙指示器 33
4.4 确保（或避免）按顺序执行 35
4.5 汇总结果 36
4.6 最佳方案 38
第5章：整合异步脚本 41
5.1 代码示例：menu.js 42
5.2 竞争状态 44
5.3 异步加载脚本时保持执行顺序 45
5.3.1 技术1：硬编码回调（Hardcoded Callback） 46
5.3.2 技术2：Window Onload 47
5.3.3 技术3：定时器（Timer） 48
5.3.4 技术4：Script Onload 49
5.3.5 技术5：降级使用script标签（Degrading Script Tags） 50
5.4 多个外部脚本 52
5.4.1 Managed XHR 52
5.4.2 DOM Element和Doc Write 56
5.5 综合解决方案 59
5.5.1 单个脚本 59
5.5.2 多个脚本 60
5.6 现实互联网中的异步加载 63
5.6.1 Google分析和Dojo 63
5.6.2 YUI Loader 65
第6章：布置行内脚本 69
6.1 行内脚本阻塞并行下载 69
6.1.1 把行内脚本移至底部 70
6.1.2 异步启动执行脚本 71
6.1.3 使用script的defer属性 73
6.2 保持CSS和JavaScript的执行顺序 73
6.3 风险：把行内脚本放置在样式表之后 74
6.3.1 大部分下载都不阻塞行内脚本 74
6.3.2 样式表阻塞行内脚本 75
6.3.3 问题确曾发生 77
第7章：编写高效的JavaScript 79
7.1 管理作用域 79
7.1.1 使用局部变量 81
7.1.2 增长作用域链 83
7.2 高效的数据存取 85
7.3 流控制 88
7.3.1 快速条件判断 89
7.3.2 快速循环 93
7.4 字符串优化 99
7.4.1 字符串连接 99
7.4.2 裁剪字符串 100
7.5 避免运行时间过长的脚本 102
7.5.1 使用定时器挂起 103
7.5.2 用于挂起的定时器模式 105
7.6 总结 107
第8章：可伸缩的Comet 109
8.1 Comet工作原理 109
8.2 传输技术 111
8.2.1 轮询 111
8.2.2 长轮询 112
8.2.3 永久帧 113
8.2.4 XHR流 115
8.2.5 传输方式的前景 116
8.3 跨域 116
8.4 在应用程序上的执行效果 118
8.4.1 连接管理 118
8.4.2 测量性能 119
8.4.3 协议 119
8.5 总结 120
第9章：超越Gzip压缩 121
9.1 这为什么很重要 121
9.2 问题的根源 123
9.2.1 快速回顾 123
9.2.2 罪魁祸首 123
9.2.3 流行的乌龟窃听者实例 124
9.3 如何帮助这些用户 124
9.3.1 设计目标：最小化未压缩文件的尺寸 125
9.3.2 引导用户 129
9.3.3 对Gzip的支持进行直接探测 130
第10章：图像优化 133
10.1 两步实现简单图像优化 134
10.2 图像格式 135
10.2.1 背景 135
10.2.2 不同图像格式的特性 137
10.2.3 PNG的更多资料 139
10.3 自动无损图像优化 141
10.3.1 优化PNG格式的图像 142
10.3.2 剥离JPEG的元数据 143
10.3.3 将GIF转换成PNG 144
10.3.4 优化GIF动画 144
10.3.5 Smush.it 145
10.3.6 使用渐进JPEG格式来存储大图像 145
10.4 Alpha透明：避免使用AlphaImageLoader 146
10.4.1 Alpha透明度的效果 147
10.4.2 AlphaImageLoader 149
10.4.3 AlphaImageLoader的问题 150
10.4.4 渐进增强的PNG8 Alpha透明 151
10.5 优化Sprite 153
10.5.1 超级Sprite VS.模块化Sprite 154
10.5.2 高度优化的CSS Sprite 155
10.6 其他图像优化方法 155
10.6.1 避免对图像进行缩放 155
10.6.2 优化生成的图像 156
10.6.3 Favicons 157
10.6.4 Apple触摸图标 158
10.7 总结 159
第11章：划分主域 161
11.1 关键路径 161
11.2 谁在划分主域 163
11.3 降级到HTTP/1.0 165
11.4 域划分的扩展话题 168
11.4.1 IP地址和主机名 168
11.4.2 多少个域 168
11.4.3 如何划分资源 168
11.4.4 新型浏览器 169
第12章：尽早刷新文档的输出 171
12.1 刷新文档头部的输出 171
12.2 输出缓冲 173

12.3 块编码 175
12.4 刷新输出和Gzip压缩 176
12.5 其他障碍 177
12.6 刷新输出时的域阻塞 178
12.7 浏览器：最后的障碍 178
12.8 不借助PHP进行刷新输出 179
12.9 刷新输出问题清单 180
第13章：少用iframe 181
13.1 开销最高的DOM元素 181
13.2 iframe阻塞onload事件 182
13.3 使用iframe并行下载 184
13.3.1 脚本位于iframe之前 184
13.3.2 样式表位于iframe之前 185
13.3.3 样式表位于iframe之后 186
13.4 每个主机名的连接 187
13.4.1 iframe中的连接共享 187
13.4.2 跨标签页和窗口的连接共享 188
13.5 总结使用iframe的开销 190
第14章：简化CSS选择符 191
14.1 选择符的类型 191
14.1.1 ID选择符 192
14.1.2 类选择符 193
14.1.3 类型选择符 193
14.1.4 相邻兄弟选择符 193
14.1.5 子选择符 193
14.1.6 后代选择符 193
14.1.7 通配选择符 194
14.1.8 属性选择符 194
14.1.9 伪类和伪元素 194
14.2 高效CSS选择符的关键 194
14.2.1 最右边优先 195
14.2.2 编写高效的CSS选择符 195
14.3 CSS选择符性能 197
14.3.1 复杂的选择符影响性能（有时） 197
14.3.2 应避免使用的CSS选择符 200
14.3.3 回流时间 201
14.4 在现实中测量CSS选择符 202
附录：性能工具 205
索引 221

.　　

.　　规则12：删除重复的脚本。
　　规则13：配置ETag。
　　规则14：使Ajax可缓存。
　　我称之为“规则”是因为它们易于实施。看看2007年3月份美国10大网站（注1）的统计数据：
　　两个站点使用CSS sprites。
　　26％的资源添加了Expires头。
　　5个站点压缩了HTML、JavaScript和CSS。
　　4个站点精简了JavaScript。
　　2009年4月份的统计数据显示这些规则渐渐地获得了青睐：
　　9个站点使用了CSS sprites。
　　93％的资源添加了Expires头。
　　10个站点都压缩了HTML、JavaScript和CSS。
　　9个站点精简了JavaScript。
　　《高性能网站建设指南》中的规则现在依旧适用，并且大多数Web公司都应该从这些规则做起。我们已经有所进展，但在这套原始规则之上还有很多工作要做。
　　然而，Web没有停滞不前，我们必须迎头赶上。虽然《高性能网站建设指南》中的14条规则依旧适用，但网页内容和Web 2.0应用程序的增长带来了一系列新的性能挑战。本书提供了开发者所需的能为新一代网站提速的最佳实践。
　　本书的所有章节由3部分组成：JavaScript性能（第1~7章）、网络性能（第8~12章）和浏览器性能（第13~14章）。附录介绍了一组最好的性能分析工具。
　　以下6章是由特约作者完成的：
　　第1章 理解Ajax性能，由Douglas Crockford完成。
　　第2章 创建快速响应的Web应用，由Ben Galbraith 和 Dion Almaer完成。
　　第7章 编写高效的JavaScript，由Nicholas C. Zakas完成。
　　第8章 可伸缩的Comet，由Dylan Schiemann完成。
　　第9章 超越Gzip压缩，由Tony Gentilcore完成。
　　第10章 图像优化，由Stoyan Stefanov 和 Nicole Sullivan完成。
　　这些作者都是上述各个领域的专家，我想请你直接听到他们的声音。为了便于识别这些章节，我在每章的开头都注明了特约作者的名字。
　　JavaScript性能
　　JavaScript Performance
　　在对当今网站的分析中，我经常能体会到JavaScript是实现高性能Web应用程序的关键，所以我以如下章节作为本书的开始。
　　第1章《理解Ajax性能》由Douglas Crockford所著。Doug介绍了Ajax如何改变浏览器和服务器的交互方式，以及开发者如何理解这种新的关系从而能恰当地抓住提升性能的时机。
　　第2章《创建快速响应的Web应用》是由 Ben Galbraith 和 Dion Almaer共同完成的，它使提升JavaScript性能回归到真正重要的事情上：用户体验。如今的Web应用程序在按钮点击事件发生后需要调用复杂的函数，必须在迫使浏览器能胜任的基础上去评估。那些理解代码对响应时间的影响程度的程序员更容易编写成功的Web应用程序。
　　我编写了接下来的4章。它们都集中在处理JavaScript的机制上——封装和加载的最佳方式，以及将其插入页面的最佳位置。第3章《拆分初始化负载》介绍了当今许多Web应用程序面临的处境：在页面初始化时下载一个庞大的JavaScript，这不仅会阻塞渲染还会阻塞后续资源的下载。为了更高效的加载，对这个庞大的JavaScript进行拆分是关键。
　　第4章和第5章相辅相成。在眼下流行的浏览器中，外部脚本会阻塞页面中剩下的所有资源。第4章《无阻塞加载脚本》介绍了在加载外部脚本时如何避免这些造成阻塞的陷阱。当行内脚本依赖外部脚本时，异步加载它们是一个挑战。幸运的是，有几种技术可以整合行内脚本和它们所依赖的异步加载的脚本。这些技术在第5章《整合异步脚本》做介绍。第6章《布置行内脚本》介绍了应用行内脚本的最佳性能实践，特别是它们对并发加载的影响。
　　我认为Nicholas C. Zakas所写的第7章《编写高效的JavaScript》是Doug所写的第1章的补充。Doug介绍了Ajax的全貌，而Nicholas则专注于加速JavaScript的几种具体技术。
　　网络性能
　　Network Performance
　　Web应用程序和桌面应用程序不同——每次使用它们时都必须通过互联网进行下载。Ajax的采用产生了一种服务端和客户端数据通信的新形式。毫不夸张地说，在一些互联网速度尚不理想的新兴市场中，Web产业还蕴含着一些巨大的增长机遇。所有这些因素都突显了提升网络性能的必要性。
　　在第8章《可伸缩的Comet》中，Dylan Schiemann 介绍了一个超越Ajax的架构，它为诸如聊天和文档协助之类的实时应用提供了大容量、低延迟的实时连接。
　　第9章《超越Gzip压缩》介绍了为何打开Gzip压缩并不足以保证用最佳的方式发送网站内容。Tony Gentilcore 透露了一个鲜为人知的现象，全球有15%的互联网用户因无法使用Gzip压缩而严重降低了网络性能。
　　Stoyan Stefanov 和 Nicole Sullivan联合贡献了第10章《图像优化》。它为该主题提供了彻底的解决方案。本章回顾了所有的流行图像格式，展现了很多图像优化技术，介绍了如何对图像压缩工具进行选择。
　　剩下的章节由我完成。第11章《划分主域》提醒我们当今流行浏览器和下一代浏览器的连接限制。它包括了通过多个域来成功划分资源的技术。
　　第12章《尽早刷新文档的输出》全面地介绍了在完整的HTML文档到达之前使用块编码渲染页面的好处与缺陷。
　　浏览器性能
　　Browser Performance
　　iframe是一种在网页中嵌入第三方内容的方便且常用的技术，但它们会带来开销。第13章《少用iframe》介绍了iframe的缺点并提供了一些替代方案。
　　第14章《简化CSS选择符》介绍了复杂选择符影响性能的原理，并在客观的分析后指出使用时最需要注意的情况。
　　附录《性能工具》介绍了我推荐的用于分析网站和找出急需改进性能之处的工具。
　　本书约定
　　Conventions Used in This Book
　　本书使用下列排版约定：
　　等宽（Constant width）
　　表示命令、选项、开关、变量、属性（attribute）、键值、函数、类型、类、名字空间、方法、模块、属性（property）、参数、值、对象、事件、事件处理程序、XML标签、HTML标签、宏、文件内容和命令的输出。
　　等宽粗体（Constant width bold）
　　表示实际中应由用户输入的命令或其他文本。
　　这个图标表示提示、建议或一般说明。
　　这个图标表示警告或提醒。
　　意见和问题
　　Comments and Questions
　　我们已尽力核验本书所提供的信息，尽管如此，仍不能保证本书完全没有瑕疵，而网络世界的变化之快，也使得本书永不过时的保证成为不可能。如果读者发现本书内容上的错误，不管是赘字、错字、语意不清，甚至是技术错误，我们都竭诚虚心接受读者指教。如果您有任何问题，请按照以下的联系方式与我们联系。
　　奥莱利技术咨询（北京）有限公司
　　北京市 西城区 西直门 南大街2号 成铭大厦C座807室
　　邮政编码：100080
　　网页：http://www.oreilly.com.cn
　　E-mail：info@mail.oreilly.com.cn
　　O'Reilly Media, Inc
　　1005 Gravenstein Highway North
　　Sebastopol, CA 95472
　　800-998-9938 (in the United States or Canada)
　　707-829-0515 (international/local)
　　707-829-0104 (fax)
　　与本书有关的在线信息如下所示：
　　http://www.oreilly.com/catalog/9780596522308（原书）
　　http://www.oreilly.com.cn/book.php?bn= 9787121105449（中文版）
　　北京博文视点资讯有限公司（武汉分部）
　　湖北省 武汉市 洪山区 吴家湾 邮科院路特1号 湖北信息产业科技大厦1402室
　　邮政编码：430074
　　电话： (027)87690813 传真：(027)87690813转817
　　读者服务网页：http://bv.csdn.net
　　E-mail：
　　reader@broadview.com.cn（读者信箱）
　　bvtougao@gmail.com（投稿信箱）
　　代码示例
　　Using Code Examples
　　一般情况下，你无须征求我们同意即可在程序或文档中使用本书的代码，除非复制使用大量代码。比如，写程序时使用几段本书的代码无需许可；将书中的示例刻录成光盘分发或销售则需要许可。援引示例代码来回答问题也不用许可，但在你的产品文档中使用大量的示例代码则需要许可。
　　我们欢迎但不强求注明引用注释。一条引用注释通常包括标题、作者、出版者和国际标准书号（ISBN）。例如：“Even Faster Web Sites, by Steve Souders. Copyright 2009 Steve Souders, 978-0-596-52230-8。”
　　如果你觉得自己对示例代码的使用超出了合理情况或以上许可的范围，请随时联系我们permissions@oreilly.com。
　　致谢
　　Acknowledgments
　　首先我要感谢本书的特约作者：Dion Almaer、Doug Crockford、Ben Galbraith、Tony Gentilcore、Dylan Schiemann、Stoyan Stefanov、Nicole Sullivan和Nicholas Zakas。他们成就了这本特别的书。他们每个人都是极具实力的专家，其中大多数人都自己写作过图书。他们的宝贵经验，为我们带来了一些独特的好东西。
　　
　　我要感谢所有的审阅者：Julien Lecomte、Matthew Russell、Bill Scott和Tenni Theurer。此外特别要感谢Eric Lawrence和Andy Oram。Eric校对了本书和《高性能网站建设指南》。他在两本书中都提供了极其深入且专业的反馈。Andy是我的前一本书《高性能网站建设指南》的编辑，他负责改善本书，使每一句、每一节、每一章都畅通易读，相比别人而言他的工作可谓辛苦至极。
　　特别感谢我的编辑Mary Treseler。很多编辑都经历过与多位作者协作整理同一本书的挑战。我很高兴她接手了这个项目，并帮助指导我们将大量想法顺利地呈现在你手上的这本书中。
　　在谷歌我与一群热爱研究Web性能的人一块工作。Tony Gentilcore是Fasterfox的创造者和第9章的作者。他也是我的同事，我们一天得讨论好几次关于Web性能的看法。Steve Lamm、Lindsey Simon和Annie Sullivan经常与我一同工作，他们热衷于性能优化。据我所知，其他对Web性能有贡献的“Googler”包括Jacob Hoffman-Andrews、Kyle Scholz、Steve Krulewitz、Matt Gundersen、Gavin Doughtie和Bryan McQuade。
　　本书中许多见解来源于我在Google以外的朋友。他们知道，如果给我一个改善性能的思路，这个思路很可能会见诸于一本书或一篇博文。这个性能亲友团成员包括Dion Almaer、Artur Bergman、 Doug Crockford、Ben Galbraith、Eric Goldsmith、Jon Jenkins、Eric Lawrence、Mark Nottingham、Simon Perkins、John Resig、Alex Russell、Eric Schurman、Dylan Schiemann、Bill Scott、Jonas Sicking、Joseph Smarr和Tenni Theurer。
　　这份名单难以面面俱到，对此我感到很抱歉。感谢他们抽出宝贵时间给我发送电子邮件或在会议上和我交流，他们的经验教训与成功案例令我坚持下去，重要的是我知道了有这么多人都在致力于提高Web的速度。
　　谢谢你们，我的父母，你们一直以来以身为作家的儿子为豪。尤其要谢谢我的妻子和3个女儿，我向你们保证现在开始休假。