前端性能揭秘 下载 pdf 百度网盘 epub 免费 2025 电子书 mobi 在线

《前端性能揭秘》主要介绍用于指导前端性能优化工作的通用优化方法，从网络、浏览器、构建工具、跨端技术和CDN 等方面介绍不同技术、系统对性能的影响，同时帮助读者了解如何有效优化性能。本书从性能的度量、分析和实验这三个方面开始介绍。首先介绍性能优化的一些通用方法，然后将性能作为一个切面帮助读者了解与前端技术栈和性能有关的知识。从这个切面观察，这些系统的工作原理等知识被赋予了另外一层意义，通过这种联系把工作原理真正运用到工作中，在性能优化方面发挥重要作用。

《前端性能揭秘》面向的读者为具有一定经验的 Web 开发工程师，以及对前端开发或 Web 开发有一定了解的开发人员。同时，假定读者能够进行简单的网页开发，并且具备相关的基础知识。

第 1 篇 从 Vite 起步

第 1 章 从实践开始 ··························· 2

1.1 Hello World ···························· 2

现在开始 ··························· 2

使用 DevTools ····················· 4

第一个优化 ························ 6

1.2 现实开发的例子 ······················· 7

设置开发环境 ······················ 7

Vite ································· 8

vite build ··························· 9

进一步优化 ······················ 11

引入 antd ························· 11

按需引入 ························· 13

动态 import ······················ 14

1.3 小结 ································· 15

第 2 篇 性能优化方法论

第 2 章 度量 ································· 18

2.1 科学的方法 ·························· 19

从一个客户反馈说起 ··········· 19

不度量性能，就无法优化性能 ······························· 19

真实的用户端性能 ·············· 20

2.2 初识 Performance API ··············· 21

performance.now()方法 ·········· 21

构建首屏指标 ···················· 23

2.3 均值、分位数和秒开率 ············· 23

均值 ······························ 24

分位数 ···························· 25

秒开率 ···························· 26

如何选择合适的统计指标 ······ 26

2.4 度量首屏 ···························· 27

FP ································· 27

FCP ······························· 27

FMP ······························ 28

如何度量 FMP ··················· 28

选定并度量首屏 ················· 30

2.5 度量流畅度 ·························· 30

度量流畅度的指标 ·············· 31

可视化工具 ······················ 31

用户端度量 ······················ 32

2.6 Core Web Vitals ····················· 34

LCP ······························· 34

FID ································ 38

CLS ······························· 39

2.6 小结 ·································· 41

第 3 章 分析 ································· 42

3.1 分析方法 ···························· 43

确定目标 ························· 43

收集数据 ························· 43

清洗数据 ························· 44

统计值分析 ······················ 44

时序分析 ························· 45

维度分析 ························· 46

相关性分析 ······················ 48

3.2 常用的过程指标 ····················· 48

TTFB ····························· 49

DOMReady 和 Load ············· 50

3.3 Performance API 详解 ··············· 51

Navigation Timing API ·········· 51

Peformance Entry API ··········· 53

Resource Timing ················· 54

Navigation Timing Level 2 ······ 55

Paint Timing ····················· 56

User Timing ······················ 56

3.4 分阶段性能分析 ···················· 58

常用的指标 ······················ 58

其他值得分析的指标 ··········· 59

3.5 小结 ································· 59

第 4 章 实验 ································· 60

4.1 优化不是照搬军规 ·················· 61

时代在发展 ······················ 61

优化的木桶效应明显 ··········· 62

用户环境差异大 ················· 62

性能实验 ························· 62

4.2 用实验验证优化 ···················· 63

混沌问题 ························· 64

设计实验 ························· 64

分桶 ······························ 65

上报和分析数据 ················· 68

A/B Test 背后的数学 ············ 68

结论不重要，重要的是方法 ··· 69

4.3 用实验改进优化 ···················· 69

建立模型 ························· 69

实验修正 ························· 70

4.4 小结 ································· 71

第 5 章 工具 ································· 72

5.1 DevTools ···························· 73

Network 面板 ···················· 73

Performance 面板 ················ 76

5.2 WebPageTest ························ 81

发起测试 ························· 82

报告 ······························· 83

Waterfall 视图 ··················· 83

5.3 小结 ································· 87

第 3 篇 网络协议与性能

第 6 章 TTFB 为什么这么长 ··············· 90

6.1 TTFB 的合理值 ····················· 91

精确定义 ························· 92

RTT ······························· 92

RTT 一般需要多久 ·············· 93

TTFB 的构成····················· 93

实验环境验证 ···················· 94

6.2 如何优化 TTFB ····················· 95

减少请求的传输量 ·············· 96

减少服务器端的处理时间 ······ 96

减少 RTT ························· 98

TTFB 的值越小越好吗 ·········· 98

6.3 小结 ·································· 99

第 7 章 建立连接为什么这么慢 ·········· 100

7.1 建立连接应该耗时多久 ············ 101

TCP 协议 ························ 101

建立连接需要多少个 RTT ····· 101

抓包验证 ························ 102

7.2 如何优化建立连接的耗时 ········· 103

