场景 4：前端性能问题

欢迎回到第 13 章的学习。在上一节，我们学习了数据库连接池耗尽的排查方法。现在我们要学习场景 4：前端性能问题。

本节将学习：Core Web Vitals 下降、分析页面加载 Trace、识别慢资源、优化资源加载、以及验证改进效果。

Core Web Vitals 下降

Core Web Vitals 下降的作用是什么？ 通过 Core Web Vitals 指标发现前端性能问题。

如何查看 Core Web Vitals？ 查看以下指标：

• LCP（最大内容绘制）> 2.5 秒
• FID（首次输入延迟）> 100 毫秒
• CLS（累积布局偏移）> 0.1

异常指标示例：

• LCP 从 1.5 秒增加到 4 秒
• FID 从 50 毫秒增加到 200 毫秒
• CLS 从 0.05 增加到 0.2

Core Web Vitals 查询：

# LCP
avg(web_vital_lcp_seconds)

# FID
avg(web_vital_fid_seconds) * 1000

# CLS
avg(web_vital_cls)

分析页面加载 Trace

分析页面加载 Trace 的作用是什么？ 使用 Trace 分析页面加载的各个阶段，识别性能瓶颈。

如何分析页面加载 Trace？ 查看页面加载 Trace，分析各个阶段的时间：

• DOM 加载时间
• 资源加载时间
• 渲染时间

页面加载时间线分析：

识别慢资源

识别慢资源的作用是什么？ 识别加载时间过长的资源，优化资源加载。

如何识别慢资源？ 分析资源加载 Trace，识别：

• 图片加载时间
• JavaScript 加载时间
• CSS 加载时间
• 字体加载时间

常见慢资源问题：

• 图片文件过大
• JavaScript 文件未压缩
• 资源未使用 CDN
• 资源加载顺序不合理

慢资源识别查询：

# 资源加载时间
avg(resource_load_duration_seconds) by (resource_type)

# 慢资源（> 1秒）
sum(resource_load_duration_seconds > 1) by (resource_type)

优化资源加载

优化资源加载的作用是什么？ 根据分析结果，优化资源加载，提升前端性能。

优化方案包括哪些呢？

第一个：图片优化。 压缩图片、使用 WebP 格式、使用懒加载。

第二个：JavaScript 优化。 代码分割、压缩、使用 CDN。

第三个：CSS 优化。 压缩 CSS、移除未使用的 CSS。

第四个：资源加载优化。 优化加载顺序、使用预加载、使用 CDN。

优化示例：

// Images load lazily
<img src="placeholder.jpg" data-src="image.jpg" loading="lazy" />

// Code splitting
const ProductList = lazy(() => import('./ProductList'));

// Asset preload
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

验证改进效果

验证改进效果的作用是什么？ 验证优化方案是否有效，监控性能改进。

如何验证改进效果？ 对比优化前后的 Core Web Vitals 指标，确认性能已提升。

验证查询：

# 优化前后 LCP 对比
avg(web_vital_lcp_seconds{optimization="before"})
avg(web_vital_lcp_seconds{optimization="after"})

# 优化前后 FID 对比
avg(web_vital_fid_seconds{optimization="before"}) * 1000
avg(web_vital_fid_seconds{optimization="after"}) * 1000

本节小结

在本节中，我们学习了场景 4：前端性能问题：

第一个是 Core Web Vitals 下降。 通过 Core Web Vitals 指标发现前端性能问题。

第二个是分析页面加载 Trace。 使用 Trace 分析页面加载的各个阶段，识别性能瓶颈。

第三个是识别慢资源。 识别加载时间过长的资源，优化资源加载。

第四个是优化资源加载。 根据分析结果，优化资源加载，提升前端性能。

第五个是验证改进效果。 验证优化方案是否有效，监控性能改进。

故障排查流程： Core Web Vitals 下降 → 分析页面加载 Trace → 识别慢资源 → 优化资源加载 → 验证改进效果。

这就是场景 4：前端性能问题。通过场景 4 的学习，我们掌握了前端性能问题的排查方法。

在下一节，我们将学习场景 5：微服务调用失败。学习如何排查微服务调用问题。