当前位置:经管资料网行业分类IT互联网Web前端开发——性能优化-250页

Web前端开发——性能优化-250页

13.3 MB
中文
70
计点资料
2021
250页
PDF [下载阅读器]
2022-08-19 10:58:12
推荐星级
IT互联网计算机|网页开发
行业分类 | IT互联网

Web前端开发——性能优化简介

本书以 Web 前端性能优化为关注点,不但给出了一套性能分析的思路与评价标准,而且针对影响网站性能的诸多方面分章节进行了详细介绍。

本书内容包括图像方面的优化,资源加载方面的优化,如何编写高性能的代码,打包构建方面的优化,客户端渲染的优化、服务器端渲染,浏览器本地数据存储,以及缓存技术所带来的性能优化等,通过对这些内容的讲述与分析,逐渐帮助读者构建起相对完善的前端性能知识体系。

本书同时结合性能检测与优化实践,让读者在面对实际的性能优化问题时,能够将理论知识转化为实践能力。

本书理论与实践并重,既可以作为前端工程师进阶性能优化领域的参考资料,又可以作为前端求职面试人员复习性能相关知识的工具手册。

目录
第 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
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
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

全部

  • 热门评论
  • 全部评论
       评论摘要(共 0 条,得分 0 分,平均 0 分) 查看完整评论
    [回复] 8游客   打分:100 分  发表时间:2022-09-16
    · 下载学习一下
    [回复] 7*othor   打分:100 分  发表时间:2022-09-08
    · 需要下载
    [回复] 6*232543   打分:100 分  发表时间:2022-08-30
    · 想要一份
    [回复] 5游客   打分:100 分  发表时间:2022-08-29
    · 要一份
    [回复] 4游客   打分:100 分  发表时间:2022-08-25
    · 想要一份
   评论摘要(共 0 条,得分 0 分,平均 0 分) 查看完整评论
[回复] 8游客   打分:100 分  发表时间:2022-09-16
· 下载学习一下
[回复] 7*othor   打分:100 分  发表时间:2022-09-08
· 需要下载
[回复] 6*232543   打分:100 分  发表时间:2022-08-30
· 想要一份
[回复] 5游客   打分:100 分  发表时间:2022-08-29
· 要一份
[回复] 4游客   打分:100 分  发表时间:2022-08-25
· 想要一份
发表评论
10085分70分55分40分25分10分
*

勾选,报告编辑

热门标签