减少物理距离 ··················· 103

preconnect ······················· 103

复用连接 ························ 103

域名收拢 ························ 104

TCP Fast Open ·················· 104

QUIC 和 HTTP/3 ··············· 104

7.3 小结 ································ 105

第 8 章 Fetch 之前浏览器在干什么 ····· 106

8.1 重定向 ······························ 107

HTML 重定向 ·················· 109

有哪些重定向 ·················· 109

8.2 浏览器打开耗时 ··················· 112

初始化标签页的时间 ·········· 112

unload 的耗时 ··················· 112

8.3 如何优化 beforeFetch 耗时 ········ 114

重定向逻辑前置 ················ 115

合并重定向 ····················· 115

避免使用短链 ·················· 116

使用 beforeFetch 度量和分析 ····························· 116

8.4 小结 ································ 117

第 9 章 HTTPS 协议比 HTTP 协议

更慢吗 ····························· 118

9.1 HTTPS 协议为什么安全 ··········· 119

对称加密和非对称加密 ········ 119

SSL/TLS 的实现 ················ 120

SSL/TLS 握手 ·················· 122

TLS False Start ·················· 124

TLS 1.3 ·························· 124

9.2 HTTPS 协议如何吊销证书 ········· 125

CRL ······························ 125

OCSP ···························· 126

OCSP Stapling ·················· 126

浏览器支持的情况 ············· 126

证书类型 ························ 127

证书验证机制对性能的影响 ···· 129

9.3 HTTPS 协议更慢吗 ················ 129

确保证书链完整 ················ 129

启用 TLS 1.3 ···················· 129

不滥用 EV 证书 ················ 130

开启 OSCP Stapling ············ 130

9.4 小结 ································· 130

第 10 章 HTTP/2、HTTP/3 和性能 ······ 131

10.1 HTTP/2 和性能 ···················· 131

连接复用为什么不生效 ······· 131

头部压缩对我们有什么影响 ··· 137

为什么没有广泛使用 Server Push ···························· 140

10.2 为什么还需要 HTTP/3 ············ 144

HTTP/2 存在什么问题 ········ 145

HTTP/3 如何解决问题 ········ 146

10.3 小结 ······························· 148

第 11 章 压缩和缓存 ······················ 150

11.1 传输速度和压缩速度如何兼得 ···· 151

Content-Encoding ·············· 151

gzip 压缩和 br 压缩 ··········· 152

实时压缩 ······················· 152

离线压缩 ······················· 153

如何优化传输性能 ············ 154

11.2 HTTP 缓存什么时候会失效 ······ 154

缓存不仅仅是浏览器的事情 ···························· 154

缓存 Header ···················· 154

11.3 小结 ······························· 157

第 4 篇 浏览器与性能

第 12 章 浏览器和性能 ···················· 160

12.1 第一次渲染时都发生了什么 ····· 161

最小的渲染路径 ··············· 162

尽快返回 HTML ··············· 167

减少资源的阻塞 ··············· 167

12.2 为什么 DOM 操作很慢 ··········· 168

帧 ··································· 168

重排 ································ 169

重绘 ································ 170

访问 DOM 属性 ················· 170

如何优化 DOM 操作 ··········· 171

12.3 小结 ······························· 172

第 13 章 异步任务和性能 ················· 173

13.1 事件循环机制 ····················· 174

为什么要有事件循环 ········· 174

多线程阻塞模型 ··············· 174

事件循环 ······················· 175

13.2 宏任务和微任务 ·················· 176

13.3 Promise 的 polyfill 性能 ··········· 178

如何正确实现 Promise ········ 178

13.4 requestAnimationFrame ··········· 180

13.5 小结 ······························· 181

第 14 章 内存为什么会影响性能 ········· 182

14.1 内存 ······························· 182

内存管理 ·························· 183

14.2 内存泄漏 ·························· 188

内存泄漏和性能 ··············· 188

常见的导致内存泄漏的原因 ··· 188

内存泄漏问题的诊断工具 ···· 189

14.3 小结 ······························· 191

第 15 章 使用 ServiceWorker 改善性能 ······························· 193

15.1 ServiceWorker 概述 ··············· 194

AppCache······················· 194

ServiceWorker·················· 195

ServiceWorker 能做什么 ······ 195

15.2 使用 ServiceWorker 进行缓存 ···· 196

Cache API ······················ 196

IndexDB ························ 201

控制缓存的 Cache Key ······· 201

更加灵活的缓存更新策略 ···· 203

15.3 API 提前加载 ····················· 204

15.4 ServiceWorker 冷启动 ············ 205

开启 Navigation Preload ······ 206

消费 Navigation Preload ······ 206

15.5 小结 ······························· 207

第 16 章 字体对性能的影响 ·············· 208

16.1 字体导致的布局偏移 ············· 208

如何定位布局偏移 ············ 208

16.2 如何避免字体带来的布局偏移 ···· 210

如何尽快加载字体 ············ 211

字体文件的格式 ··············· 211

字体的加载 ···················· 212

预加载字体 ···················· 213

