《高性能网站建设指南》前言

 摘自《高性能网站建设指南 

前言

 

在八年级的时候,我在历史课上感受到工业革命的巨大威力。人们用以识别和突破制造业瓶颈的技术迷住了我。在我的印象里,最好的进步是可调整的踏板工具,它使得身高不同的工人都能轻松地够到传送带——一项简单的投资提高了加工的效率。

三十年过去了,我很乐于将本书中的最佳实践比作19世纪的踏板工具。这些最佳实践加强了现有流程。它们需要前期投资,但开销很小——尤其是与收益相比。而且一旦合理地运用了这些改进,它们将在整个开发过程中持续提升性能。我希望你能发现,这些用于建设高性能网站的规则能够为你和你的用户带来利益。

本书是如何组织的

How This Book Is Organized

在两章的快速介绍之后,将进入本书的主要部分——14个性能规则。每个规则都进行了介绍,按照优先级顺序,每章一个。并非每个规则都要应用于每个网站,也不是每个网站都应该按同一种方式运用一个规则,但每个规则都值得考虑。本书的最后一章介绍了如何从性能的角度来分析Web页面,这一章还包含一些案例研究。

绪言A,前端性能的重要性解释了有至少80%的时间花在了显示Web页面上,而这是在HTML文档下载完毕后发生的;这一章还描述了本书中的技术的重要性。

绪言BHTTP概述HTTP进行了简要介绍,主要强调了其中与性能相关的部分。

1章,规则1减少HTTP请求介绍了为什么额外的HTTP请求会对性能产生巨大的影响,并介绍了减少HTTP请求的方法,包括图片地图、CSS子图形、使用data:模式的URL内联图片,以及合并脚本和样式表。

2章,规则2——使用内容发布网络强调了使用内容发布网络的优势。

3章,规则3——添加Expires研究了一个简单的HTTP头是如何通过使用浏览器缓存来戏剧性地改善Web页面性能的。

4章,规则4——压缩组件解释了压缩是如何工作的,以及如何为Web服务器启用压缩,并讨论了现今存在的一些兼容性问题。

5章,规则5——将样式表放在顶部展示了样式表是如何影响页面呈现的。

6章,规则6——将脚本放在底部展示了脚本是如何影响呈现的,以及脚本是如何下载到浏览器中的。

7章,规则7——避免CSS表达式讨论了CSS表达式的使用和度量其影响的重要性。

8章,规则8——使用外部JavaScriptCSS介绍了如何权衡是内联JavaScriptCSS还是将它们放到外部文件中。

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

以下是本书使用的排版约定:

斜体(以及黑体)

指出新术语、URLEmail地址、文件名、文件扩展名、路径名、目录、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/combo-none.php

无图片地图(第1章)

http://stevesouders.com/hpws/imagemap-no.php

图片地图(第1章)

http://stevesouders.com/hpws/imagemap.php

CSS向导(第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.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

内联JSCSS(第8章)

http://stevesouders.com/hpws/inlined.php

外部JSCSS(第8章)

http://stevesouders.com/hpws/external.php

可缓存的外部JSCSS(第8章)

http://stevesouders.com/hpws/external-cacheable.php

Post-Onload下载(第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 SouderCopyright 2007 Steve Sounder978-0-596-52930- 7。”

如果你感觉你对代码示例的使用超出了简单使用或前面给出的许可范围,可以通过permissions@oreilly.com免费与我们联系。

感谢

Acknowledgments

Ash PatelGeoff RalstonYahoo!的执行人员,他们让我启动了一个中心,专门研究性能。很多Yahoo!人帮忙回答了问题并讨论了观点——Ryan TrollDoug CrockfordNate KoechleyMark NottinghamCal HendersonDon VailTenni Theurer。我的编辑Andy Oram付出了极大的耐心,并给我这个第一次当作者的人以必要的鼓励。很多人帮助检查了这本书——Doug CrockfordHavi HoffmanCal HendersonDon Knuth,尤其是Jeffrey FriedlAlexander KirkEric Lawrence

本书完全是在周末和深夜的业余时间中完成的。感谢我的妻子和女儿在周末给我这些时间来工作。感谢我的父母教授我在深夜工作需遵循的道德规范。

posted @ 2008-12-24 19:23  博文视点  阅读(570)  评论(5编辑  收藏  举报