高性能HTML5 [平装] 9787121226526

《高性能HTML5》为读者讲解了如何用HTML5从一开始就设计一个高性能的网站，以及如何对已有网站进行改良，使得它们具备优越的性能。《高性能HTML5》中总结了许多实践经验、关键技巧，并提供了丰富的示例，作者有意无意地将软件工程以及前端开发技术之道隐藏于朴实的描述中。通过学习《高性能HTML5》，读者能够掌握如何创建自己的高性能网站。《高性能HTML5》适合于想创建自己网站的初学者，同样也适用于资深网站开发者用于优化已有网站。一线前端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 更深入地理解CSS5 第2部分性能基础 第2章开发原则8 编写符合当代浏览器性能的代码8 减少HTML中元素的数量9 减少重绘9 用CSS来布局，处理边界11 渐进式增强14 使用特征检测来显示渐进式增强15 各司其职16 HTML17 CSS17 JavaScript18 小结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 不要重组DOM35 延伸阅读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 提示用户安装GoogleChromeFrame75 为iPhone使用Viewport75 加载jQuery75 添加Google统计代码76 更多可选项76 设置栅格77 小结80 第7章导航82 菜单结构83 给菜单添加样式88 BoxSizing（盒子尺寸）91 标准CSS3糖果92 渐变92 :before和:after96 使用base64编码97 下拉效果104 搜索框107 小结109 第8章页头110 构建一个更好的国家选择器110 视觉111 CSS裁剪113 图标链接114 小结116 第9章页脚117 设计页脚118 设置页脚的样式123 SVG128 不仅是简单的形状133 小结134 第10章分形设计模式135 定义一个控件136 代码一致137 升级简单137 更加可读137 目的明确137 开始分形：案例分析138 更快地开发页面139 更快地修复Bug139 增强一致性140 CSS和JavaScript的分离141 CSS和JavaScript的合并143 小结145 第11章link控件146 控件功能146 给链接添加样式150 当CSS失效时使用JavaScript157 小结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 CSS175 小结185 第14章price控件186 price控件介绍186 HTML代码186 CSS代码187 控件代码191 shipping控件192 HTML代码193 CSS代码193 控件代码195 使用控件196 小结196 第15章product控件197 插入控件199 控件产生的HTML199 CSS202 product控件的数据205 控件206 小结208 第16章table控件210 HTML结构212 数据对象215 table控件215 样式216 通用效果样式217 宽屏效果样式218 窄屏效果样式223 增加媒体查询225 小结228 第17章tab控件229 HTML231 数据233 控件234 创建tab控件235 JavaScript236 tab控件的样式239 所有效果的通用样式239 水平效果的样式243 垂直效果的样式248 小结253 第18章form控件254 HTML结构256 fieldset控件258 input控件260 数据对象265 创建一个表单269 CSS269 建立一个快捷方式281 小结282 我曾写过数以千计的技术文字。在这些作品里，我想还没有哪个比这本书更重要。我和Mike 曾描述过一个Web 开发的范例，这个范例有变革这个专业的潜力。正如我们在这本书中反复说的，如果Web 开发者能接受我们描述的方法论，他们就能用更少的时间做更多的事情；如果甚至有相当显著比例的Web 开发者“解咒”这个方法论，我们和他们将可以加速创造整个世界广域网的创造性内容。很多内容还不在网上，很多应用因为驱动它们的数据不在网上，甚至还没有设计出来。如果Web 开发者能够加速从网上获取数据的进程，我们就可以加速这个创造过程，改变世界各地的人们的应用。 我和Mike 不要求我们现在呈现给大家的方法论是全新的。事实上，我们给出了Mike首次发现这些方法的出处。并且，我们怀疑这些方法已经被独立地发现了很多次了。然而，直到现在仍没有人用清晰的例子记载它。我们想要改变这个现状，而且，我想我们干得不错。再次重申，我们希望看到这些范例被广泛接受，相较于卖书（事实上，写一本书还远远不够），我们更希望我们的工作能够使我们的Web 开发同行受益，从而不断地将我们的工作做得更好，以便每个访问者或者说每一个人都能获得更佳的体验。 自认为具备这种影响力的想法是否过于自大？我们愿意一试，但你是裁判。 Jay Bryant 版权页： 插图： 除非你只是做一个欢迎页面，否则导航对于你的网站来说是必不可少的。导航对于网站的成功非常关键，你需要好好思考你的策略。除了分类要清晰，还需要让用户能轻松地找到网站提供的各种内容。有时人们很容易在界面上花大量精力，尤其是以设计优先开始建站的时候。然而，内容才是王道。所以导航不要和内容去抢用户的眼球，这是一条铁律。这意味着导航要易被发现，更重要的是要易用。 为了使导航确实易用，你需要支持不同的用户行为。不同用户喜欢按不同方式导航网站，你需要支持所有常用的网站导航方式，否则你会让不能如其所愿导航的用户远离你的网站。Don 7 Make Me Thinkl是一本可用性领域的伟大的书，书中有一个类比：把你的网站想象成百货商店。有些顾客查看商品指示牌，然后从头到尾浏览货架直至找到想要的商品。有些顾客找到店员，问他们东西在哪里。第一种顾客相当于使用菜单查找内容的用户，问店员的顾客相当于使用网站搜索功能的用户。你需要同时为这两种客户提供导航机制。 我们继续使用这个类比，百货商店把货架上的部分商品在货架的侧端也摆上，从而顾客闲逛时也能看到。你也应该考虑用类似的导航方法。比如包含主导航中条目的副导航（通常为下拉菜单）。我们称这种导航为“第三种导航”，因为这是我们第三种导航方案，前两种分别为菜单和搜索。 在深入菜单背后的代码之前，有必要展示一下这章后续部分我们要创建的菜单的效果图。图7—1展示了菜单的大部分内容（菜单比页面宽，但是图已经展示了其大部分）。