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