　　网站做得再好，如果慢到无法访问也是毫无意义的。在Google，网页呈现速度慢500 毫秒将丢失20%的流量；在Yahoo!，慢400 毫秒将丢失5%~9%的流量；在，慢100 毫秒将丢失1%的交易量……反之，网站速度越快，越有利于用户汇聚、流量增长及交易量的上升。而优化网站性能的方法有很多，前端优化就是一条省时省力的捷径。
　　如果我们可以将后端响应时间缩短一半，整体响应时间只能减少5%~10%。而如果关注前端性能，同样是将其响应时间减少一半，则整体响应时间可以减少40%~45%。
　　《高性能网站建设指南：前端工程师技能精髓》告诉我们从“前端”入手改善网站性能简单明了。在对后端大动干戈之前，按照本书的14条“军规”，从前端入手改善性能，会有意想不到的惊人效果。

内容简介

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

作者简介

　　刘彦博，软件开发工程师，目前任职于微软（中国）有限公司，拥有近十年的软件开发经验和近三年的“全栈工程师”经历，目前专注于Windows Azure相关应用开发。

精彩书评

　　★即便仅使用Steve这些规则中的20%，网站性能也会显著提升。有了这本书，你的网站真的没有任何借口拖沓缓行了。
　　——Joe Hewitt，Firebug debugger开发者，Mozilla的DOM Inspector

　　★Steve Souders做了一件了不起的事情，他提炼出一套简明、可操作的工程步骤来改善网站性能，使这项工作不再无从下手，神秘莫测。
　　——Eric Lawrence，微软公司Fiddler Web Debugger的开发者

　　★作为Zillow.com网站的压力与性能测试的负责人，我一直在和团队里的开发员和性能维护人员谈，要求他们使用Steve在本书中总结的规则。大家都在问怎样才弄到这本书。我觉得对于所有的网站开发者和性能工程师而言，这本应该是必读图书。
　　——Nate Moch

　　★对于所有网站开发者而言，本书都是一个重要的指导手册。Steve在书中的建议直接且有效，能让网站运行速度得到显著提升。
　　——Tony Chor，微软公司Internet Explorer团队Group Program经理

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

前言/序言

　　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……），最后由浏览器将这些内容展现给访问者。人们将这一过程划分为“后端”和“前端”两个部分。
　　“后端”用于分析用户请求、执行数据查询并对结果进行组织，形成浏览器可以呈现的内容；“前端”负责将后端生成的内容通过网络发送给客户端浏览器。人的思维往往会进入一种误区，认为“后面的”、“背后的”东西都是神秘的、伟大的，影响力非凡。所以很多书以“某某内幕”为题，很多程序员以精通“底层开发”或“后端开发”为荣；同样的，当网站出现问题时，我们第一时间想到的也是如何优化“后端”。
　　本书从一开始就帮我们端正了在网站性能方面的看法，带我们走出误区。然后，从各个方面通过正例和反例的对比，让我们看到“前端”对网站性能的影响是如此巨大，而从“前端”入手改善现状是那么的简单明了。在对后端大动干戈之前，你的确应该按照本书的建议，首先从前端入手，改善性能，这样必将事半功倍。
　　当然，本书最大的价值在于，作者通过一系列“步骤”详细地阐明了如何通过修改前端来改善网站性能，而这些方法需要经过大量实践才能掌握并总结成文。我们应该感谢作者能够将他多年来在网站性能方面积累下来的经验总结成文，并以图书的形式分享给各位读者。而我，很荣幸能有机会将这样好的作品带给中国读者。
　　感谢电子工业出版社博文视点公司的各位朋友，谢谢你们给了我这样一个机会，能把这本书带给中国读者；也感谢你们能够体谅我在翻译工作中犯下的错误和拖延的时间。感谢在网络上留下技术文章的英雄们，有了你们的文章内容作参考，我对术语的把握更加容易了。在翻译的过程中，我尽可能地仔细斟酌。但术语的使用、语言的风格等很难与原著保持精确一致，也很难满足所有人的口味，还望广大读者体谅。另外，任何一本书都可能出现错误，本书也不例外。如果你发现本书有让你不满意的地方，或者是出现了错误，除了联系出版社之外，还可以通过发邮件到与我联系，或在我的博客留言，我将为大家提供非官方的技术支持。
　　刘彦博
　　北京
　　本书赞誉
　　即便仅使用Steve这些规则中的20%，网站性能也会显著提升。有了这本书，你的网站真的没有任何借口拖沓缓行了。
　　——Joe Hewitt，Firebug debugger开发者，Mozilla的DOM Inspector
　　Steve Souders做了一件了不起的事情，他提炼出一套简明、可操作的工程步骤来改善网站性能，使这项工作不再无从下手，神秘莫测。
　　——Eric Lawrence，微软公司Fiddler Web Debugger的开发者
　　作为Zillow.com网站的压力与性能测试的负责人，我一直在和团队里的开发员和性能维护人员谈，要求他们使用Steve在本书中总结的规则。大家都在问怎样才弄到这本书。我觉得对于所有的网站开发者和性能工程师而言，这本应该是必读图书。
　　——Nate Moch,
　　对于所有网站开发者而言，本书都是一个重要的指导手册。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世纪的踏板工具。这些最佳实践加强了现有流程。它们需要前期投资，但开销很小——尤其是与收益相比。而且一旦合理地运用了这些改进，它们将在整个开发过程中持续提升性能。我希望你能发现，这些用于建设高性能网站的规则能够为你和你的用户带来利益。