基本信息

编辑推荐

内容简介

作译者

目录

译者序

前言

媒体评论

基本信息

原书名：Even Faster Web Sites: Performance Best Practices for Web Developers

原出版社： O'Reilly Media

作者：Steve Souders

译者：口碑网前端团队

丛书名： 电子工业出版社O'Reilly系列

出版社：电子工业出版社

ISBN：9787121105449

出版日期：2010 年4月

开本：16开

页码：231

版次：1-1

编辑推荐

《高性能网站建设指南》姊妹篇。

作者Steve Souders是Google Web性能布道者和Yahoo！前首席性能工程师。

在本书中，Souders与8位专家分享了提升网站性能的最佳实践和实用建议

内容简介

本书是《高性能网站建设指南》姊妹篇。作者steve souders是google web性能布道者和yahoo！前首席性能工程师。在本书中，souders与8位专家分享了提升网站性能的最佳实践和实用建议，主要包括：理解ajax性能，编写高效的javascript，创建快速响应的应用程序、无阻塞加载脚本， 跨域共享资源，无损压缩图片大小，使用块编码加快网页渲染；避免或取代iframe的方法，简化css选择符，以及其他技术。

性能是任何一个网站成功的关键，然而，如今日益丰富的内容和大量使用ajax的web应用程序已迫使浏览器达到其处理能力的极限。steve souders是googleweb'哇能布道者和前yahoo!首席性能工程师，他在本书中提供了宝贵的技术来帮助你优化网站性能。

souders的上一本畅销书《高性能网站建设指南》 (high performance web sites)震惊了web开发界，它揭示了在客户端加载一个网页的时间大约占用了总时耗的80％。在《高性能网站建设进阶指南》 (even faster web sites)这本书中，souders与另外8位专家级特约作者提供了提升网站性能的最佳实践和实用建议，主要包括以下3个关键领域。

·javascript——你将获得忠告：理解ajax性能、编写高效的javascript、创建快速响应的应用程序、无阻塞加载脚本等。

·网络——你将学到：跨域共享资源、无损压缩图片大小，以及使用块编码加快网页渲染。

·浏览器——你将发现：避免或取代iframe的方法、简化css选择符，以及其他技术。

对于当前的富媒体网站和web 2．0应用程序来说，速度至关重要。在本书中，你将学习如何节省宝贵的网站加载时间，使网站更快地响应用户的请求。

作译者

