第1篇 用户体验 1
第1章 用户体验 2
1.1何为用户体验 2
1.1.1用户关注点 2
1.1.2用户的产品使用意愿 3
1.1.3拴住用户的心 5
1.2了解用户心理 6
1.2.1用户可接受的页面加载时长 6
1.2.2用户内心波动 7
1.2.3增加用户耐心度 8
1.3前端的作用 9
1.3.1用户的第一印象 9
1.3.2前端之于万物互联 10
1.3.3让产品使用变得有趣 10
第2篇 宏观上的俯瞰 13
第2章 前端性能瓶颈 14
2.1技术框架选型 14
2.1.1传统DOM操作对性能的影响 15
2.1.2双向数据绑定 16
2.1.3业务兼容性 20
2.1.4 UI组件库的选择 21
2.2项目复杂程度 22
2.2.1单一页面完成复杂交互 22
2.2.2同一页面的数据多寡 24
2.3运行环境 24
2.3.1浏览器请求并发数限制 24
2.3.2简述JavaScript这门语言 27
第3章 前端的分层 29
3.1 HTML结构层 29
3.1.1何为HTML 29
3.1.2HTML5新增哪些特性 32
3.1.3HTML5带来怎样的创新 35
3.2 CSS样式层 36
3.2.1 CSS是什么 36
3.2.2 CSS预处理之Less、 Sass 38
3.2.3 CSS3带来的变化 41
3.3 JS行为层 42
3.3.1何为JavaScript 42
3.3.2 ES6、 ES7、 ES8概述 44
第3篇 分条目详解性能优化 50
第4章 HTML层级优化 50
4.1化繁为简 50
4.1.1减少HTML的层级嵌套 50
4.1.2减少空标签、无用标签的滥用 53
4.2标签属性及模板 54
4.2.1标签的Style属性 54
4.2.2标签的自定义属性 57
4.2.3合理利用模板引擎 58
4.3容易忽略的细节 61
4.3.1 link标签妙用 61
4.3.2 〈img〉标签 64
4.3.3标签的src属性及href属性 65
第5章 CSS层级优化 67
5.1样式多复用 67
5.1.1样式继承与复用 67
5.1.2尽量避免同一类名多次渲染 70
5.1.3少用高优先级选择器，慎用！important 71
5.2 CSS选择器 72
5.2.1伪选择器的妙用 72
5.2.2忌层级过深的CSS选择器 74
5.2.3不用曾经的CSS表达式 75
5.2.4你用过*通配符吗 76
5.3减少“昂贵”的样式成本 76
5.3.1何为昂贵的样式 76
5.3.2减少浏览器的重排与重绘 77
5.3.3避免float滥用 80
5.4 CSS层级其他优化 81
5.4.1 CSS Sprite——雪碧图 81
5.4.2充分利用强大的CSS3 83
5.4.3 media query媒体查询 84
第6章 JavaScript层级优化 86
6.1 JavaScript的运行机制 86
6.1.1什么是线程 86
6.1.2 JavaScript执行机制与其他执行机制的异同 87
6.2定时器是一把双刃剑 88
6.2.1用好定时器 88
6.2.2如何及时清除定时器 89
6.2.3合理使用CSS3动画 89
6.3事件的绑定 90
6.3.1多利用事件代理委托 90
6.3.2避免重复的事件监听 92
6.3.3事件冒泡机制 94
6.4一些优秀的JavaScript层级思想 95
6.4.1 jQuery的ready与原生window.onload的比较 95
6.4.2 MWM框架的组件的生命周期 96
6.4.3变量缓存与私有化 98
第7章 资源加载优化 101
7.1资源解析优化 101
7.1.1 DNS优化 101
7.1.2 CDN部署与缓存 104
7.1.3 HTTP缓存 105
7.2加载模式 109
7.2.1懒加载 109
7.2.2分页加载 113
7.2.3区域无刷Ajax加载 114
7.3 资源优化处理 116
7.3.1 CSS预处理及压缩 116
7.3.2 JavaScript代码压缩处理 117
7.3.3Base64的妙用 120
7.3.4大、中、小图片方案及图片压缩 121
7.3.5屏蔽开发时的调试、日志代码 123
第8章 其他层级优化 126
8.1页面渲染过程 126
8.1.1从输入一个URL到页面出现的过程 126
8.1.2不做重复的加载 128
8.1.3精简Cookie 129
8.1.4合理利用SessionStorage和LocalStorage 130
8.2控制交互请求 133
8.2.1浏览器请求并发数限制 133
8.2.2减少同后端交互请求数 134
8.2.3代理、中间件、请求分发 135
8.3合理的数据结构 135
8.3.1前端展示、后端处理的思维模式 135
8.3.2数据结构宜简不宜繁 136
8.3.3采用轻量级数据交换格式 137
8.3.4前后端联调对接的那些事 138
8.4有趣的异步 139
8.4.1异步机制 139
8.4.2 Promise、async/await 143
8.5充分利用硬件GPU加速 145
8.5.1 GPU图形处理加速 146
8.5.2合理利用GPU加速 151
第4篇 好用的前端工具与新技术 153
第9章 前端调试 154
9.1强大的Chrome 154
9.1.1 Chrome浏览器 154
9.1.2 Chrome开发者工具 157
9.2断点 163
9.2.1 console.log日志打印 163
9.2.2强大的断点 164
9.2.3打断点的方式 165
第10章 常见的自动化构建工具 167
10.1构建工具概述 167
10.2 Grunt 168
10.2.1 Grunt的环境搭建 168
10.2.2 Grunt做前端构建 170
10.3 Gulp 173
10.3.1 Gulp环境搭建 173
10.3.2简单实现一个Gulp的前端自动化构建 175
10.4强大的Webpack 176
10.4.1 Webpack概述 176
10.4.2 Webpack的优势在哪 177
10.4.3 Webpack构建一个简单的压缩打包页面 177
10.4.4 Webpack的一些常用的配置 183
第11章 新技术对性能的提升 184
11.1即时通信 184
11.1.1传统的长短连接轮询 184
11.1.2订阅一发布模式 185
11.1.3 Socket.io 187
11.2 MVVM框架 192
11.2.1虚拟DOM 193
11.2.2 Diff算法 194
11.3 Vue相关知识 199
11.3.1 v-if和v-show 200
11.3.2细分Vue组件 207
11.3.3巧用Vuex数据中心 212
11.4移动端相关应用 215
11.4.1骨架屏 215
11.4.2 PWA渐进式增强Web应用 216
第5篇 前端思想与案例分析 219
第12章 思想高于逻辑，逻辑强于代码 220
12.1首次架构重于迭代升级 220
12.2良好的编码习惯 222
12.3代码重构 224
12.4开发效率与性能间的权衡 225
第13章 性能优化案例分析 227
13.1某搜索网站的优化 227
13.2某电商网站的优化 233
13.3某新闻网站的优化 238