场景题没有标准答案,考的是能否先拆问题再给方案。这份清单给每类题的回答骨架、层次顺序与关键权衡点。
场景题的统一框架是四步,顺序不能乱:
| 步骤 | 要做的事 | 常见失误 |
|---|---|---|
| 澄清 | 问清数据规模、用户环境、技术栈、成功标准 | 上来就写方案 |
| 分层 | 按数据、渲染、网络、发布等层次拆开 | 所有点混在一起讲,听完不知道重点 |
| 权衡 | 每个方案说代价,给出选择条件 | 只讲优点,一问就露 |
| 度量 | 用指标验证,给出兜底与回滚 | 没有验收标准 |
回答时先给一句话总纲,再展开两到三层,收尾主动说"这个方案的代价是……"。面试官要的是决策过程,不是组件名单。
面试官想听什么:不是"调接口上报",而是事件模型、上报可靠性、性能开销与数据治理的完整闭环。
分层回答
track() 命令式与声明式两套 API;自动采集只做低成本项(PV、路由、错误)。IntersectionObserver 而不是 scroll 监听,按可见比例与停留时长判定,同一元素只报一次。sendBeacon 或 fetch keepalive。关键权衡
追问:SPA 路由切换怎么上报?SDK 自身报错怎么防死循环?怎么证明埋点没影响 LCP?
面试官想听什么:能不能识别"瓶颈在 DOM 数量与主线程",并区分数据层与渲染层。
分层回答
transform 同步滚动。关键权衡
追问:不定高怎么避免滚动跳动?滚动掉帧怎么定位?10 万行同时勾选怎么做(用 Set 存 ID,不存行对象)。
面试官想听什么:会不会拆指标、能不能给出分优先级的清单、做不到时怎么谈目标。
分层回答
defer、图片用 AVIF/WebP 加固定尺寸与 fetchpriority="high"、字体子集化并 preload。requestIdleCallback 做非关键工作。关键权衡
追问:1 秒实在做不到怎么办——按设备与网络分档定目标,优先保"可交互"而不是"全部加载完"。
面试官想听什么:是否理解"按需"有三个粒度:组件代码、样式、图标资源,以及产物格式对 tree shaking 的影响。
分层回答
preserveModules 保留模块结构,每个组件一个入口。import { Button } from 'ui' 依赖库的 sideEffects 正确标注;需要时用 unplugin 做自动导入与样式注入。peerDependencies 锁框架版本,语义化版本 + changelog,避免一个项目装两份框架。关键权衡
追问:为什么配了自动导入还是全量——检查是否被转成 CJS、sideEffects 是否漏标、入口是否指向了全量文件。
面试官想听什么:先止损再定位的优先级,以及能不能列出可验证的原因清单。
分层回答
关键权衡
追问:只有部分用户白屏说明什么(灰度批次、CDN 节点、机型、旧 HTML 缓存);白屏检测怎么做(关键节点渲染 + 超时 + 采样截图)。
面试官想听什么:是否理解"发布不是上传文件",而是流量切换、缓存一致性与可回退性。
分层回答
index.html 不缓存或极短缓存。关键权衡
追问:用户停留在旧页面怎么办(轮询版本号 + 提示刷新);回滚后为什么还有用户是坏的(CDN 与浏览器缓存未过期)。
| 环节 | 一句话模板 |
|---|---|
| 澄清 | "先确认规模、环境与成功标准,我按 X 万条、移动端为主来设计。" |
| 分层 | "分数据层、渲染层、发布层三步,先解决瓶颈最大的那层。" |
| 权衡 | "方案 A 胜在……,代价是……,在这个场景我选 A。" |
| 度量 | "用 LCP/错误率/包体积验收,超阈值就熔断回滚。" |