前端性能优化

核心判断

• 前端性能优化不是压缩资源或套用技巧，而是把用户体验拆成“加载可见、交互可用、布局稳定、长期运行、持续治理”几个阶段逐一定位。
• 优化动作应从指标和真实用户场景出发：先判断瓶颈在哪里，再选择拆包、缓存、懒加载、渲染边界收缩、长任务拆分或布局占位等手段。
• 性能治理最终要形成闭环：能采集、能校准、能告警、能防回归，也能解释优化对用户体感和业务结果的影响。

这个主题要回答的问题

• 如何把“页面快不快”拆成可观测、可定位、可优化的体验阶段？
• 不同指标分别对应哪类用户体验问题，以及应该优先看什么优化动作？
• 如何避免性能优化停留在技巧堆砌，而是形成持续治理和结果验证？

主题结构

• 先定位再优化：指标定位驱动优化手段，避免先套技巧导致优化动作和真实瓶颈错位。
• 加载体验：LCP 代表核心内容可见，配合 TTFB / FCP 判断首包、首次内容和主要内容的加载路径。
• 交互体验：INP 代表交互响应能力，核心排查对象是主线程长任务、同步计算、重复渲染和事件反馈延迟。
• 布局稳定性：CLS 代表布局稳定性，常见治理动作是 预留占位空间，避免图片、广告、异步模块或骨架屏把页面顶开。
• 感知性能：骨架屏改善等待体验，适合在真实加载仍需等待时降低用户不确定感，但不能替代真实性能优化。
• 分阶段监控：按体验阶段分层采集指标，把加载、视觉稳定、交互准备、增强功能和运行时体验拆开观察。
• 长期运行体验：长期会话中的运行时性能，关注页面打开后的内存增长、事件延迟、长任务和资源压力。
• 增强能力加载：增强功能不应阻塞基础可用性，适合处理推荐、动画、个性化模块等非核心能力。
• React 渲染治理：先收缩更新范围再做缓存，把 memo、useMemo、useCallback 作为局部增强，而不是默认优化按钮。
• 监控准确性：监控口径要贴近真实体验，避免后台页、预渲染、用户输入过滤或 CLS 时间窗口造成误判。
• 防回归闭环：监控告警防回归机制 让优化不是快一次，而是持续不慢回去。
• 价值证明：按指标、体感和业务影响量化结果，让性能收益有技术可信度和业务说服力。

相关面试表达

• 性能面试临场路线：把本页的概念和治理框架转成面试主线、追问应对和项目表达。
• 性能指标面试表达：把指标分层讲成加载、交互和稳定性三类问题。
• 首屏优化表达：强调缩短用户看到核心内容的路径，而不只是压缩包体积。
• 交互卡顿表达：强调用户操作后主线程是否及时释放并给出反馈。
• CLS 抖动表达：强调布局治理，而不是把 CLS 简化成动画问题。
• 线上性能排查表达：从影响范围、问题类型、工具定位到止血和根因治理。

暂时结论

• 前端性能优化的主线可以概括为：先用真实用户指标定位体验阶段，再用工程手段降低对应瓶颈，最后用监控、告警和量化结果形成治理闭环。
• 本页负责沉淀概念和治理结构；性能面试 负责把这些结构转成面试时的临场表达。