⚡ 性能监控 · 调优实战
🧩 30 章 · 从指标到案例
v2.0
01
性能指标概览
核心Web指标（LCP、FID、CLS）与RAIL模型详解
02
Performance API
performance.now()、performance.mark() 精确测量
03
Navigation Timing
解析页面加载各阶段耗时（DNS、TCP、TTFB）
04
Resource Timing
分析静态资源（JS、CSS、图片）加载瀑布图
05
Long Tasks API
识别并监控长任务对主线程的阻塞
06
Performance Observer
使用PerformanceObserver监听性能条目
07
Lighthouse实战
自动化审计与评分解读
08
Chrome DevTools Performance
录制与分析运行时性能火焰图
09
网络面板分析
请求排队、连接复用与协议升级排查
10
内存面板与堆快照
排查内存泄漏与DOM节点泄漏
11
Bundle分析
webpack-bundle-analyzer & source-map-explorer
12
代码分割与懒加载
React.lazy、动态import与路由级分割
13
Tree Shaking与副作用
配置sideEffects以消除死代码
14
图片优化
WebP/AVIF格式、响应式图片与懒加载
15
字体优化
font-display、子集化与预加载关键字体
16
关键渲染路径
构建、布局、绘制与合成层优化
17
CSS性能
避免重排重绘、contain与will-change
18
JavaScript解析与执行
V8编译优化、内联缓存与去优化
19
虚拟滚动
使用react-window处理长列表渲染
20
Web Worker & OffscreenCanvas
将耗时任务移出主线程
21
Service Worker缓存策略
Cache First、Network First、Stale While Revalidate
22
HTTP缓存
强缓存与协商缓存（Cache-Control、ETag）
23
CDN与边缘计算
加速静态资源与动态内容
24
HTTP/2 与 HTTP/3
多路复用、头部压缩与0-RTT
25
预加载与预连接
preload、prefetch、preconnect、dns-prefetch
26
首屏加载优化
SSR、SSG与ISR方案对比
27
性能监控平台搭建
使用Web Vitals库采集并上报数据
28
错误监控与告警
Source Map还原、错误边界与告警策略
29
性能预算
设定LCP、TTI等指标预算并集成CI/CD
30
综合案例
从0到1优化电商首页，覆盖分析、优化与验证全流程