前端性能揭秘

封面

版权信息

内容简介

献词

推荐序

前言

第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篇 网络协议与性能