Steve Souders在Google从事网络性能和开放源码计划方面的工作。他是YSlow(Firebug性能分析扩展)的创造者，并且担任Velocity(O'Reilly的网络性能和业务运营会议)的联合主席。Steve经常在会议上或者高级别公司中发言，包括微软、亚马逊、MySpace、LinkedIn、Facebook。

目录

致谢 i

前言 iii

第1章：理解ajax性能 1

1 1 权衡 1

1 2 优化原则 2

1 3 ajax 4

1 4 浏览器 4

1 5 哇！ 5

1 6 javascript 6

1 7 总结 6

第2章：创建快速响应的web应用 7

2 1 怎样才算足够快 9

2 2 测量延迟时间 10

2 2 1 当延迟变得很严重时 12

2 3 线程处理 12

2 4 确保响应速度 13

2 4 1 web workers 14

2 4 2 gears 14

2 4 3 定时器 16

2 4 4 内存使用对响应时间的影响 17

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 降级到/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

译者序

“信息网络的扩展正在为我们的星球建立一个新的神经系统”，而Web正是我们与这个系统对接的最重要平台。现在，信息与用户量在Web平台上呈爆炸式增长，用户与Web界面的交互越来越复杂，会话时间也越来越长，速度已经成为Web产品使用体验好坏和市场成败的最重要指标之一。在Google，网页呈现速度慢500毫秒将丢失20%的流量；在Yahoo!，慢400毫秒将丢失5%~9%的流量；在Amazon，慢100毫秒将丢失1%的交易量……反之，网站速度越快，越有利于用户汇聚、流量增长及交易量的上升。所以作为Web开发者，我们不会满足现状，要让网页变得更快更好。

本书作者Steve Souders在他上一部震惊业界的大作《高性能网站建设指南》中告诉我们，Web的80%~90%的性能由前端决定，并为提升Web性能设置了14条规则。本书中，Souders与8位Web开发界顶级大牛通力合作，一起向我们传授让网站速度更快的思想和原则，以及相应的技术和工具。它是上一部作品的进阶之作，如果说上一部作品使Web开发者有机会实现高性能的网站以满足当前用户的需要，那么本书将帮助我们立足现在更着眼于未来，以实现超出用户期望的速度体验。

Web的高速发展让开发者应接不暇，开发者应该把智慧、时间和精力放在用户最需要的地方，因此在做性能优化时不能盲目行动、捉小放大，需要事前有效评估找到重点，事后建立监控和保证机制，把有规律的、重复的、精确的工作交给机器去做。9位大牛把众多的思想、原则、方法和自动化工具融汇到这本书中，让Web开发者有机会站在巨人的肩上，借助于全球业界的最新成果，用自己的智慧、行动和坚持开发出令人赞叹的Web产品来。

如果你稍加留心就会发现，这两本书副标题的变化很有趣，第一本书的副标题是“前端工程师技能精髓”，而本书的是“Web开发者性能优化最佳实践”。Web性能优化不只是前端工程师的工作，而是需要所有Web开发者协作完成。在实际工作中，如果没有人关注Web性能，那么，不管我们作为Web开发者的哪种角色都应该挺身而出勇于担当，不仅要担当建设高速网站的责任，还要担当Web性能优化的布道义务，团结一切可以团结的力量。这是我们所有Web开发者的使命。在口碑网我们已经开始这样做了，前端工程师与对此有兴趣的后端工程师和产品经理一起组建了一个虚拟的Web性能优化团队，在完成工作之余，一起学习、研究、分享、布道和推动性能优化项目。虽然刚刚开始，但是已经有了一些令人欣喜的成果，这就是团结的力量。

本书由口碑网前端团队的鄢学昆鸟（三七）、郑旭东（正旭）、刘志涛（钨龙）、崔明达（灵佑）和姜凡（展炎）协作译成。翻译的过程也是自我学习、应用实践和总结提升的过程，我们深感本书的博大精深，同时也感到自己知识面的浅薄狭窄。我们把在学习和实践本书思想及方法过程中收获的心得和相关资料作为译注补充在译文中，希望会对大家有所帮助。我们深信学习本书正是学习大牛思想、提升专业技能的最好途径之一，把它的精华最精确地传递给每位读者是我们现在的想法和最大动力。

感谢博文视点引进如此高品质的图书，这让中国的Web开发者可以从中受益，进而为更多用户提供更快速的Web使用体验。除了封面上列出的译者外，还有很多人为翻译这本书倾注了智慧和汗水。编辑徐定翔老师，包容了我们交稿的一次次延期，正是由于他的信任、帮助、支持和耐心指导才让我们能有这样一次边学习、边成长、边共享的宝贵经历。编辑白爱萍老师负责译稿的统稿编加，她的专业、仔细和辛勤工作保证了我们阅读本书时的良好体验。可爱的同事林枝萍（般若）、高嘉峻（伯灵）、全鑫（泉心）、闻明（阿苏）、沙峰（善朋）、曾焕数（合沙）、王维锋（元天）、严斌锋（邦彦）、何莹莹（冰浠）、周炼（灵落）等，给了我们热情的建议和细心的校对，有效地提升了本书的品质。要特别感谢淘宝网前端团队的赵泽欣（小马）、王保平（玉伯）和郑叶飞（圆心）3位同学，他们在百忙之中帮我们校对重要章节，解决疑难问题。如果没有家人和同伴的支持，是很难做好翻译的，在此向所有关心和支持我们的朋友表示衷心的感谢！

本书中有6个章节是由以下几位作者完成的。

Dion Almaer是Ajax社区的先驱Ajaxian com的创建人之一，目前在Mozilla领导一个新团队研发基于Web的开发者工具（译注1），他已为之努力多年。在这本书里他与老搭档Ben Galbraith再次合作，无论是之前在Ajaxian还是在现在的Mozilla（译注2），他俩一直合作得很愉快。自Gopher协议发布以来，Dion编写过相当多的Web应用程序，经常在世界各地演讲，发表了大量文章并出版过一本书。当然你也可以去阅读他的博客，那儿有更多内容，你甚至能了解他的生活及对世界的思考。

Douglas Crockford出生于明尼苏达州，6个月后因无法忍受当地的严寒而被家人带离该州。 Douglas自发现计算机这好玩意儿后就抛弃了原本很有前途的电视机研发职业。他爱好广泛、博学多才，涉足过学习系统、小型商务系统、办公自动化、游戏、互动音乐、多媒体、移动娱乐、社会化系统和编程语言等多个领域。出人意料的是他还发明了史上最烂编程语言——Tilton。他最为人知的贡献是发掘了JavaScript的精华部分，这非常重要，却也让人意想不到。他的另一重大贡献是发现数据交换格式JSON（JavaScript Object Notation）。最近他正致力于将网络变成安全可靠的软件分发平台，并已着手实施这一计划。

Ben Galbraith是Mozilla开发者工具的联合总监，也是Ajaxian com的创建人。Ben对商业和技术一直都极感兴趣，6岁那年就写出了他的第一个计算机程序，10岁开创第一个商业项目，12岁投身于IT业。他在世界范围内开展了数百次的技术演讲，组织过多场技术研讨会，并与他人合著图书超过6本。Ben的职业生涯也相当精彩丰富，从商业管理到技术工作，从CEO到CIO到CTO到首席软件设计师，从医疗到出版到媒体到制造业到广告到软件产业，角色众多、从业甚广。现在他和妻子及5个孩子住在加州的Palo Alto。

Tony Gentilcore是Google公司的软件工程师，Google首页和搜索结果页能快速呈现在用户面前就是他的杰作。他认为编写Web性能工具和研究相关技术是件非常愉悦的事。Tony也是广受欢迎的Firefox扩展Fasterfox的开发者。

Dylan Schiemann是SitePen com的CEO，也是Dojo工具包的编写者之一，还是开放网络（Open Web）的技术和分析专家。Dojo是一个开源的用于快速构建Web站点和应用的JavaScript工具包。在他的引导下，SitePen从一个小型研发公司成长为如今业界领先的开发工具供应商，拥有众多资深软件工程师，为用户提供专业的咨询服务、一流的培训及外包业务。Dylan致力于研发的坚定信念已使SitePen成为诸如Dojo、cometD、Direct Web Remoting (DWR)和Persevere等开拓性开源Web开发工具包和框架的主要贡献者和创作者。在SitePen之前，他还为Renkoo、Informatica、Security FrameWorks和Vizional Technologies等公司开发过Web应用。他还是Comet Daily，LLC的合伙创始人及Dojo基金董事会成员和Aptana咨询委员会成员。Dylan在加州大学洛杉矶分校获物理化学硕士学位，在蒂尔大学取得数学学士学位。

Stoyan Stefanov是Yahoo！前端工程师，主要关注Web应用的性能。他也是性能扩展工具——YSlow2 0的架构设计师和Smush it图像优化工具研发者之一。Stoyan同时还是演说家、作家（Packt出版社出版了他的《Object-Oriented JavaScript》）　Nicole Sullivan是一位Web技术的布道者、前端性能优化顾问和CSS专家。她创建了开源项目——面向对象的CSS（Object-Oriented CSS），它解决了如何规划CSS以应对成千上万的访问者的难题。她还与W3C合作重新设计其测试版，也是Smush it图像优化工具的研发者。她对CSS、Web标准和可扩展的大型商业网站前端架构充满激情。Nicole在世界各地的会议上发表关于性能优化的演讲，最近的会议是The Ajax Experience、ParisWeb 和 Web Directions North。她的博客是

Nicholas C Zakas是《Professional JavaScript for Web Developers》（第二版，Wrox出版社，中文版《JavaScript高级程序设计》）的作者，也是《Professional Ajax》（第二版，Wrox出版社，中文版《Ajax高级程序设计》）的合著作者。Nicholas是Yahoo!主页的首席前端工程师并参与了YUI的开发。他的博客地址是

前言

警惕（Vigilant）：警觉地关注，主要是为了避免危险。

任何人阅读了本书或前一本书《高性能网站建设指南》，都会理解网站速度缓慢的危害性：饱受挫折的用户、负面的品牌认知、膨胀的运营开支及缩水的财务收益。我们必须不断努力使网站更快。当我们取得进步的时候，同时也意味着开始落后了。我们必须处处留心，每一次修复Bug、增加新功能和升级系统都可能对网站的速度产生影响。我们必须时时关注，今天实现的性能提升很可能明天就会失效。因此，必须保持警惕。

守夜（Vigil）：节日的前一刻仍然保持警觉。

根据vigil的拉丁语义，守夜意味着我们应该保持警觉直到庆祝真正开始。网站的确可以变得更快，甚至飞快，我们可以为自己关心和专注所获得的成果庆祝。这是真的！使网站速度更快是可以实现的。本书介绍的技术已经让一些风靡全球的网站的加载时间减少了60%，它们同样也将造福小型网站，而最终是用户从中受益。

蜘蛛侠（Vigilante）：自我任命的正义使者。

作为开发者，我们有责任去捍卫用户的利益。你应该在自己的网站上充当性能的布道者，实施这些技术，并与同事分享这本书，为更快的用户体验而战。如果你的公司没有人专门负责性能，那么任命自己来担当这种角色吧。性能蜘蛛侠——听起来很不错。

本书的组织

How This Book Is Organized

这本书是对我第一本书《高性能网站建设指南》（O'Reilly出版）的跟进。在那本书中，我为Web性能提升设置了14条规则：

l规则1：尽量减少HTTP请求。

l规则2：使用CDN。

l规则3：添加Expires头。

l规则4：采用Gzip压缩组件。

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

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

l规则7：避免CSS表达式。

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

l规则9：减少DNS查询。

l规则10：精简JavaScript。

l规则11：避免重定向。

媒体评论

“《高性能网站建设进阶指南》，有最新的研究成果，能激发你的智慧，让网站快如闪电。我喜欢这本书的风格——许多主题的作者都是在该领域进行过深入研究的最受尊敬的权威专家。我们团队中每个人都需要有一本。”

——Bill Scott，Netflix总监和UI工程师