高性能HTML5.pdf

高性能HTML5.pdf
 

书籍描述

编辑推荐
一线前端Team奇舞团领衔翻译
众多大规模、高复杂度实际网站案例
蕴含软件工程与前端开发之道的朴实之作
通过解决实际问题影响和改变前端行业规则

媒体推荐
想让大规模高复杂度网站更快更易扩展?远不止H5/CSS3 这本彻头彻尾的实战书将教会你一切。
《高性能HTML5》为读者讲解了如何用HTML5 从一开始就设计一个高性能的网站,以及如何对已有网站进行改良,使得它们具备优越的性能。《高性能HTML5》中总结了许多实践经验、关键技巧,并提供了丰富的示例,作者有意无意地将软件工程以及前端开发技术之道隐藏于朴实的描述中。
通过学习《高性能HTML5》,读者能够掌握如何创建自己的高性能网站。《高性能HTML5》适合于想创建自己网站的初学者,同样也适用于资深网站开发者用于优化已有网站。

作者简介
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 总是能提供一些高效的模式,让用户和开发者都能有一个很好的体验。

目录
第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

序言
我曾写过数以千计的技术文字。在这些作品里,我想还没有哪个比这本书更重要。我和Mike 曾描述过一个Web 开发的范例,这个范例有变革这个专业的潜力。正如我们在这本书中反复说的,如果Web 开发者能接受我们描述的方法论,他们就能用更少的时间做更多的事情;如果甚至有相当显著比例的Web 开发者“解咒”这个方法论,我们和他们将可以加速创造整个世界广域网的创造性内容。很多内容还不在网上,很多应用因为驱动它们的数据不在网上,甚至还没有设计出来。如果Web 开发者能够加速从网上获取数据的进程,我们就可以加速这个创造过程,改变世界各地的人们的应用。
我和Mike 不要求我们现在呈现给大家的方法论是全新的。事实上,我们给出了Mike首次发现这些方法的出处。并且,我们怀疑这些方法已经被独立地发现了很多次了。然而,直到现在仍没有人用清晰的例子记载它。我们想要改变这个现状,而且,我想我们干得不错。再次重申,我们希望看到这些范例被广泛接受,相较于卖书(事实上,写一本书还远远不够),我们更希望我们的工作能够使我们的Web 开发同行受益,从而不断地将我们的工作做得更好,以便每个访问者或者说每一个人都能获得更佳的体验。
自认为具备这种影响力的想法是否过于自大?我们愿意一试,但你是裁判。
Jay Bryant

文摘
译者序
刚拿到这本书的时候,先看了一下书名,叫作Pro HTML5 Performance,于是理所当然地想到,这应该是一本有关HTML5 性能的理论教程,就像其他领域或者类似的书籍那样。可是当我翻看了许多页之后,我发现这本书的内容和我对书名的印象相去甚远。
或许作者是一名不喜欢按照常理出牌的工程师,也或许作者取这个书名另有一种我所不能理解的深意。在发现书的内容和书名不大匹配之后,我经历了短暂的迷茫和疑惑,尤其是看到作者在书中的示例代码里贴上了大量不可阅读的base64 图片内容的时候,曾经有那么一小会儿的疑问,觉得也许这不是一本值得翻译的书。但是随着继续深入阅读下去,我发现我的看法完全改变了。
的确,这本书并不是一本讲理论的书,如果照着我们的预期,想从这本书中很直接地获取到关于HTML5 性能的知识点,或者是大家习惯于期待的很直接的“性能军规”,那么大家会失望的。因为这本书讲的完全不是纯粹的理论,而是彻头彻尾地在讲解着“实战”,从第1 部分一直到最后,这本书一直在强调着实战,其中的每一段代码都不是凭空捏造出来的,而是来自于实实在在的实战——作者自己在大型互联网企业制作高流量网站的实际经验。
这不是一本理论书,它在前端发展史上永远不可能达到权威指南或者JS 高程那样的地位,而且可想而知,由于作者的写作方式,这本书也一定会招人吐槽,我相信不论是原著还是这版译本,也一定会有很多人对书的内容吐槽。甚至我们团队在翻译这本书的时候,我们自己内部也在不停地吐槽。所以得知这本书即将出版,我已经可以预感到对书中内容和我们不太擅长、不太有经验的翻译技巧的滔滔不绝的吐槽也许会把我们彻底淹没,实在是亚力山大!
既然是这样一本有争议的书,那么为什么我们还要翻译它,而且前后翻译了有一年多的时间,一度差点使这本书难产?
先说说好的原因,因为我们发现这本书有很大的实战价值,全书并没有高深的理论知识,作者一直在不停地讲实战,尽管没有从实战中拔高任何理论价值的东西,但是价值的确存在,存在于作者描写的那些如何制作网站的过程中。
作者提到:“我们想通过这本书分享给读者的内容,来自于我们从解决实际问题的过程中得到的经验教训,以及我们的职业所带来的独特视角。我们希望带着你更深入地理HTML5/CSS3 性能相关的领域,希望通过介绍一些改变游戏规则的模式,使你的前端技能、水平提高一个层次。我们也很希望看到这本书能给你带来Web 开发领域一些好的变化,至少是在一些规模较大的和较复杂的网站应用方面。”
作者的确做到了上面这一点,虽然做得并非尽善尽美,但是已经做得很好了,比我们大多数陷入繁忙业务中的团队要做得好。在我们努力从业务中给自己挤出时间学习和成长的时候,作者已经通过梳理自己在前端行业中的经验,通过这本书在影响整个前端工程行业的发展。这本书中讨论的种种工程学上的问题,甚至比传授知识本身更加重要。
一位基础很好的年轻毕业生,可以很快地掌握权威指南或者高程上的知识,并用之解决问题,从而获得一种自我成长中的狂喜。而一位已经在前端工作多年的工程师,在翻看你手里的这本书的时候,也许会有发自内心的一笑,只是浅浅一笑,一切尽在不言中。
不好的原因自然是我自身的懒散,也许不该翻译那么久,拖了很久之后,有赖于同事们的帮忙,最终才促成了此书译稿的完成。在这里要特别感谢另一位主译者陈健同学,以及所有参加此书翻译的奇舞团同学,他们人数很多,不便于一一列举出来,在此表示由衷的感谢。
这是一本看似平淡的好书,就像淡淡的茶叶,不会给人以很强烈的刺激,但是那种清香,会让阅读者觉得愉悦。作者有意无意地将软件工程以及前端开发之道隐藏于朴实的描述中,在那看似平常的文字里,没有奇技淫巧,只有平实规矩的实现,有很多选择,在每一个选择中都能看见此道,印证它,则需要思考,更需要时间的沉淀。
你我终将老去,此道永恒。
月影
2014 年3 月5 日

购买书籍

当当网购书 京东购书 卓越购书

PDF电子书下载地址

相关书籍

搜索更多