高性能网站建设指南：前端工程师技能精髓
ISBN 978-7-121-25887-9
2015年5月出版
定价：55.00元
172页
16开
内容提要
《高性能网站建设指南：前端工程师技能精髓》结合Web 2.0以来Web开发领域的最新形势和特点，介绍了网站性能问题的现状、产生的原因，以及改善或解决性能问题的原则、技术技巧和最佳实践。重点关注网页的 行为特征，阐释优化Ajax、CSS、JavaScript、Flash和图片处理等要素的技术，全面涵盖浏览器端性能问题的方方面面。在《高性能网站建 设指南：前端工程师技能精髓》中，作者给出了14条具体的优化原则，每一条原则都配以范例佐证，并提供了在线支持。全书内容丰富，主要包括减少HTTP请 求、Edge Computing技术、Expires Header技术、gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、 删除重复JavaScript的技巧、关闭ETags的技巧、Ajax缓存技术和最小化技术等。
《高性能网站建设指南：前端工程师技能精髓》适合Web架构师、信息架构师、Web开发人员及产品经理阅读和参考。
目录
推荐序 xiii
前言 xv
绪言A 前端性能的重要性 1
跟踪Web页面性能 1
时间花在哪儿了? 3
性能黄金法则 4
绪言B HTTP概述 6
压缩 7
条件GET请求 7
Expires 8
Keep-Alive 8
更多信息 9
第1章 规则1——减少HTTP请求 10
图片地图 10
CSS Sprites 11
内联图片 13
合并脚本和样式表 15
小结 16
第2章 规则2——使用内容发布网络 18
内容发布网络 19
节省 20
第3章 规则3——添加Expires头 22
Expires头 22
Max-Age和mod_expires 23
空缓存VS完整缓存 24
不仅仅是图片 25
修订文件名 27
示例 28
第4章 规则4——压缩组件 29
压缩是如何工作的 29
压缩什么 30
节省 31
配置 31
代理缓存 33
边缘情形 34
压缩的实际效果 35
第5章 规则5——将样式表放在顶部 37
逐步呈现 37
sleep.cgi 38
白屏 39
无样式内容的闪烁 43
前端工程师应该做什么? 43
第6章 规则6——将脚本放在底部 45
脚本带来的问题 45
并行下载 46
脚本阻塞下载 48
最差情况：将脚本放在顶部 49
最佳情况：将脚本放在底部 49
正确地放置 50
第7章 规则7——避免CSS表达式 51
更新表达式 52
围绕问题展开工作 52
小结 54
第8章 规则8——使用外部JavaScript和CSS 55
内联VS外置 55
典型的对比结果 58
主页 58
两全其美 59
第9章 规则9——减少DNS查找 63
DNS缓存和TTL 63
浏览器的视角 66
减少DNS查找 68
第10章 规则10——精简JavaScript 69
精简 69
混淆 70
节省 70
示例 72
锦上添花 73
第11章 规则11——避免重定向 76
重定向的类型 76
重定向是如何损伤性能的 77
重定向之外的其他选择 79
第12章 规则12——删除重复脚本 85
重复脚本——确有其事 85
重复脚本损伤性能 86
避免重复脚本 87
第13章 规则13——配置ETag 89
ETag是什么? 89
ETag带来的问题 91
Etag——用还是不用 93
现实世界中的ETag 94
第14章 规则14——使Ajax可缓存 96
Web 2.0、DHTML和Ajax 96
异步与即时 98
优化Ajax请求 99
现实世界中的Ajax缓存 99
第15章 析构十大网站 103
页面大小、响应时间、YSlow等级 103
如何进行测试 105
Amazon 107
AOL 110
CNN 114
eBay 116
Google 120
MSN 123
MySpace 127
Wikipedia 130
Yahoo! 132
YouTube 135
索引 139
精彩节摘
推荐序
你很幸运能够拿到这本书。更重要的是，你的网站用户会很幸运。Steve在这本开天辟地的书中分享了14项技术，哪怕只实现了这些技术中的很少几项，你的网站也会立即变快。你的用户会感谢你。
这是为什么呢?作为一个前端工程师，你拥有巨大的能力和责任。你是用户的最后一道防线。你做出的决定直接影响他 们的体验。我相信我们大量的工作之一就是照顾用户并给他们所需要的——快速的网站。这本书是一个创建快乐用户(和老板)的工具箱。最好的结果是，一旦恰当 地使用这些技术——很多情况下，这只是一次性投入——你将长期从中获得收益。
这本书将改变你进行性能优化的方式。在Steve开始为我们Yahoo!的Platform Engineering团队研究性能之际，我还一直认为性能主要是后端问题。但他却表明前端问题可能消耗掉整体时间的80%。我想前端性能无非就是对图片 进行优化和坚持使用外部CSS和JavaScript，但你手中的这本书却证明实际要做的工作远不止这些。
我将他的成果应用于很多网站。发现大量已经很快的网站还可以再快将近一倍。他的方法论是可靠的，他的数据有效而且具有扩展性，他的成果是强有力的。
前端工程学这门学科还很年轻，但你手中的这本书将是这项技术趋于成熟的过程中的重要一步。通过创建更好和更快(也更具享受性)的界面和体验，我们将共同提高对Web的期望。
为更快的上网冲浪欢呼吧!
——Nate Koechley
高级前端工程师
Yahoo! User Interface(YUI)团队，
平台开发，Yahoo! Inc.
圣弗朗西斯科
媒体评论
即便仅使用Steve这些规则中的20%，网站性能也会显著提升。有了这本书，你的网站真的没有任何借口拖沓缓行了。
——Joe Hewitt，Firebug debugger开发者，Mozilla的DOM Inspector
Steve Souders做了一件了不起的事情，他提炼出一套简明、可操作的工程步骤来改善网站性能，使这项工作不再无从下手，神秘莫测。
——Eric Lawrence，微软公司Fiddler Web Debugger的开发者
作为Zillow.com网站的压力与性能测试的负责人，我一直在和团队里的开发员和性能维护人员谈，要求他们使用Steve在本书中总结的规则。大家都在问怎样才弄到这本书。我觉得对于所有的网站开发者和性能工程师而言，这本应该是必读图书。
——Nate Moch, www.zillow.com
对于所有网站开发者而言，本书都是一个重要的指导手册。Steve在书中的建议直接且有效，能让网站运行速度得到显著提升。
——Tony Chor，微软公司Internet Explorer团队Group Program经理
前言
八年级的时候，我在历史课上感受到工业革命的巨大威力。人们用以识别和突破制造业瓶颈的技术迷住了我。在我的印象里，最好的进步是可调整的踏板工具，它使得身高不同的工人都能轻松地够到传送带——一项简单的投资提高了工人的效率。
30年过去了，我很乐于将本书中的最佳实践比作19世纪的踏板工具。这些最佳实践加强了现有流程。它们需要前期 投资，但开销很小——尤其是与收益相比。而且一旦合理地运用了这些改进，它们将在整个开发过程中持续提升性能。我希望你能发现，这些用于建设高性能网站的 规则能够为你和你的用户带来利益。
本书是如何组织的
在两章的快速介绍之后，将进入本书的主要部分——14个性能规则。每个规则都进行了介绍，按照优先级顺序，每章 一个。并非每个规则都要应用于每个网站，也不是每个网站都应该按同一种方式运用一个规则，但每个规则都值得考虑。本书的最后一章介绍了如何从性能的角度来 分析Web页面，这一章还包含一些案例研究。
绪言A，前端性能的重要性解释了至少有80%的时间花在了显示Web页面上，而这是在HTML文档下载完毕后发生的;这一章还描述了本书中的技术的重要性。
绪言B，HTTP概述对HTTP进行了简要介绍，主要强调了其中与性能相关的部分。
第1章，规则1——减少HTTP请求介绍了为什么额外的HTTP请求会对性能产生巨大的影响，并介绍了减少HTTP请求的方法，包括图片地图、CSS Sprites、使用data:模式的URL内联图片，以及合并脚本和样式表。
第2章，规则2——使用内容发布网络强调了使用内容发布网络的优势。
第3章，规则3——添加Expires头研究了一个简单的HTTP头是如何通过浏览器缓存来大幅改善Web页面性能的。
第4章，规则4——压缩组件解释了压缩是如何工作的，以及如何为Web服务器启用压缩，并讨论了现今存在的一些兼容性问题。
第5章，规则5——将样式表放在顶部展示了样式表是如何影响页面呈现的。
第6章，规则6——将脚本放在底部展示了脚本是如何影响呈现的，以及脚本是如何下载到浏览器中的。
第7章，规则7——避免CSS表达式讨论了CSS表达式的使用和度量其影响的重要性。
第8章，规则8——使用外部JavaScript和CSS介绍了如何权衡是内联JavaScript和CSS还是将它们放到外部文件中。
第9章，规则9——减少DNS查找强调了解析域名时的频繁查找所产生的影响。
第10章，规则10——精简JavaScript量化了从JavaScript中移除空白字符所带来的收益。
第11章，规则11——避免重定向对使用重定向提出了警示，并给出了可替代的方法。
第12章，规则12——删除重复脚本展示了如果一个页面中包含两处相同的脚本会发生什么情况。
第13章，规则13——配置ETag介绍了ETag是如何工作的，以及为什么对于任何拥有多于一台Web服务器的网站来说，默认的实现都是不好的。
第14章，规则14——使Ajax可缓存强调在使用Ajax时牢记这些性能规则的重要性。
第15章，析构十大网站就如何确定现实世界中的网站的性能改进给出了一些实例。
本书中使用的约定
Conventions Used in This Book
以下是本书使用的排版约定：
斜体(以及黑体)
指出新术语、URL、E-mail地址、文件名、文件扩展名、路径名、目录、Unix实用工具和普通的强调。
等宽字体
指出广义上的计算机代码。这包括命令、选项、开关、变量、属性(Attribute)、键、函数、类型、命名空间、方法、属性(Property)、参数、值、对象、事件、事件处理器、XML标签、HTML标签、宏、文件内容和命令的输出。
HTTP请求和响应以图形化方式指出，如下面的例子所示。
GET / HTTP 1.1 is an HTTP request header
HTTP 1.1 200 OK is an HTTP response header
代码示例
Code Examples
从本书配套的网站上可以找到在线示例：
http://stevesouders.com/hpws
这些示例均放在在每章中讨论它们的上下文中。这里也列出一份，以便于查看。
无图片地图的示例(第1章)
http://stevesouders.com/hpws/imagemap-no.php
图片地图的示例(第1章)
http://stevesouders.com/hpws/imagemap.php
CSS Sprites的示例(第1章)
http://stevesouders.com/hpws/sprites.php
内联图片的示例(第1章)
http://stevesouders.com/hpws/inline-images.php
内联CSS图片的示例(第1章)
http://stevesouders.com/hpws/inline-css-images.php
分离脚本的示例(第1章)
http://stevesouders.com/hpws/combo-none.php
合并脚本的示例(第1章)
http://stevesouders.com/hpws/combo.php
CDN的示例(第2章)
http://stevesouders.com/hpws/ex-cdn.php
无CDN的示例(第2章)
http://stevesouders.com/hpws/ex-nocdn.php
无Expires的示例(第3章)
http://stevesouders.com/hpws/expiresoff.php
长久的Expires的示例(第3章)
http://stevesouders.com/hpws/expireson.php
无压缩的示例(第4章)
http://stevesouders.com/hpws/nogzip.html
压缩HTML的示例(第4章)
http://stevesouders.com/hpws/gzip-html.html
压缩所有组件的示例(第4章)
http://stevesouders.com/hpws/gzip-all.html
将CSS放在底部的示例(第5章)
http://stevesouders.com/hpws/css-bottom.php
将CSS放在顶部的示例(第5章)
http://stevesouders.com/hpws/css-top.php
将CSS放在顶部并使用@import的示例(第5章)
http://stevesouders.com/hpws/css-top-import.php
无样式内容的CSS闪烁的示例(第5章)
http://stevesouders.com/hpws/css-fouc.php
将脚本放在中部的示例(第6章)
http://stevesouders.com/hpws/js-middle.php
脚本阻塞下载的示例(第6章)
http://stevesouders.com/hpws/js-blocking.php
将脚本放在顶部的示例(第6章)
http://stevesouders.com/hpws/js-top.php
将脚本放在底部的示例(第6章)
http://stevesouders.com/hpws/js-bottom.php
顶部脚本VS底部脚本的示例(第6章)
http://stevesouders.com/hpws/move-scripts.php
延迟脚本的示例(第6章)
http://stevesouders.com/hpws/js-defer.php
表达式计数器的示例(第7章)
http://stevesouders.com/hpws/expression-counter.php
一次性表达式的示例(第7章)
http://stevesouders.com/hpws/onetime-expressions.php
事件处理器的示例(第7章)
http://stevesouders.com/hpws/event-handler.php
内联JS和CSS的示例(第8章)
http://stevesouders.com/hpws/inlined.php
外部JS和CSS的示例(第8章)
http://stevesouders.com/hpws/external.php
可缓存的外部JS和CSS的示例(第8章)
http://stevesouders.com/hpws/external-cacheable.php
加载后下载的示例(第8章)
http://stevesouders.com/hpws/post-onload.php
动态内联的示例(第8章)
http://stevesouders.com/hpws/dynamic-inlining.php
一般的小脚本的示例(第10章)
http://stevesouders.com/hpws/js-small-normal.php
经过精简的小脚本的示例(第10章)
http://stevesouders.com/hpws/js-small-minify.php
经过混淆的小脚本的示例(第10章)
http://stevesouders.com/hpws/js-small-obfuscate.php
一般的大脚本的示例(第10章)
http://stevesouders.com/hpws/js-large-normal.php
经过精简的大脚本的示例(第10章)
http://stevesouders.com/hpws/js-large-minify.php
经过混淆的大脚本的示例(第10章)
http://stevesouders.com/hpws/js-large-obfuscate.php
XMLHttpRequest信标的示例(第11章)
http://stevesouders.com/hpws/xhr-beacon.php
图片信标的示例(第11章)
http://stevesouders.com/hpws/redir-beacon.php
重复脚本——无缓存的示例(第12章)
http://stevesouders.com/hpws/dupe-scripts.php
重复脚本——有缓存的示例(第12章)
http://stevesouders.com/hpws/dupe-scripts-cached.php
重复脚本——10次缓存的示例(第12章)
http://stevesouders.com/hpws/dupe-scripts-cached10.php
你可以直接在程序或者文档中使用本书提供的代码，无须与我们联系获得许可，除非复制大量的程序。例如，使用本书 中的一些代码编写程序不需要得到许可，不过如果将O’Reilly书中的代码例子用于出售或复制光盘就必须获得许可。可以引用本书的内容或者代码样例来解 决其他问题，但是在自己的产品文档中大量使用本书的代码样例需要事先得到许可。
我们会非常感谢你在引用本书时声明版权，虽然这不是必须的。声明版权时通常要注明标题、作者、出版社以及 ISBN序列号。例如“High Performance Web Sites by Steve Souders，Copyright 2007 Steve Souders，978-0-596-52930- 7。”
如果你觉得自己对代码示例的使用超出了合理使用或上述许可范围，可以通过permissions@oreilly.com与我们联系。
Safari Books Online是一家按需所取的数字图书馆，它同时提供来自世界各地领先的技术和业务作者的书籍和视频两种形式的专业内容。
专业技术人员、软件开发人员、网页设计师，以及商业和创意专业人士使用Safari联机丛书作为研究，是解决问题、学习和认证培训的主要资源。
Safari Books Online提供了一系列的产品组合和针对组织、政府机构和个人的定价方案。用户有机会在一个完全可搜索的数据库中访问成千上万的书籍、培训视频和即将出 版的原稿，它们来自O’Reilly Media、Prentice Hall Professional、Addison-Wesley Professional、Microsoft Press、Sams、Que、Peachpit Press、Focal Press、Cisco Press、John Wiley & Sons、Syngress、Morgan Kaufmann、IBM Redbooks、Packt、Adobe Press、FT Press、Apress、Manning、New Riders、McGraw-Hill、Jones & Bartlett、Course Technology以及大量其他出版商。有关Safari Books Online的更多详细信息，请访问我们的网站。
联系我们
对于本书的评论或问题请联系出版商：
美国：
O’Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
中国：
北京市西城区西直门南大街2号成铭大厦C座807室(100035)
奥莱利技术咨询(北京)有限公司
关于本书的评论或技术讨论可发送邮件至：
bookquestions@oreilly.com
想了解关于O’Reilly图书、课程、会议和新闻的更多信息，请访问以下网站：
http://www.oreilly.com
与本书有关的在线信息如下所示。
http://www.oreilly.com/catalog/9780596529307(原书)
感谢
Acknowledgments
Ash Patel和Geoff Ralston是Yahoo!的执行人员，他们让我启动了一个中心，专门研究性能。很多Yahoo!人帮忙回答问题并讨论了观点——Ryan Troll、Doug Crockford、Nate Koechley、Mark Nottingham、Cal Henderson、Don Vail和Tenni Theurer。我的编辑Andy Oram付出了极大的耐心，并给我这个第一次当作者的人以必要的鼓励。很多人帮助检查了这本书——Doug Crockford、Havi Hoffman、Cal Henderson、Don Knuth，尤其是Jeffrey Friedl、Alexander Kirk和Eric Lawrence。