本书结合Web 2.0以来Web开发领域的最新形势和特点，介绍了网站性能问题的现状、产生的原因，以及改善或解决性能问题的原则、技术技巧和最佳实践。重点关注网页的行为特征，阐释优化Ajax、CSS、JavaScript、Flash和图片处理等要素的技术，全面涵盖浏览器端性能问题的方方面面。在本书中，作者给出了14条具体的优化原则，每一条原则都配以范例佐证，并提供了在线支持。全书内容丰富，主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复JavaScript的技巧、关闭ETags的技巧、Ajax缓存技术和最小化技术等。

O’Reilly Media, Inc.介绍 O’Reilly Media通过图书、杂志、在线服务、调查研究和会议等方式传播创新知识。自1978年开始，O’Reilly一直都是前沿发展的见证者和推动者。超级极客们正在开创着未来，而我们关注真正重要的技术趋势——通过放大那些“细微的信号”来刺激社会对新科技的应用。作为技术社区中活跃的参与者，O’Reilly的发展充满了对创新的倡导、创造和发扬光大。 O’Reilly为软件开发人员带来革命性的“动物书”；创建第一个商业网站（GNN）；组织了影响深远的开放源代码峰会，以至于开源软件运动以此命名；创立了Make杂志，从而成为DIY革命的主要先锋；公司一如既往地通过多种形式缔结信息与人的纽带。O’Reilly的会议和峰会集聚了众多超级极客和高瞻远瞩的商业领袖，共同描绘出开创新产业的革命性思想。作为技术人士获取信息的选择，O’Reilly现在还将先锋专家的知识传递给普通的计算机用户。无论是通过书籍出版、在线服务或者面授课程，每一项O’Reilly的产品都反映了公司不可动摇的理念——信息是激发创新的力量。 业界评论 “O’Reilly Radar博客有口皆碑。” ——Wired “O’Reilly凭借一系列（真希望当初我也想到了）非凡想法建立了数百万美元的业务。” ——Business 2.0 “O’Reilly Conference是聚集关键思想领袖的绝对典范。” ——CRN “一本O’Reilly的书就代表一个有用、有前途、需要学习的主题。” ——Irish Times “Tim是位特立独行的商人，他不光放眼于最长远、最广阔的视野并且切实地按照Yogi Berra的建议去做了：‘如果你在路上遇到岔路口，走小路（岔路）。’回顾过去Tim似乎每一次都选择了小路，而且有几次都是一闪即逝的机会，尽管大路也不错。” ——Linux Journal 译者序 同样的网络环境，看着别人的网站“唰”地一下就展现出来，你是否和我一样，心急如焚，盼望着早一点攒出一笔钱，给服务器加点内存？或者你已经挽起袖子，开始研究数据库优化？又或者你在暗自思量着可以把哪些设计模式或编码技巧运用在自己的后台代码里，盼望以此带来性能上的巨幅提升？ 哦，别激动，很多时候事情并没有你想象的这么严重。 我们知道，一次Web应用程序请求，就是从浏览器发出一些参数到你的服务器，然后服务器上的程序对请求进行处理，再生成浏览器可以识别的内容（HTML、脚本、CSS、图片、Flash……），最后由浏览器将这些内容展现给访问者。人们将这一过程划分为“后端”和“前端”两个部分。 “后端”用于分析用户请求、执行数据查询并对结果进行组织，形成浏览器可以呈现的内容；“前端”负责将后端生成的内容通过网络发送给客户端浏览器。人的思维往往会进入一种误区，认为“后面的”、“背后的”东西都是神秘的、伟大的，影响力非凡。所以很多书以“某某内幕”为题，很多程序员以精通“底层开发”或“后端开发”为荣；同样的，当网站出现问题时，我们第一时间想到的也是如何优化“后端”。 本书从一开始就帮我们端正了在网站性能方面的看法，带我们走出误区。然后，从各个方面通过正例和反例的对比，让我们看到“前端”对网站性能的影响是如此巨大，而从“前端”入手改善现状是那么的简单明了。在对后端大动干戈之前，你的确应该按照本书的建议，首先从前端入手，改善性能，这样必将事半功倍。 当然，本书最大的价值在于，作者通过一系列“步骤”详细地阐明了如何通过修改前端来改善网站性能，而这些方法需要经过大量实践才能掌握并总结成文。我们应该感谢作者能够将他多年来在网站性能方面积累下来的经验总结成文，并以图书的形式分享给各位读者。而我，很荣幸能有机会将这样好的作品带给中国读者。 感谢电子工业出版社博文视点公司的各位朋友，谢谢你们给了我这样一个机会，能把这本书带给中国读者；也感谢你们能够体谅我在翻译工作中犯下的错误和拖延的时间。感谢在网络上留下技术文章的英雄们，有了你们的文章内容作参考，我对术语的把握更加容易了。在翻译的过程中，我尽可能地仔细斟酌。但术语的使用、语言的风格等很难与原著保持精确一致，也很难满足所有人的口味，还望广大读者体谅。另外，任何一本书都可能出现错误，本书也不例外。如果你发现本书有让你不满意的地方，或者是出现了错误，除了联系出版社之外，还可以通过发邮件到lyb.net@gmail.com与我联系，或在我的博客http://andersliu.cnblogs.com留言，我将为大家提供非官方的技术支持。 刘彦博 北京 本书赞誉 即便仅使用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经理 推荐序 Foreword 你很幸运能够拿到这本书。更重要的是，你的网站用户会很幸运。Steve在这本开天辟地的书中分享了14项技术，哪怕只实现了这些技术中的很少几项，你的网站也会立即变快。你的用户会感谢你。 这是为什么呢？作为一个前端工程师，你拥有巨大的能力和责任。你是用户的最后一道防线。你做出的决定直接影响他们的体验。我相信我们大量的工作之一就是照顾用户并给他们所需要的——快速的网站。这本书是一个创建快乐用户（和老板）的工具箱。最好的结果是，一旦恰当地使用这些技术——很多情况下，这只是一次性投入——你将长期从中获得收益。 这本书将改变你进行性能优化的方式。在Steve开始为我们Yahoo!的Platform Engineering团队研究性能之际，我还一直认为性能主要是后端问题。但他却表明前端问题可能消耗掉整体时间的80%。我想前端性能无非就是对图片进行优化和坚持使用外部CSS和JavaScript，但你手中的这本书却证明实际要做的工作远不止这些。 我将他的成果应用于很多网站。发现大量已经很快的网站还可以再快将近一倍。他的方法论是可靠的，他的数据有效而且具有扩展性，他的成果是强有力的。 前端工程学这门学科还很年轻，但你手中的这本书将是这项技术趋于成熟的过程中的重要一步。通过创建更好和更快（也更具享受性）的界面和体验，我们将共同提高对Web的期望。 为更快的上网冲浪欢呼吧！ ——Nate Koechley 高级前端工程师 Yahoo! User Interface（YUI）团队， 平台开发，Yahoo! Inc. 圣弗朗西斯科 前言 Preface 八年级的时候，我在历史课上感受到工业革命的巨大威力。人们用以识别和突破制造业瓶颈的技术迷住了我。在我的印象里，最好的进步是可调整的踏板工具，它使得身高不同的工人都能轻松地够到传送带——一项简单的投资提高了工人的效率。 30年过去了，我很乐于将本书中的最佳实践比作19世纪的踏板工具。这些最佳实践加强了现有流程。它们需要前期投资，但开销很小——尤其是与收益相比。而且一旦合理地运用了这些改进，它们将在整个开发过程中持续提升性能。我希望你能发现，这些用于建设高性能网站的规则能够为你和你的用户带来利益。 本书是如何组织的 How This Book Is Organized 在两章的快速介绍之后，将进入本书的主要部分——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＆reg; Books Online 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的更多详细信息，请访问我们的网站。 联系我们 How to Contact Us 对于本书的评论或问题请联系出版商： 美国： 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。 本书完全是在周末和深夜的业余时间中完成的。感谢我的妻子和女儿在周末给我这些时间来工作。感谢我的父母教授我在深夜工作需遵循的道德规范。

目录 Table of contents 推荐序 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