前端面试准备 06：性能与可观测——Web Vitals、长任务、缓存、监控与定位方法

性能题最怕“我做了懒加载所以更快”。你需要一条闭环：指标、定位、手段、验证。

01 指标：先统一语言#

建议掌握（能解释含义与常见原因）：

• LCP：最大内容绘制（图片/字体/SSR/缓存）
• INP：交互响应（长任务、事件处理、渲染阻塞）
• CLS：布局偏移（图片尺寸、动态插入）
• TTFB：后端/边缘缓存/网络

02 定位：用工具而不是猜#

• Performance 面板：长任务、Main thread 忙在哪里
• Network：瀑布图、缓存命中、优先级
• Lighthouse：基准对比与回归

03 常用手段：按“瓶颈类型”选#

• 资源瓶颈：图片格式/尺寸、字体子集、preload、CDN
• JS 瓶颈：拆包、减少依赖、延迟加载、避免同步大计算
• 渲染瓶颈：减少 layout thrash、避免频繁强制同步布局

04 可观测：把“用户慢”变成可定位问题#

前端可观测至少包含：

• RUM：Vitals + 关键路径耗时
• 错误监控：JS Error、Promise rejection、资源加载失败
• 追踪：把一次用户操作串成链路（前端 span → 后端 trace）

05 自测清单#

• 我能说清一次性能优化的“前后数据对比”吗？
• 我能描述一次线上慢问题的定位过程吗？

---

06 练习题（性能闭环）#

题 1（问答）：LCP 变差的常见原因与定位手段有哪些？#

参考答案（原理）#

• 资源：首屏大图未优化、未预加载、CDN 慢、字体阻塞
• JS：主线程长任务导致渲染延迟
• SSR：TTFB 高导致一切后移

定位手段：Performance（长任务）、Network（关键资源）、Lighthouse（机会点）、真实用户 Vitals（分布与分群）。

题 2（实战题）：给你一个“首屏 JS 1.5MB”的页面，你会怎么做？#

参考答案（步骤）#

• 先度量：bundle analyzer、路由级拆包、依赖重复
• 再拆分：按路由/组件拆分，延迟加载非首屏模块
• 再优化：替换重依赖、按需引入、移除无用 polyfill
• 再验证：指标对比与回归监控

---

下一篇进入安全：XSS/CSRF/CSP 与登录态是高频坑点。