裁剪字体的大小 ··············· 214

16.3 小结 ······························· 214

第 5 篇 前端工程与性能

第 17 章 构建工具和性能 ················· 218

17.1 为什么需要打包 ·················· 219

CommonJS ····················· 220

AMD ···························· 220

CMD ···························· 221

异步模块加载器 ··············· 222

依赖加载优化 ················· 223

模块打包器 ···················· 224

ES Module ····················· 225

17.2 构建工具可以做什么 ············· 226

构建工具和构建优化 ········· 227

为什么要优化打包体积 ······ 227

Bundle 分析 ···················· 228

Tree Shaking ··················· 229

Scope Hoisting ················· 231

Code Splitting ·················· 233

代码压缩 ······················· 234

Vite 和 Bundleless ············· 237

17.3 小结 ······························· 237

第 18 章 服务器端渲染和性能 ··········· 239

18.1 SSR 和同构 ······················· 241

18.2 SSR 的性能优化 ·················· 241

缓存 ································ 242

数据预取 ·························· 245

按需渲染 ·························· 245

流式渲染 ·························· 246

18.3 小结 ······························· 246

第 6 篇 跨端技术与 CDN

第 19 章 WebView 和性能 ················ 248

19.1 WebView 和 Native 的区别 ······· 249

LayoutInflater ·················· 249

加载 XML 的具体过程 ······· 250

Measure ························· 250

Layout ·························· 251

Paint ···························· 252

Surface ·························· 253

SurfaceFlinger ·················· 253

差异 ····························· 253

19.2 WebView 的通信成本 ············ 254

JavaScript 调用 Native ········· 254

Native 调用 JavaScript ········· 258

双向通信 ······················· 258

通信对性能的影响 ············ 259

减少通信数据量 ··············· 259

避免频繁通信 ·················· 259

19.3 React Native 的懒加载有何不同 ······························· 260

Web 实现 ······················ 260

基于滚动容器的懒加载 ······ 260

基于位置获取的懒加载 ······ 262

虚拟列表 ······················· 263

19.4 React Native 如何减小打包体积 ······························· 265

Metro ··························· 265

度量 ···························· 266

分析 ···························· 266

手动 Tree Shaking ············· 267

利用 Babel 插件进行优化 ···· 269

体积和性能的关系 ············ 271

19.5 API 并行请求 ····················· 271

发起请求 ·························· 272

请求拦截 ·························· 273

一致性检验 ······················· 274

命中率分析 ······················· 274

19.6 小结 ······························· 274

第 20 章 CDN 和性能 ····················· 275

20.1 什么是 CDN ······················· 275

解析 ································ 276

边缘节点 ·························· 276

回源 ································ 277

缓存策略 ·························· 277

20.2 如何提升缓存命中率 ············· 278

如何在端侧统计缓存命中的情况 ····························· 278

减少缓存分裂 ·················· 279

缓存忽略动态参数 ············ 279

归一化 Vary Header ··········· 280

长效缓存 ······················· 280

20.3 动态加速 ·························· 281

海外加速 ·························· 282

连接复用 ·························· 282

客户端连接复用 ················· 282

HTTPS 优化 ······················ 283

动静分离 ·························· 283

压缩 ································ 284

什么场景适合使用动态加速 ··· 284

20.4 自动 polyfill ······················· 284

什么是 polyfill ················· 284

Polyfill.io ······················· 285

实现原理 ······················· 287

20.5 边缘计算和性能 ·················· 288

CDN 的可编程功能 ··········· 288

Hello World ···················· 289

自定义 Cache Key ············· 289

前置重定向 ···················· 290

流式渲染 ······················· 290

20.6 小结 ······························· 291

佘锦鑫，花名当轩。毕业于江南大学理学院，阿里巴巴前前端技术专家，曾负责Alibaba.com海外版性能优化，讲师、开源爱好者。现就职于网易云音乐，对Web性能、跨端、可视化搭建等领域有较深入的理解。

暂无出版社相关信息，正在全力查找中！

暂无相关书籍摘录，正在全力查找中！

在线阅读地址：前端性能揭秘在线阅读

在线听书地址：前端性能揭秘在线收听

在线购买地址：前端性能揭秘在线购买

暂无原文赏析，正在全力查找中！

书籍介绍

《前端性能揭秘》主要介绍用于指导前端性能优化工作的通用优化方法，从网络、浏览器、构建工具、跨端技术和CDN 等方面介绍不同技术、系统对性能的影响，同时帮助读者了解如何有效优化性能。本书从性能的度量、分析和实验这三个方面开始介绍。首先介绍性能优化的一些通用方法，然后将性能作为一个切面帮助读者了解与前端技术栈和性能有关的知识。从这个切面观察，这些系统的工作原理等知识被赋予了另外一层意义，通过这种联系把工作原理真正运用到工作中，在性能优化方面发挥重要作用。

《前端性能揭秘》面向的读者为具有一定经验的 Web 开发工程师，以及对前端开发或 Web 开发有一定了解的开发人员。同时，假定读者能够进行简单的网页开发，并且具备相关的基础知识。