性能面试

核心判断

• 性能面试不是背优化清单，而是证明自己能把“指标定位 → 专项优化 → 线上治理 → 业务价值”串成闭环。
• 回答时先用 5 分钟主线 建立全局框架，再按面试官追问切到指标、React 实战、排查或量化结果。
• 这个主题的下层材料主要是可复述的 Statement；稳定概念可继续沉淀到 前端性能优化 与相关 Things。

这个主题要回答的问题

• 面试官问“你系统讲一下性能优化”时，怎样从用户体验、技术指标和项目结果三层组织回答？
• 面试官追问某个指标、某类卡顿或 React 项目经验时，怎样快速切换到对应话术？
• 如何证明优化不是术语堆砌，而是有监控、排查、防回归和业务价值的工程闭环？

主题结构

• 主线叙事：用 系统化性能优化叙事 先交代目标、指标、手段、结果，避免一上来散列技术点。
• 指标与监控：用 Web Vitals 指标框架 说明衡量对象，再用 监控准确性 和 告警防回归机制 证明能长期治理。
• 专项优化：把 首屏加载、交互响应、布局稳定性 分别对应到加载、运行时和视觉稳定三个体验阶段。
• React 项目实战：用 React 优化案例 承接真实项目，再用 STAR 叙事、方案取舍 补足决策过程。
• 线上排查闭环：用 线上卡顿排查路径 展示定位方法，并用 高频追问应对 兜住异常场景。
• 结果与价值证明：用 量化结果与业务价值 把技术优化落到用户体验、转化、稳定性或研发效率。
• 反问与陷阱识别：用 陷阱题识别 防止回答停留在“只会背术语”的层面。

临场切换路径

• 问“你系统讲一下性能优化”：先走 主线叙事，再根据追问进入指标或项目案例。
• 问“有哪些核心性能指标”：切到 指标框架，必要时补 采集准确性。
• 问“React 项目怎么优化”：切到 React 案例，再补 STAR 表达。
• 问“线上页面突然变卡怎么办”：切到 线上排查路径，再补 防回归机制。
• 问“你怎么证明做出了结果”：切到 结果量化。
• 问“你是不是只会背术语”：切到 陷阱题识别，强调指标、场景、取舍和复盘。

相关概念 / 下层卡片

• 先定位瓶颈再选择手段：用于支撑“不是背优化清单，而是从指标和工具定位问题”的总判断。
• 监控要校准到真实用户体验：用于回答性能监控为什么不能只看采集到的原始数值。
• 按指标、体感和业务影响量化结果：用于把优化成果讲成可信的面试证据。
• 线上卡顿先收敛范围和类型：用于支撑线上排查题里的“先缩小范围，再定位瓶颈”。
• React 先缩小更新范围再谈缓存：用于避免把 React 性能优化讲成到处加 memo。
• 性能方案取舍的三项标准：用于回答为什么不一开始就大改架构。
• 按体验阶段分层采集性能指标：把加载、交互、运行时等阶段拆开，避免单一指标误判体验。
• 长期会话中的运行时性能：解释为什么页面打开后仍要关注内存、渲染和交互退化。
• 骨架屏改善感知性能：用于回答首屏优化时区分真实性能与感知性能。

相关入口

• 前端性能优化概念入口：沉淀指标、监控和专项优化概念；本页更偏面试表达与临场路线。