《高性能HTML5》为读者讲解了如何用HTML5从一开始就设计一个高性能的网站，以及如何对已有网站进行改良，使得它们具备优越的性能。《高性能HTML5》中总结了许多实践经验、关键技巧，并提供了丰富的示例，作者有意无意地将软件工程以及前端开发技术之道隐藏于朴实的描述中。通过学习《高性能HTML5》，读者能够掌握如何创建自己的高性能网站。《高性能HTML5》适合于想创建自己网站的初学者，同样也适用于资深网站开发者用于优化已有网站。

译 者 序 刚拿到这本书的时候，先看了一下书名，叫作Pro HTML5 Performance，于是理所当然地想到，这应该是一本有关HTML5 性能的理论教程，就像其他领域或者类似的书籍那样。可是当我翻看了许多页之后，我发现这本书的内容和我对书名的印象相去甚远。或许作者是一名不喜欢按照常理出牌的工程师，也或许作者取这个书名另有一种我所不能理解的深意。在发现书的内容和书名不大匹配之后，我经历了短暂的迷茫和疑惑，尤其是看到作者在书中的示例代码里贴上了大量不可阅读的base64 图片内容的时候，曾经有那么一小会儿的疑问，觉得也许这不是一本值得翻译的书。但是随着继续深入阅读下去，我发现我的看法完全改变了。 的确，这本书并不是一本讲理论的书，如果照着我们的预期，想从这本书中很直接地获取到关于HTML5 性能的知识点，或者是大家习惯于期待的很直接的“性能军规”，那么大家会失望的。因为这本书讲的完全不是纯粹的理论，而是彻头彻尾地在讲解着“实战”，从第1 部分一直到最后，这本书一直在强调着实战，其中的每一段代码都不是凭空捏造出来的，而是来自于实实在在的实战——作者自己在大型互联网企业制作高流量网站的实际经验。1 这不是一本理论书，它在前端发展史上永远不可能达到权威指南或者JS 高程那样的地位，而且可想而知，由于作者的写作方式，这本书也一定会招人吐槽，我相信不论是原著还是这版译本，也一定会有很多人对书的内容吐槽。甚至我们团队在翻译这本书的时候，我们自己内部也在不停地吐槽。所以得知这本书即将出版，我已经可以预感到对书中内容和我们不太擅长、不太有经验的翻译技巧的滔滔不绝的吐槽也许会把我们彻底淹没，实在是亚力山大！ 既然是这样一本有争议的书，那么为什么我们还要翻译它，而且前后翻译了有一年多的时间，一度差点使这本书难产？先说说好的原因，因为我们发现这本书有很大的实战价值，全书并没有高深的理论知识，作者一直在不停地讲实战，尽管没有从实战中拔高任何理论价值的东西，但是价值的确存在，存在于作者描写的那些如何制作网站的过程中。 作者提到：“我们想通过这本书分享给读者的内容，来自于我们从解决实际问题的过程中得到的经验教训，以及我们的职业所带来的独特视角。我们希望带着你更深入地理解HTML5/CSS3 性能相关的领域，希望通过介绍一些改变游戏规则的模式，使你的前端技能、水平提高一个层次。我们也很希望看到这本书能给你带来Web 开发领域一些好的变化，至少是在一些规模较大的和较复杂的网站应用方面。” 作者的确做到了上面这一点，虽然做得并非尽善尽美，但是已经做得很好了，比我们大多数陷入繁忙业务中的团队要做得好。在我们努力从业务中给自己挤出时间学习和成长的时候，作者已经通过梳理自己在前端行业中的经验，通过这本书在影响整个前端工程行业的发展。这本书中讨论的种种工程学上的问题，甚至比传授知识本身更加重要。一位基础很好的年轻毕业生，可以很快地掌握权威指南或者高程上的知识，并用之解决问题，从而获得一种自我成长中的狂喜。而一位已经在前端工作多年的工程师，在翻看你手里的这本书的时候，也许会有发自内心的一笑，只是浅浅一笑，一切尽在不言中。 不好的原因自然是我自身的懒散，也许不该翻译那么久，拖了很久之后，有赖于同事们的帮忙，最终才促成了此书译稿的完成。在这里要特别感谢另一位主译者陈健同学，以及所有参加此书翻译的奇舞团同学，他们人数很多，不便于一一列举出来，在此表示由衷的感谢。 这是一本看似平淡的好书，就像淡淡的茶叶，不会给人以很强烈的刺激，但是那种清香，会让阅读者觉得愉悦。作者有意无意地将软件工程以及前端开发之道隐藏于朴实的描述中，在那看似平常的文字里，没有奇技淫巧，只有平实规矩的实现，有很多选择，在每一个选择中都能看见此道，印证它，则需要思考，更需要时间的沉淀。 你我终将老去，此道永恒。 月影 2014 年3 月5 日 前 言 V 前 言 我曾写过数以千计的技术文字。在这些作品里，我想还没有哪个比这本书更重要。我和Mike 曾描述过一个Web 开发的范例，这个范例有变革这个专业的潜力。正如我们在这本书中反复说的，如果Web 开发者能接受我们描述的方法论，他们就能用更少的时间做更多的事情；如果甚至有相当显著比例的Web 开发者“解咒”这个方法论，我们和他们将可以加速创造整个世界广域网的创造性内容。很多内容还不在网上，很多应用因为驱动它们的数据不在网上，甚至还没有设计出来。如果Web 开发者能够加速从网上获取数据的进程，我们就可以加速这个创造过程，改变世界各地的人们的应用。 我和Mike 不要求我们现在呈现给大家的方法论是全新的。事实上，我们给出了Mike首次发现这些方法的出处。并且，我们怀疑这些方法已经被独立地发现了很多次了。然而，直到现在仍没有人用清晰的例子记载它。我们想要改变这个现状，而且，我想我们干得不错。再次重申，我们希望看到这些范例被广泛接受，相较于卖书（事实上，写一本书还远远不够），我们更希望我们的工作能够使我们的Web 开发同行受益，从而不断地将我们的工作做得更好，以便每个访问者或者说每一个人都能获得更佳的体验。 自认为具备这种影响力的想法是否过于自大？我们愿意一试，但你是裁判。 Jay Bryant 关于作者 Jay Bryant 横跨两个不同的领域：写作和编程。在过去的20 年中，他一直致力于帮助GE（通用电气）、Motorola（摩托罗拉）、Dell（戴尔） 和其他一些公司的程序员能够更好地用写作来表达他们的工作。同时，他又帮助像New York Times Group（纽约时报）、MorningStar（晨星）， 以及其他的企业和国家机构编写程序。如果对他的职业很好奇，去LinkedIn 搜索他。 Michael Garrett Jones 拥有超过15 年的Web 开发经验。他曾经在Microsoft（微软）、Dell（戴尔）、Johnson ＆ Johnson（强生）、Citi（花 旗银行）等公司作为技术领导。他还创造了一种独特的模式来实现高性能、直观的前端API。他坚持自己的设计，并且用它完美地实现了仅次于亚马逊的电子商务网站。 在他的自由职业中，他创建过不少于60 个站点。他的工作从设计公司logo 到整个公司网站的建立。因为自己的平面设计背景，Michael 不愿意为了适应早期笨重的网页布局，而调整自己的设计。他做了很多工作和花了很多个人时间来学习如何让Web 工程能够完美地呈现他的设计思想。 带着Web 开发世界的两个方面的视角——编码和设计上路，Michael 总是能提供一些高效的模式，让用户和开发者都能有一个很好的体验。 关于技术评审 Jeff Johnson 有超过10 年的Web 工作经验，现在管理着一个工作室和一个在得克萨斯州的Web 设计公司。他拥有得克萨斯大学玻宓恩分校的计算机科学的学士学位，并且是一位资深科幻迷和技术极客。在高中时期，Jeff 就推出了自己的第一份跟电脑相关的业务。技术和创业是他的最爱，当然还少不了同时作为他员工的妻子——维罗尼卡。当不写代码的时候，可以发现Jeff 会跟高中男孩一起分享他对“星际之门”的喜爱，还有对运动的厌恶。 这两年他的重心在俄罗斯，他花了几个星期在那里与十几岁的孤儿一起参加夏令营的活动。 致 谢 感谢专业的UIF 团队成员，我们从他们身上学到了很多东西，感谢他们的真诚帮助，让我们实现了一些很棒的UI 模型。团队成员一直同我们一起工作，他们协同一致地接受了很多我们抛出的挑战性问题，并很好地完成了解决方案。 我们要特别感谢UIF 团队的以下成员： Eric Hexter Won Lee Matt Hinze Jason Cavaliere Raj Kaimal 最后，感谢Dell 的成员，特别感谢Thom Phipps，是他领导团队创建了UIF。对于这本书而言，感谢我们的技术评审Jeff Johnson。Jeff 做了很多测试来验证我们的理论是正确的，同时他的很多好想法都被收入了本书中。感谢我们的开发编辑EwanBuckingham，每次遇到困惑的时候都是Ewan 给我们指引了一个清晰的思路，同时，很多特殊章节的首稿都是他来完成的，他提供了解决方案来避免一些“灾难”发生。最后，感谢我们的合作编辑Mark Powers，所有人员的文档和图片都是他来管理的，并且每个文件可能都会来来回回修改数版，最终才汇集成了这本书，感谢Mark 在此过程中提供的帮助。 以上几位专业并且和蔼可亲，我们衷心感谢他们为本书做出的工作。

