前端性能揭秘 电子书 mobi pdf txt word 2024 下载

《前端性能揭秘》主要介绍用于指导前端性能优化工作的通用优化方法，从网络、浏览器、构建工具、跨端技术和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 开发有一定了解的开发人员。同时，假定读者能够进行简单的网页开发，并且具备相关的基础知识。

• 作者： 卤代烃 发布时间：2022-10-13 21:25:23

  写的比较基础，适合入门者走马观花看一下。

  限于篇幅原因，很多内容只能蜻蜓点水的提一下（里面每个章节实际上都能独立写一本书了），最后两章跨端和CDN的内容说实话个人感觉加入的蛮突兀的，就看着看着突然塞了个 jsb 怎么写，rn 怎么包体积优化，cdn 怎么优化，其实这几个方向也能写很多东西的，但是放在这里感觉内容不是很聚焦…

  希望搞性能优化的读者，最好还是把 chrome/edge 开发者文档和 web.dev 教程过一遍比较好，这是正路，逃不掉的。

• 作者： puff-puff-pass 发布时间：2024-04-14 01:53:37

  面对危机处理具体案例，包含准备工作、应急响应、资源分配、协调合作、情况意识、政治和公众沟通等问题的总结。

• 作者： 胡布斯 发布时间：2022-10-16 14:35:08

  这本书以性能为主题，在知识上涵盖了前端的各个领域，更以此为契机，展示了大厂资深工程师的做事方法（度量、实验、分析）和乐趣所在（创造、对精密系统的持续探索和深度理解）。非常适合在校学习前端的学生，以及希望进大厂的前端从业者阅读！在大厂的同学也可以通过阅读本书查漏补缺，非常不错！

• 作者： SimplyY 发布时间：2022-10-16 14:23:42

  适合1-5年的前端开发，系统进阶的学习性能优化

• 作者： 葱花小当家 发布时间：2022-10-16 14:30:23

  从简单可上手的案例出发，到具体的方法论。作为前端从业者还是很有收获的，性能优化毕竟前端永远绕不开的话题

• 作者： 企鹅 发布时间：2022-10-14 21:15:29

  不是罗列优化点，优化思想部分尤其有收获，有收获就值得推荐

• 善待身边人，善待自己

  作者：phoenix 发布时间：2018-12-10 15:35:59

  这是一本讲述家庭成员之间的相处模式与心理健康关系的图书。作者采用了24个真实的案例，将24个患者的心路历程呈现给读者，有些患者的经历仿佛就发生在自己身边甚至就是自己曾经的缩影，每个人都能在这本书中找到相似的自己。读完这本书，其实就是告诉我们：父母对待子女，配偶对待配偶，每一种家庭成员之间的相处模式都可能会为将来的心理疾病隐患埋下伏笔。善待身边人，善待自己。

• 你怎样对待自己的时间，就会反馈得到一个怎样的人生。

  作者：说如是 发布时间：2019-08-06 06:16:04

  

  除去一些特殊的情况，上天对每个人可以说都是公平的。为什么我们并不比别人笨，却没有别人成功呢，读完《人生效率手册》，你会发现大多数我们的失败是因为我们不会自我管理。

  如何进行自我管理呢？

  每个人在人性上是有惰性的，都渴望待在自己的舒适区内，但是每个人也是有价值追求的，也就是欲望。你想要成为一个什么样的人，想要做成什么样的事情，这些都会成为你的人生目标，而一个人知道往哪里走，他才有可能开始脚下的第一步。所以想要实施自我管理，首先你需要明白自己要什么，为自己设立一个目标。这个目标一定要高一些远一些。不是说我们好高骛远，而是高远的目标会给我们持续前进的动力。在设置了一个远大的志向之后，你所要做的就是不断的分解它，大而化小，然后做好眼前的事，脚踏实地一步步接近自己的目标。

  在我们做事的时候，有的人发现自己的效率低下，无法在规定的时间内去完成自己设定的目标，那么这个时候就需要提高自己的工作效率。想要提高自己的工作效率，首先要有一个自我意识，能够时刻地知道自己想做什么，要做什么，正在做什么。好的计划是成功的一半，做事情之前一定要对自己将要去做的事情有一个大致的了解和认知，知道什么是难点，什么是重点，在做的时候提升自己的执行力，一次只做一件事情，做完之后及时的复盘反思，积累经验，如此坚持下去，时光定不负你的努力。想要提高效率还要注意去寻求周围合适的人帮助，因为单一个人是有局限的，有时候专业相关人员的一句话可能会让我们避免像无头苍蝇一样乱撞又浪费时间。当我们所要做的事情比较纷乱的时候，需要的是对每一件事情进行计划，实施，总结，评估，不断地进行自我迭代，改掉坏习惯，养成好习惯，慢慢的你会发现有些事情是不必要做的，有些事情是可以让别人做的，有些事情是首先要做的，对自己的时间的类型和质量要有一个自知，利用自己效率最高的时间，用合适的时间类型去做合适的事情。

  

  人生效率手册：重塑升级版

  6.4

  张萌 / 2019 / 湖南文艺出版社

  当然，我们人不是机器，总是会累的，如何在一定的时间内，在不断增加的工作负担下，提升自己的作战能力呢，我们需要精力管理。精力管理包括两个方面，一方面是我们需要通过运动来提升自己的硬性身体素质，注意营养搭配和均衡，按时作息和有规律适度的运动，另一方面在面对庞大的压力时，我们还需要去疏导我们的情绪，时刻保持一个阳光舒适，积极向上的心态对我们做事情的效率是有直接关系的。可以通过培养自己的兴趣爱好，与他人沟通交流，不定期旅行增长见识等等方式来疏导自己的情绪。

  

  在《人生效率手册》之中，作者分享了自己对于目标，效率和健康管理各方面的细致有效的经验，将人生知识从输入到输出，如何自我管理，自我成长，自我约束做了细致入微地讲解，一定能够让想要获得进步的你，在本书中得到你想要的东西。

  《人生效率手册》是一本很有效的方法论书籍，同时也给想要找到努力方向，在奋斗的迷茫的人提供了一个榜样，想要变成更好自己的你可以读一读这本书。