《高性能网站建设指南：前端工程师技能精髓》

编辑推荐

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

内容简介

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

作者简介

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

精彩书评

　　★即便仅使用Steve这些规则中的20%，网站性能也会显著提升。有了这《高性能网站建设指南：前端工程师技能精髓》，你的网站真的没有任何借口拖沓缓行了。
　　——JoeHewitt，Firebugdebugger开发者，Mozilla的DOMInspector

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

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

　　★对于所有网站开发者而言，《高性能网站建设指南：前端工程师技能精髓》都是一个重要的指导手册。Steve在书中的建议直接且有效，能让网站运行速度得到显著提升。
　　——TonyChor，微软公司InternetExplorer团队GroupProgram经理

目录

前言/序言

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