《Web前端性能优化》求取 ⇩

第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.4UI组件库的选择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.1HTML结构层29

3.1.1何为HTML29

3.1.2HTML5新增哪些特性32

3.1.3HTML5带来怎样的创新35

3.2CSS样式层36

3.2.1 CSS是什么36

3.2.2 CSS预处理之Less、 Sass38

3.2.3 CSS3带来的变化41

3.3JS行为层42

3.3.1何为JavaScript42

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.1link标签妙用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少用高优先级选择器，慎用！important71

5.2CSS选择器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.4CSS层级其他优化81

5.4.1 CSS Sprite——雪碧图81

5.4.2充分利用强大的CSS383

5.4.3 media query媒体查询84

第6章JavaScript层级优化86

6.1JavaScript的运行机制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.1jQuery的ready与原生window.onload的比较95

6.4.2 MWM框架的组件的生命周期96

6.4.3变量缓存与私有化98

第7章资源加载优化101

7.1资源解析优化101

7.1.1DNS优化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精简Cookie129

8.1.4合理利用SessionStorage和LocalStorage130

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.2Promise、async/await143

8.5充分利用硬件GPU加速145

8.5.1GPU图形处理加速146

8.5.2合理利用GPU加速151

第4篇好用的前端工具与新技术153

第9章前端调试154

9.1强大的Chrome154

9.1.1Chrome浏览器154

9.1.2 Chrome开发者工具157

9.2断点163

9.2.1console.log日志打印163

9.2.2强大的断点164

9.2.3打断点的方式165

第10章常见的自动化构建工具167

10.1构建工具概述167

10.2 Grunt168

10.2.1 Grunt的环境搭建168

10.2.2 Grunt做前端构建170

10.3 Gulp173

10.3.1Gulp环境搭建173

10.3.2简单实现一个Gulp的前端自动化构建175

10.4强大的Webpack176

10.4.1Webpack概述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.3Socket.io187

11.2MVVM框架192

11.2.1虚拟DOM193

11.2.2 Diff算法194

11.3Vue相关知识199

11.3.1 v-if和v-show200

11.3.2细分Vue组件207

11.3.3巧用Vuex数据中心212

11.4移动端相关应用215

11.4.1骨架屏215

11.4.2PWA渐进式增强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