Web前端性能优化
  • 推荐0
  • 收藏0
  • 浏览376

Web前端性能优化

张启玉 (作者) 

  • 书  号:978-7-121-40358-3
  • 出版日期:2021-03-09
  • 页  数:252
  • 开  本:16(185*260)
  • 出版状态:上市销售
  • 维护人:张月萍
纸质版 ¥79.00
本书涵盖了前端优化的方方面面,不只是教给读者解决具体性能问题的工具手册,更重要的是帮助读者构筑起一套完整的知识体系。在此基础上读者可以做到举一反三,触类旁通,从一个性能问题出发能够提出对整个系统的优化改进策略。虽然前端性能优化是一个老生常谈的问题,业界也已经有比较成熟的优化方法,但也需要承认这是一个不断进行着技术更新和迭代的领域,新技术的出现带来了新的方法同时也会引入新的问题,本书对这些新技术和新问题都有所涉及。另外说到底前端性能优化是一个工程实践,所以本书不仅有扎实全面的理论做基础,同时还包含了大量的实践案例,充分做到了理论结合实践。
网站80%的性能瓶颈在前端,Web性能优化是前端开发的基本功,作者基于5年一线大厂开发经验,逐个性能点解析实践场景,腾讯|字节|华为|阿里等行家齐赞。
前言
为什么要写这本书
随着前端技术的不断发展,Web 应用所能承载的业务形态从包含动画、视频等丰富内容的信息展示,到逐渐接近原生应用的交互体验,已经变得越来越多样化、复杂化。这就要求优秀的Web 应用不仅能够为用户提供满足需求的功能,同时还能够应对随之带来的性能挑战。
那么对一位合格的前端开发工程师来说,可以完成业务功能的需求开发只是基本要求,能够及时、准确地发现系统中存在的性能瓶颈,并给出合适的解决方案,这才是区分初、中级前端工程师与高级前端工程师的重要依据。
要具备这样的能力,除了平时通过性能调优去积累实践经验,构筑起关于前端性能的知识体系也尤为重要,在面对具体的性能问题时,能够知其然并知其所以然,才可以做到有的放矢,不至于出现优化了页面渲染性能反而降低了首屏加载速度的问题。
目前图书市场上关于前端性能优化方面的图书不少,但由于前端性能涉及知识面广泛,所以多数图书都只关注可能导致性能问题的部分领域,或偏重于优化实践的场景总结,而对于知识体系的搭建多有疏漏。
本书以Web 前端性能入手,首先通过梳理页面生命周期进行知识体系的梳理与总结,然后从八个方面对性能优化进行详细深入且结合实践的讲解,最后以性能检测方法的介绍作为回顾和总结。本书不但可以帮助读者构建性能分析的知识体系,而且可以通过实践案例帮助读者提高分析与优化性能的实战能力。

本书有何特色
1. 注重性能优化知识体系的梳理和总结
为了让读者在面对性能问题时,能做到举一反三、触类旁通、知其然并知其所以然,本书对前端涉及性能优化的知识体系进行了全面的梳理与总结。
2. 涵盖了前端页面生命周期中各种影响性能的方面
本书以前端页面的生命周期为框架,涵盖内容包括图像优化、资源加载优化、前端代码编写优化、构建过程优化、客户端渲染优化、服务器端渲染优化、本地存储优化、缓存优化等方面。
3. 对各个性能影响方面的讲解做到了理论联系实践本书针对八个影响前端性能的优化方面,以独立章节进行了详细介绍,不但包括细致的理论分析,而且也结合了实际案例,帮助读者更好地理解技术知识点,知道在实践中如何运用这些技术。
4. 八大性能优化方面,章节独立、工具性强
本书拆分出的八个影响前端性能的优化方面,在内容上具有一定的模块独立性。有性能优化经验的前端工程师,不仅可针对自身所面对的具体性能问题选择对应章节进行学习,也可在日后的工作实践中随时查阅和参考这些内容。
5. 突出性能检测实践
对性能优化工作来说,最怕的就是为了优化而优化,这样极有可能花费了大量的
精力,还不一定能得到理想的性能优化收益。本书最后一章以性能检测为主旨,介绍了该如何恰当选取性能检测工具,以及如何利用它们来辅助进行性能检测与优化,最终达到最大化优化收益的效果。
6. 提供完善的技术支持和售后服务
读者在阅读本书过程中如有疑问可以通过该邮箱和作者联系。