目 录 第1 部分 引言 第1 章 概述 ...................................................................... 2 网站范例 ....................................................................... 2 这本书将带给读者什么 ................................................ 3 什么是高性能 ................................................................ 4 页面加载时间 ........................................................... 4 浏览器性能 .............................................................. 4 网络性能 .................................................................. 4 开发效率 .................................................................. 4 响应式设计 .................................................................... 5 栅格系统 ....................................................................... 5 更深入地理解CSS ........................................................ 5 第2 部分 性能基础 第2 章 开发原则 ............................................................... 8 编写符合当代浏览器性能的代码 ................................ 8 减少HTML 中元素的数量 .......................................... 9 减少重绘 .................................................................. 9 用CSS 来布局，处理边界 ......................................... 11 渐进式增强 .................................................................. 14 使用特征检测来显示渐进式增强 ............................... 15 各司其职 ...................................................................... 16 HTML ..................................................................... 17 CSS ...................................................................... 17 JavaScript ............................................................... 18 小结 ............................................................................. 20 第3 章 性能准则 ............................................................. 21 为什么页面加载时间是如此重要 .............................. 21 准则 ............................................................................. 22 减少HTTP 请求 ....................................................... 22 使用CDN 加速（内容分发系统） ............................. 27 避免空的src 和href 属性值 ..................................... 28 增加过期头 ............................................................ 29 启用GZIP 压缩 ....................................................... 29 把CSS 放在头部 ...................................................... 30 把JavaScript 放到尾部 ............................................ 31 避免使用CSS 表达式 ............................................... 31 移除不使用的CSS 语句 .......................................... 32 对JavaScript 和CSS 进行代码压缩 ........................... 32 减少重绘 ................................................................ 34 规定图片的宽和高 .................................................. 34 不要用表格布局 ....................................................... 34 定义字符集 ............................................................ 35 不要重组DOM ........................................................ 35 延伸阅读 ...................................................................... 35 小结 ............................................................................. 35 第4 章 响应式网页设计 ................................................. 37 响应式设计 .................................................................. 37 CSS3 媒体查询 ....................................................... 38 自适应图片 ............................................................ 45 弹性栅格 ................................................................ 47 小结 ............................................................................. 49 第5 章 理解页面重用机制 ............................................. 51 一些关于页面重用的理念 .......................................... 62 就像搭积木一样 ....................................................... 62 都在容器里 ............................................................ 62 小结 ............................................................................. 63 第3 部分 创建一个网站 第6 章 页面模板 ............................................................. 68 配置模板选项 .............................................................. 69 HTML 元素周围的条件注释 .................................... 70 设置字符集 ............................................................ 73 使用IE 的兼容模式 .................................................. 73 提示用户安装Google Chrome Frame ......................... 75 为iPhone 使用Viewport .......................................... 75 加载jQuery ............................................................ 75 添加Google 统计代码 ............................................. 76 更多可选项 ............................................................ 76 设置栅格 ...................................................................... 77 小结 ............................................................................. 80 第7 章 导航 ..................................................................... 82 菜单结构 ...................................................................... 83 给菜单添加样式 .......................................................... 88 Box Sizing（盒子尺寸） ........................................... 91 标准CSS3 糖果 ...................................................... 92 渐变 ....................................................................... 92 :before 和:after ........................................................ 96 使用base64 编码 ...................................................... 97 下拉效果 .............................................................. 104 搜索框 ................................................................. 107 小结 ........................................................................... 109 第8 章 页头 ................................................................... 110 构建一个更好的国家选择器 .................................... 110 视觉 ........................................................................... 111 CSS 裁剪 .............................................................. 113 图标链接 .............................................................. 114 小结 .................................................................... 116 第9 章 页脚 ............................................................ 117 设计页脚 ............................................................. 118 设置页脚的样式 ............................................ 123 SVG ............................................................. 128 不仅是简单的形状 ......................................... 133 小结 .................................................................... 134 第10 章 分形设计模式 .......................................... 135 定义一个控件 ..................................................... 136 代码一致 ....................................................... 137 升级简单 ....................................................... 137 更加可读 ....................................................... 137 目的明确 ....................................................... 137 开始分形：案例分析 ......................................... 138 更快地开发页面 ............................................ 139 更快地修复Bug ............................................ 139 增强一致性 ................................................... 140 CSS 和JavaScript 的分离 ................................ 141 CSS 和JavaScript 的合并 ................................ 143 小结 .................................................................... 145 第11 章 link 控件 ................................................... 146 控件功能 ............................................................. 146 给链接添加样式 ................................................. 150 当CSS 失效时使用JavaScript .......................... 157 小结 .................................................................... 158 第12 章 sidebox（侧边栏）控件.......................... 160 内容 .................................................................... 160 样式 .................................................................... 161 函数 .................................................................... 165 小结 .................................................................... 169 第13 章 button 控件 .............................................. 170 按钮类型 ............................................................. 171 Primary 按钮 .................................................. 171 带图标的Primary 按钮 ................................... 171 玻璃材质的Primary 按钮 ................................ 171 带阴影效果的Primary 按钮 ............................ 171 镶边的Primary 按钮 ...................................... 172 GO 按钮 ........................................................ 172 为GO 按钮镶边 ............................................. 172 编写button 控件 ................................................. 172 CSS ..................................................................... 175 小结 .................................................................... 185 第14 章 price 控件 ................................................ 186 price 控件介绍 .................................................... 186 HTML 代码 ................................................... 186 CSS 代码 ....................................................... 187 控件代码 ....................................................... 191 shipping 控件 ..................................................... 192 HTML 代码 ................................................... 193 CSS 代码 ....................................................... 193 控件代码 ....................................................... 195 使用控件 ............................................................. 196 小结 .................................................................... 196 第15 章 product 控件 .......................................... 197 插入控件 ............................................................. 199 控件产生的HTML ............................................. 199 CSS ..................................................................... 202 product 控件的数据 ............................................ 205 控件 .................................................................... 206 小结 .................................................................... 208 第16 章 table 控件 ............................................... 210 HTML 结构 ......................................................... 212 数据对象 ............................................................. 215 table 控件 ........................................................... 215 样式 .................................................................... 216 通用效果样式 ................................................ 217 宽屏效果样式 ................................................ 218 窄屏效果样式 ................................................ 223 增加媒体查询 ................................................ 225 小结 .................................................................... 228 第17 章 tab 控件 ................................................... 229 HTML ................................................................. 231 数据 .................................................................... 233 控件 .................................................................... 234 创建tab 控件 ...................................................... 235 JavaScript........................................................... 236 tab 控件的样式 ................................................... 239 所有效果的通用样式 ...................................... 239 水平效果的样式 ............................................ 243 垂直效果的样式 ............................................ 248 小结 .................................................................... 253 第18 章 form控件 ................................................. 254 HTML 结构 ......................................................... 256 fieldset 控件 ....................................................... 258 input 控件 ............................................................ 260 数据对象 ............................................................. 265 创建一个表单 ..................................................... 269 CSS ..................................................................... 269 建立一个快捷方式 ............................................. 281 小结 .................................................................... 282