高性能响应式Web开发实战.pdf

高性能响应式Web开发实战.pdf
 

书籍描述

内容简介
响应式Web设计的理念是让页面根据用户行为以及设备环境(屏幕尺寸、分辨率等)进行相应的响应和调整。响应式网页设计就是一个网站能够兼容多种终端,而不是为每种终端做一个特定的版本。
本书分为两部分,首部分是前端的基本响应式技术,涉及响应式布局、图片的处理、解决问题的思路以及一些进阶的技巧等;第二部分在以上内容的基础上,加入了对页面进行性能调优的内容,包括如何确立性能指标,如何使用不同的工具衡量性能,以及如何解决常规的性能问题等。
本书适合有兴趣学习响应式技术的前端从业人员和其他相关人员阅读。

编辑推荐
1.介绍新的响应式解决方案。
2.深入浅出,从基础触发,逐步引入更高阶技术。
3.注重实战,将知识运用到实践中,解决正在遇见或者即将遇见的问题。
4.知其然并知其所以然,了解技术的前生今世;开拓思维,挖掘更多的解决方案。

作者简介
李光毅 曾就职于爱奇艺,现任百度高级前端工程师,主要负责前端Web 产品开发, 以及后端Node.js 框架维护。 在HTML、JavaScript 等前端技术方面略有心得,喜欢对Web 性能吹毛求疵,同时也对ASP.NET、MongoDB、Python 等技术有着浓厚的兴趣。业余时间曾经喜欢折腾硬件编程,如Kinect for Windows、Leap Motion 等,现在爱好使用Unity 写游戏。热爱前端,乐于分享。

目录
第1章概述及任务介绍1
1.1 为什么需要响应式设计 1
1.1.1产品形态需要 1
1.1.2性能与商业考虑 3
1.2 本书的线索 3
1.3 写作思路 4
1.4 定义响应式 5
1.5 本书任务 6
第2章 响应式中要面对的问题 9
2.1 像素密度 9
2.2 CSS像素 14
2.3 视口 17
2.3.1桌面浏览器的视口 17
2.3.2移动设备浏览器的视口 18
2.3.3设备宽度 20
小结 21
第3章 布局 23
3.1 写在编码前的话 23
3.1.1写出好的代码 24
3.1.2代码的浏览器适配问题 25
3.1.3仰望星空与脚踏实地 26
3.2 全局样式 27
3.3 无懈可击的导航栏 30
3.3.1桌面端 30
3.3.2移动端导航栏 37
小结 40
第4章 布局——响应式篇 41
4.1 媒体查询 41
4.1.1为什么需要媒体查询 41
4.1.2什么是媒体查询 44
4.1.3媒体查询中的逻辑 45
4.1.4媒体查询的策略 46
4.1.5导航栏与媒体查询 51
4.1.6polyfill 56
4.2 伸缩布局 58
4.2.1为什么需要伸缩布局 58
4.2.2快速入门 58
4.2.3基本应用 60
4.2.4回归导航栏flexbox.css 62
4.3 相对单位 63
4.3.1相对单位em 65
4.3.2相对单位rem 67
4.3.3如何使用这几种单位 68
4.4 标题布局 70
4.4.1背景 71
4.4.2文字居中 73
4.5 响应式文字 79
4.5.1标题 79
4.5.2正文内容 83
小结 89
第5章 响应式图片 91
5.1 万能的100% 91
5.2 响应式图用例 93
5.3 srcset语法 96
5.3.1移动优先或桌面优先 97
5.3.2计划赶不上变化 98
5.3.3家长式管理 99
5.4 <picture>元素 99
5.4.1sizes 99
5.4.2<picture>元素和<source>元素 102
5.4.3 polyfill 105
5.4.4 <picture>元素的未来 105
5.5 放弃图片 105
5.5.1事实上我们并不需要图片 105
5.5.2数据URI 105
5.5.3CSS形状 107
5.5.4图标字体 110
5.6 后端方案 118
5.6.1前端配置 118
5.6.2后端配置 119
5.6.3注意 119
5.7 优化标题的背景图片 120
5.7.1image—set 120
5.7.2渐进式图片 120
5.7.3媒体查询 122
5.7.4无需图片 123
小结 124
第6章 脚本与性能:入门篇 125
6.1 为何要选择脚本 125
6.2 为何要谈性能 126
6.3 如何衡量性能 126
6.3.1页面加载时间 127
6.3.2速度指数—加载时间并非万能 129
6.3.3帧数 133
6.3.4工具与测试 136
6.4 传统脚本的性能优化指南 147
6.4.1懒加载初级版本 147
6.4.2优化点1:滚动事件的回调函数 153
6.4.3优化点2:重绘与回流 157
6.4.4优化点3:选择器 161
小结 163
第7章 脚本与性能:提高篇 165
7.1 避免脚本 165
7.1.1样式实现 166
7.1.2脚本实现 168
7.1.3回到导航栏 170
7.2 封装与加载器 175
7.3 性能优化思路 181
7.4 后端能做什么 185
7.4.1RESS 185
7.4.2其他 187
小结 187
第8章 工程问题 189
8.1 安装Node.js 189
8.2 Bower 192
8.2.1什么是Bower 192
8.2.2安装Bower 193
8.2.3使用Bower 194
8.2.4进阶使用 195
8.3 Grunt 198
8.3.1什么是Grunt 198
8.3.2安装Grunt 198
8.3.3使用Grunt 199
8.4 Yeoman 203
8.4.1什么是Yeoman 203
8.4.2安装Yeoman 204
8.4.3生成项目 205
小结 206
后记 207

文摘
版权页:



插图:



8.3 Grunt
8.3.1 什么是Grunt
通常在网页上线前,需要进行一系列打包和准备工作,例如,使用JSHint对代码质量进行检查,使用UglifyJS对代码进行压缩和拼接,编译SasS以及对图片压缩优化等。这些操作的特点是,每次上线前的流程都是一致的、机械的、几乎无需人工干预。但是,如果每次都手动运行这些命令,对操作人员来说也是一件感觉有点儿鸡肋的事。操作人员希望有工具能将这些任务组合起来,一键命令就能够让这些任务井然有序的运行。Grunt就是这么一个工具。
8.3.2 安装Grunt
与Bower相同,首先需要通过npm在全局安装Grunt:
npm install—g grunt—cli
这里我们只是将Grunt工具安装完毕,它还无法实现压缩、图片优化等功能。如果需要实现对应的功能,还需要安装对应的Grunt插件。在上线之前希望做3件事:首先是将JavaScript脚本压缩并且合并,其次对less代码进行编译,最后再对图片进行优化。对应这3个功能,需要分别安装3个Grunt插件,即contrib—uglify、contrib—less和contrib—imagemin。

购买书籍

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

PDF电子书下载地址

相关书籍

搜索更多