本书内容及知识体系
第1 篇 前端性能优化概述(第1~2 章)
本篇介绍了性能优化是什么,以及前端页面的生命周期。其主要内容包括进行性能优化的起因、性能因素会带来哪些影响、评估性能的模型、性能优化的步骤及前端页面生命周期中的步骤等。
第2 篇 典型模块的性能优化(第3~10 章)
本篇介绍了前端性能优化中所涉及的八个典型模块的优化。其主要内容包括图像的优化、资源加载的优化、前端代码考虑性能的最佳实践、构建过程的优化、客户端渲染的优化、服务器端渲染、浏览器本地存储所带来的优化、利用缓存提升性能等。
第3 篇 前端性能检测实践(第11 章)
本篇介绍了前端性能检测中常用的一些检测工具及使用方法。其主要内容包括Lighthouse、PageSpeed Insight、WEBPAGETEST 及Chrome 开发者工具与相关的各个面板,诸如任务管理器、Network 面板、Coverage 代码执行覆盖率面板、Memory 内存占用面板、Performance 和Performance monitor 性能检测面板。

适合阅读本书的读者
? 前端开发工程师。
? 希望完善关于前端性能知识体系的人员。
? 需要一本案头必备查询前端性能优化手册的人员。

阅读本书的建议
? 对前端性能优化的初学者,建议从第1 章开始顺次阅读。
? 有一定性能优化经验的读者,可以根据实际情况选择具体模块章节进行针对性学习。
? 本书部分章节内容需要读者具备一定的JavaScript 编程经验、前端构建工具的基本使用能力、现代常用前端框架的使用经验(如Vue 和React),否则在阅读上会有一定的障碍。

目录

第1 篇 前端性能优化概述
第1 章 什么是性能优化 1
1.1 性能的起因 1
1.2 性能的影响 2
1.2.1 用户的留存 2
1.2.2 网站的转化率 3
1.2.3 体验与传播 3
1.3 性能评估模型 4
1.3.1 响应 4
1.3.2 动画 5
1.3.3 空闲 5
1.3.4 加载 5
1.4 性能优化的步骤 6
1.4.1 性能测量 6
1.4.2 生命周期 7
1.4.3 优化方案 8
1.5 本章小结. 9

第2 章 前端页面的生命周期 10
2.1 一道前端面试题 10
2.2 网络请求线程开启 11
2.2.1 进程与线程. 12
2.2.2 单进程浏览器 12
2.2.3 多进程浏览器 13
2.3 建立HTTP 请求 15
2.3.1 DNS 解析 15
2.3.2 网络模型 16
2.3.3 TCP 连接 17
目录∣VII
2.4 前后端的交互 19
2.4.1 反向代理服务器 19
2.4.2 后端处理流程 20
2.4.3 HTTP 相关协议特性 20
2.4.4 浏览器缓存. 21
2.5 关键渲染路径 22
2.5.1 构建对象模型 23
2.5.2 渲染绘制 25
2.6 本章小结 26

第2 篇 典型模块的性能优化
第3 章 图像优化 27
3.1 图像基础 27
3.1.1 图像是否必需 28
3.1.2 矢量图和位图 28
3.1.3 分辨率 31
3.1.4 压缩的有损和无损 32
3.2 图像格式 33
3.2.1 JPEG 33
3.2.2 GIF 36
3.2.3 PNG ... 38
3.2.4 WebP 39
3.2.5 SVG ... 41
3.2.6 Base64 42
3.2.7 格式选择建议 43
3.3 使用建议 43
3.3.1 CSS Sprite 44
3.3.2 Web 字体 46
3.3.3 注意display:none 的使用 47
3.4 本章小结 48

第4 章 加载优化 49
4.1 图像延迟加载 49
4.1.1 什么是延迟加载 49
4.1.2 实现图片的延迟加载:传统方式 52
4.1.3 实现图片的延迟加载:Intersection Observer 方式 55
4.1.4 实现图片的延迟加载:CSS 类名方式. 56
4.1.5 原生的延迟加载支持 58
4.2 视频加载 59
4.2.1 不需要自动播放 59
4.2.2 视频代替GIF 动画 60
4.3 加载注意事项 61
4.3.1 首屏加载 62
4.3.2 资源占位 63
4.3.3 内容加载失败 63
4.3.4 图像解码延迟 64
4.3.5 JavaScript 是否可用 65
4.4 资源优先级 66
4.4.1 优先级 66
4.4.2 预加载 67
4.4.3 预连接 68
4.4.4 预提取 68
4.5 本章小结 69

第5 章 书写高性能的代码 71
5.1 数据存取 71
5.1.1 数据存取方式 71
5.1.2 作用域和作用域链 72
5.1.3 实战经验 73
5.2 流程控制 75
5.2.1 条件判断 75
5.2.2 循环语句 79
5.2.3 递归 ... 81
5.3 字符串处理 84
5.3.1 字符串拼接. 84
5.3.2 正则表达式. 85
5.3.3 优化正则表达式 87
5.4 快速响应 88
5.4.1 浏览器的限制 89
5.4.2 异步队列 89
5.5 其他建议 90
5.5.1 避免多重求值 90
5.5.2 使用位操作. 91
5.5.3 使用原生方法 92
5.6 本章小结 93

