标准答案
- LCP 是 Largest Contentful Paint，表示视口内最大内容元素完成渲染的时间，常用于衡量首屏主要内容出现速度。
- INP 是 Interaction to Next Paint，衡量用户交互到下一次可见反馈之间的延迟，反映页面交互响应能力。
- CLS 是 Cumulative Layout Shift，衡量页面生命周期内意外布局偏移的累计影响，反映视觉稳定性。
- 性能衡量要结合实验室数据和真实用户数据：Lighthouse 适合本地诊断，RUM 更能反映真实设备和网络。
- 优化时要先定位指标瓶颈，再分别处理关键资源、长任务、事件处理、图片尺寸、字体和异步插入内容。
题目解析
这道题不要把性能只理解成页面加载快。现代前端性能至少包括加载、交互和稳定性。
LCP 常受服务端响应、CSS/JS 阻塞、图片优先级和资源体积影响；INP 常受主线程长任务和事件处理影响；CLS 常受尺寸未预留和异步插入影响。
指标不是目的，用户体验才是目的。不同页面要结合业务关键路径设置自己的性能预算。
代码示例
web-vitals 这类库可以在真实用户侧采集核心指标。
JavaScript
import { onCLS, onINP, onLCP } from 'web-vitals'
onLCP(metric => reportMetric('LCP', metric.value))
onINP(metric => reportMetric('INP', metric.value))
onCLS(metric => reportMetric('CLS', metric.value))常见误区
- 只看 Lighthouse 总分，不看具体指标和真实用户数据。
- 把 LCP 慢只归因于图片大，忽略 HTML 响应、CSS 阻塞和请求优先级。
- 优化交互卡顿时只压缩包体，不分析长任务和事件处理。