前端性能揭秘电子书

内容简介

献词

推荐序

前言

第1篇　从Vite起步

第1章　从实践开始

1.1　Hello World

现在开始

使用DevTools

第一个优化

1.2　现实开发的例子

设置开发环境

Vite

vite build

进一步优化

引入antd

按需引入

动态import

1.3　小结

第2篇　性能优化方法论

第2章　度量

2.1　科学的方法

从一个客户反馈说起

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

真实的用户端性能

2.2　初识Performance API

performance.now()方法

构建首屏指标

2.3　均值、分位数和秒开率

均值

分位数

秒开率

如何选择合适的统计指标

2.4　度量首屏

FP

FCP

FMP

如何度量FMP

选定并度量首屏

2.5　度量流畅度

度量流畅度的指标

可视化工具

用户端度量

2.6　Core Web Vitals

LCP

FID

CLS

2.7　小结

第3章　分析

3.1　分析方法

确定目标

收集数据

清洗数据

统计值分析

时序分析

维度分析

相关性分析

3.2　常用的过程指标

TTFB

DOMReady和Load

3.3　Performance API详解

Navigation Timing API

Peformance Entry API

Resource Timing

Navigation Timing Level 2

Paint Timing

User Timing

3.4　分阶段性能分析

常用的指标

其他值得分析的指标

3.5　小结

第4章　实验

4.1　优化不是照搬军规

时代在发展

优化的木桶效应明显

用户环境差异大

性能实验

4.2　用实验验证优化

混沌问题

设计实验

分桶

上报和分析数据

A/B Test背后的数学

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

4.3　用实验改进优化

建立模型

实验修正

4.4　小结

第5章　工具

5.1　DevTools

Network面板

Performance面板

5.2　WebPageTest

发起测试

报告

Waterfall视图

5.3　小结

第3篇　网络协议与性能

第6章　TTFB为什么这么长

6.1　TTFB的合理值

精确定义

RTT

RTT一般需要多久

TTFB的构成

实验环境验证

6.2　如何优化TTFB

减少请求的传输量

减少服务器端的处理时间

减少RTT

TTFB的值越小越好吗

6.3　小结

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

7.1　建立连接应该耗时多久

TCP协议

建立连接需要多少个RTT

抓包验证

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

减少物理距离

preconnect

复用连接

域名收拢

TCP Fast Open

QUIC和HTTP/3

7.3　小结

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

8.1　重定向

HTML重定向

有哪些重定向

8.2　浏览器打开耗时

初始化标签页的时间

unload的耗时

8.3　如何优化beforeFetch耗时

重定向逻辑前置

合并重定向

避免使用短链

使用beforeFetch度量和分析

8.4　小结

第9章　HTTPS协议比HTTP协议更慢吗

9.1　HTTPS协议为什么安全

对称加密和非对称加密

SSL/TLS的实现

SSL/TLS握手

TLS False Start

TLS 1.3

9.2　HTTPS协议如何吊销证书

CRL

OCSP

OCSP Stapling

浏览器支持的情况

证书类型

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

9.3　HTTPS协议更慢吗

确保证书链完整

启用TLS 1.3

不滥用EV证书

开启OSCP Stapling

9.4　小结

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

10.1　HTTP/2和性能

连接复用为什么不生效

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

为什么没有广泛使用Server Push

10.2　为什么还需要HTTP/3

HTTP/2存在什么问题

HTTP/3如何解决问题

10.3　小结

第11章　压缩和缓存

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

Content-Encoding

gzip压缩和br压缩

实时压缩

离线压缩

如何优化传输性能

11.2　HTTP缓存什么时候会失效

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

缓存Header

11.3　小结

第4篇　浏览器与性能

第12章　浏览器和性能

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

最小的渲染路径

尽快返回HTML

减少资源的阻塞

12.2　为什么DOM操作很慢

帧

重排

重绘

访问DOM属性

如何优化DOM操作

12.3　小结

第13章　异步任务和性能

13.1　事件循环机制

为什么要有事件循环

多线程阻塞模型

事件循环

13.2　宏任务和微任务

13.3　Promise的polyfill性能

如何正确实现Promise

13.4　requestAnimationFrame

13.5　小结

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

14.1　内存

内存管理

14.2　内存泄漏

内存泄漏和性能

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

内存泄漏问题的诊断工具

14.3　小结

第15章　使用ServiceWorker改善性能

15.1　ServiceWorker概述

AppCache

ServiceWorker

ServiceWorker能做什么

15.2　使用ServiceWorker进行缓存

Cache API

IndexDB

控制缓存的Cache Key

更加灵活的缓存更新策略

15.3　API提前加载

15.4　ServiceWorker冷启动

开启Navigation Preload

消费Navigation Preload

15.5　小结

第16章　字体对性能的影响

16.1　字体导致的布局偏移

如何定位布局偏移

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

如何尽快加载字体

字体文件的格式

字体的加载

预加载字体

裁剪字体的大小

16.3　小结

第5篇　前端工程与性能

第17章　构建工具和性能

17.1　为什么需要打包

CommonJS

AMD

CMD

异步模块加载器

依赖加载优化

模块打包器

ES Module

17.2　构建工具可以做什么

构建工具和构建优化

为什么要优化打包体积

Bundle分析

Tree Shaking

Scope Hoisting

Code Splitting

代码压缩

Vite和Bundleless

17.3　小结

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

18.1　SSR和同构

18.2　SSR的性能优化

缓存

数据预取

按需渲染

流式渲染

18.3　小结

第6篇　跨端技术与CDN

第19章　WebView和性能

19.1　WebView和Native的区别

LayoutInflater

加载XML的具体过程

Measure

Layout

Paint

Surface

SurfaceFlinger

差异

19.2　WebView的通信成本

JavaScript调用Native

Native调用JavaScript

双向通信

通信对性能的影响

减少通信数据量

避免频繁通信

19.3　React Native的懒加载有何不同

Web实现

基于滚动容器的懒加载

基于位置获取的懒加载

虚拟列表

19.4　React Native如何减小打包体积

Metro

度量

分析

手动Tree Shaking

利用Babel插件进行优化

体积和性能的关系

19.5　API并行请求

发起请求

请求拦截

一致性检验

命中率分析

19.6　小结

第20章　CDN和性能

20.1　什么是CDN

解析

边缘节点

回源

缓存策略

20.2　如何提升缓存命中率

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

减少缓存分裂

缓存忽略动态参数

归一化Vary Header

长效缓存

20.3　动态加速

海外加速

连接复用

客户端连接复用

HTTPS优化

动静分离

压缩

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

20.4　自动polyfill

什么是polyfill

Polyfill.io

实现原理

20.5　边缘计算和性能

CDN的可编程功能

Hello World

自定义Cache Key

前置重定向

流式渲染

20.6　小结