第6 章 构建优化 94
6.1 压缩与合并 94
6.1.1 HTML 压缩 94
6.1.2 CSS 压缩 97
6.1.3 JavaScript 压缩与混淆 98
6.1.4 文件合并 99
6.2 使用fis3 进行前端构建 102
6.2.1 构建流程 102
6.2.2 构建实操 103
6.3 使用webpack 进行前端构建 105
6.3.1 模块打包工具 105
6.3.2 安装建议 106
6.3.3 配置文件 106
6.4 webpack 的优化性能 107
6.4.1 尽量与时俱进 107
6.4.2 减少Loader 的执行 107
6.4.3 确保插件的精简和可靠 108
6.4.4 合理配置resolve 参数 109
6.4.5 使用DllPlugin 110
6.4.6 将单进程转化为多进程 113
6.4.7 压缩打包结果的体积 114
6.5 本章小结 117

第7 章 渲染优化 118
7.1 页面渲染性能 118
7.1.1 流畅的使用体验 118
7.1.2 渲染过程 119
7.2 JavaScript 执行优化 120
7.2.1 实现动画效果 120
7.2.2 恰当使用Web Worker 122
7.2.3 事件节流和事件防抖 124
7.2.4 恰当的JavaScript 优化 126
7.3 计算样式优化 128
7.3.1 减少要计算样式的元素数量 128
7.3.2 降低选择器的复杂性 129
7.3.3 使用BEM 规范 129
7.4 页面布局与重绘的优化 131
7.4.1 触发页面布局与重绘的操作 131
7.4.2 避免对样式的频繁改动 131
7.4.3 通过工具对绘制进行评估 133
7.4.4 降低绘制复杂度 136
7.5 合成处理 137
7.5.1 新增图层 137
7.5.2 仅与合成相关的动画属性 137
7.6 本章小结 138

第8 章 服务器端渲染 139
8.1 页面渲染 139
8.1.1 页面渲染的发展 139
8.1.2 多层次优化方案 141
8.2 Vue 中的服务器端渲染 142
8.2.1 Vue 的SSR 基本流程 142
8.2.2 Vue 的SSR 项目实例 143
8.3 React 中的服务器端渲染 147
8.3.1 项目搭建 147
8.3.2 同构 149
8.3.3 服务器端渲染的路由设置 150
8.3.4 结合Redux 进行状态管理 152
8.3.5 通过中间层获取数据 158
8.3.6 处理样式 160
8.3.7 搜索引擎优化相关技巧 162
8.4 本章小结 165

第9 章 数据存储 166
9.1 数据存储概览 166
9.1.1 数据存储分类 166
9.1.2 Cookie 168
9.1.3 Local Storage 和Session Storage 169
9.1.4 Web SQL 170
9.1.5 IndexedDB 171
9.2 通过Chrome 开发者工具调试本地存储 173
9.2.1 调试Cookie 173
9.2.2 调试Local Storage 和Session Storage 174
9.2.3 调试IndexedDB 175
9.2.4 调试Web SQL 176
9.3 IndexedDB 实践建议 177
9.3.1 注意平台兼容性 178
9.3.2 完善错误处理 178
9.3.3 注意修改、删除和过期 179
9.3.4 存储性能 180
9.4 Cache Storage 180
9.4.1 兼容与数据类型 181
9.4.2 创建缓存并存储数据 181
9.4.3 删除缓存 183
9.4.4 检索与查询 183
9.5 本章小结 185

第10 章 缓存技术 186
10.1 HTTP 缓存 186
10.1.1 强制缓存. 186
10.1.2 协商缓存. 188
10.1.3 缓存决策. 190
10.1.4 缓存设置注意事项 193
XII∣Web 前端性能优化
10.2 Service Worker 缓存 194
10.2.1 Service Worker 概览 194
10.2.2 生命周期. 195
10.2.3 本地开发注意事项 199
10.2.4 高性能加载 200
10.3 Push 缓存 ... 202
10.3.1 最后一道缓存 202
10.3.2 Push 缓存与预加载 203
10.4 CDN 缓存 ... 205
10.4.1 CDN 概述 205
10.4.2 应用场景. 208
10.4.3 优化实践. 209
10.5 本章小结 210

第3 篇 前端性能检测实践
第11 章 性能检测 212
11.1 性能检测概述 212
11.1.1 如何进行性能检测 213
11.1.2 常见的检测工具 214
11.2 Lighthouse 221
11.2.1 使用方式 221
11.2.2 性能状况 223
11.2.3 可访问性 231
11.2.4 最佳实践 232
11.2.5 搜索引擎优化 233
11.3 Performance 面板的使用 234
11.3.1 使用方式 234
11.3.2 面板信息 235
11.4 本章小结 239

读者评论

下载资源