---
name: web-performance
description: 前端性能深挖：指标与监控、渲染策略、资源加载与缓存、长任务与 INP、视觉稳定、WebView。
keywords: [前端性能, web performance, lcp, inp, cls, core web vitals, 首屏, ssr, csr, ssg, hydration, 资源加载, code splitting, 长任务, webview, 监控, rum, lighthouse]
layer: detail
domains: [frontend]
---

## 面试官在意什么

性能是前端面试里最容易验真假的一段：候选人说"优化了首屏"，面试官追指标名、测量工具、样本、前后数字、最大的一项改动。2026 年的指标口径是 LCP、INP、CLS 三项，INP 取代 FID 后"长任务与交互延迟"成了新的追问点；渲染策略上服务端组件与流式渲染让"SSR 还是 CSR"变成按页面、按组件做决定。这本包把这些拆成可追问的阶梯。

## 项目 / 实习怎么深挖

简历上出现下面这类经历时从哪里切、追什么。追到候选人能说出机制、数字的来源与一次真实的故障或取舍才算实；只有框架名与结论、说不出自己那一段的，记为危险信号。通用的追问方法见 project-deep-dive。

- 简历出现"首屏优化 X%" → 追指标名（LCP 还是 FCP）、测量工具与样本、最大的一项改动、有没有回归
- 简历出现"打包体积减少 X%" → 追分析工具、砍掉的最大头、拆包粒度、上线后加载瀑布有没有变差
- 简历出现 SSR / Next.js / Nuxt → 追哪些页面 SSR 哪些 CSR、hydration 报过什么错、TTFB 与服务端成本
- 简历出现前端监控 → 追采集哪些指标、采样率、source map 还原、SDK 开销、发现过什么问题
- 简历出现卡顿 / 交互延迟优化 → 追长任务从哪来、怎么拆、INP 前后数字
- 简历出现 H5 / WebView → 追兼容问题的定位手段、低端机数据、离线包机制

## 常见失守与危险信号

- 性能指标与线上监控：只知道 Lighthouse 跑分；不知道 INP 取代了什么；上报没有采样也没有合并
- 渲染策略：认为 SSR 一定更快；不知道 hydration 错误怎么来的；所有页面一个模式
- 资源加载与缓存：认为"加时间戳参数"是缓存治理；不知道 HTML 不能强缓存的原因；拆包只会 splitChunks
- 长任务与交互延迟：把"加防抖"当所有卡顿的解药；不知道微任务会阻塞渲染
- CSS 与视觉稳定：说不出 transform 动画为什么便宜；will-change 到处加；不知道 CLS 从哪来
- 图片与字体：图片不设尺寸；字体切换导致闪烁不知道 font-display
- 跨端与 WebView：把所有问题归结为"兼容性"而不做定位；不知道 JSBridge 的通信方式
- 性能预算与回归：没有性能预算；优化一次就不管了

## 常考主题清单

只列名字、阶梯与答实的标志，作"问到哪一层算实"的参考；问哪些、问几道由这份 JD 与这份简历定，不是配额。

### 性能度量与线上监控
- 阶梯：Core Web Vitals 各指标含义 → 实验室数据与真实用户数据（RUM）的差异，PerformanceObserver、web-vitals 库怎么采集 → 线上 LCP P75 突然从 2.1s 涨到 3.5s，怎么按版本、地域、机型、页面下钻归因 → 采样率、上报时机（sendBeacon、visibilitychange）、监控 SDK 自身的性能开销
- 答实的标志：区分 lab 与 field 数据；知道 INP 取代 FID；提到 source map 上传与访问控制；有按维度下钻的经验

### CSS 布局与视觉稳定
- 阶梯：Flex 与 Grid 的适用场景、BFC → 层叠上下文、合成层与 GPU 加速的条件与代价 → 页面 CLS 高：图片没占位、字体切换、动态插入横幅，怎么定位与修 → CSS 方案选型（原子化、CSS Modules、CSS-in-JS 的运行时成本）在团队规模下的取舍
- 答实的标志：能用 Layout Shift 面板定位；提到容器查询、逻辑属性；对 CSS-in-JS 运行时开销与 SSR 兼容性有认识

### 跨端与 WebView 兼容
- 阶梯：移动端适配单位与视口、1px 问题 → WebView 与浏览器的差异（内核版本、缓存、JSBridge）→ 页面在某品牌 Android 低端机白屏但其他机型正常怎么排查（语法降级、API 不支持、内存杀）→ H5、小程序、原生、跨端框架的选型依据与维护成本
- 答实的标志：有远程调试（chrome://inspect、vConsole）经验；知道差异化打包（modern/legacy）；理解 WebView 缓存与离线包机制

### 渲染策略：SSR / CSR / SSG / 流式
- 阶梯：SSR 与 CSR 的差别与各自首屏指标 → hydration 做什么、为什么会不一致（时间、随机数、用户态）→ SSR 页面 TTFB 高、服务端 CPU 打满、缓存击穿怎么排查 → 按页面类型选渲染模式，SEO、个性化、成本三者取舍
- 答实的标志：区分 TTFB/FCP/LCP/TTI 谁受影响；静态壳 + 动态岛的思路；CDN 缓存与 stale-while-revalidate；服务端渲染的并发与内存代价

### 资源加载与缓存策略
- 阶梯：首屏要下载什么、按什么顺序 → 拆包粒度、预加载与预取、关键 CSS、HTTP 缓存头与文件名哈希各解决什么 → 发版后用户还在用旧资源、缓存击穿 CDN、第三方脚本拖慢首屏怎么定位与治理 → 拆得太细与太粗的代价；CDN 与边缘缓存的取舍
- 答实的标志：能读加载瀑布；知道 HTML 不强缓存而资源长缓存的组合；有一次拆包或预加载的前后数字

### 长任务与交互延迟
- 阶梯：INP 衡量什么、为什么取代 FID → 长任务从哪来（大 JS、同步布局、大量事件处理）；主线程一帧里发生什么 → 一个交互卡 300ms 怎么用 Performance 面板定位到函数 → 拆任务（时间切片、调度器、Web Worker）各适合什么；优化后怎么回归
- 答实的标志：知道 INP 的统计口径；能读 Performance 面板；有一次长任务拆解的案例

### 图片、字体与媒体
- 阶梯：图片格式、尺寸、懒加载、响应式图片各省什么 → 字体加载导致的闪烁与位移；font-display 与子集化 → 首屏大图 LCP 差怎么办（预加载、优先级、CDN 处理）→ 媒体资源的成本与体验取舍
- 答实的标志：图片有尺寸与格式策略；知道字体加载的三种表现；有 LCP 元素定位的经验

### 性能预算与回归
- 阶梯：为什么要性能预算、预算定在什么指标上 → CI 里跑 Lighthouse 或自建脚本，阈值怎么定 → 线上 RUM 与实验室数据背离怎么解释 → 预算被打破时的处理流程；性能与功能迭代的谈判
- 答实的标志：有性能预算与门禁；知道实验室与真实用户数据的差别；有一次预算拦截的案例