八年级的时候,我在历史课上感受到工业革命的巨大威力。人们用以识别和突破制造业瓶颈的技术迷住了我。在我的印象里,最好的进步是可调整的踏板工具,它使得身高不同的工人都能轻松地够到传送带--一项简单的投资提高了工人的效率。
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? 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。
本书完全是在周末和深夜的业余时间中完成的。感谢我的妻子和女儿在周末给我这些时间来工作。感谢我的父母教授我在深夜工作需遵循的道德规范。