前端场景题索引：从问题到可验证方案

前端场景题索引：从问题到可验证方案

这是一张“场景 -> 原理 -> 实现 -> 边界 -> 验证”的入口图。场景题不按 PDF 页码背诵，而是先判断问题属于哪一类，再进入对应专题。

使用方式

每个场景至少完成四步：

1. 先用一句话定义故障或约束，说明成功标准。
2. 进入表格中的专题，讲清关键机制和方案取舍。
3. 补充失败边界：取消、超时、重试、权限、兼容性和回滚。
4. 给出验证方法：日志、Performance 面板、网络面板、测试或线上指标。

状态说明：已覆盖表示已有文章可以直接支撑回答；部分覆盖表示已有基础但仍有独立细节待补；待补表示保留了题目方向，尚未把正文加入知识库。

一、请求、并发与错误协调

场景	先读	状态与回答重点
多个接口同时失败，只弹一个提示	Axios 与 ECharts 速览、JavaScript 运行机制与资深面试	已覆盖。在协调层按一次业务批次聚合错误；主动取消不应当当成失败提示。
重复点击导致重复请求或重复下单	Vue 面试真题补充、HTTP 面试真题补充	已覆盖。区分按钮节流、进行中请求去重和服务端幂等键；不能只靠前端禁用按钮。
页面切换后旧请求覆盖新数据	Axios 与 ECharts 速览、React 面试真题补充	已覆盖。使用 AbortController 或请求代次校验；共享请求要定义消费者取消语义。
多个请求同时返回 401	Vue 面试真题补充、Node.js JWT 鉴权机制实现	已覆盖。只允许一个刷新任务，其余请求挂起并在刷新后重放；刷新失败要统一清理会话。
网络抖动时是否重试	JavaScript 运行机制与资深面试、HTTP 面试真题补充	已覆盖。只对可重试或具备幂等语义的请求重试，并限制次数、退避和抖动。
请求层如何限流、去重和超时	跨端交互与发布治理、Axios 与 ECharts 速览	已覆盖。专题补齐按资源/用户维度的并发池、队列背压、绝对超时预算、取消/重试边界和可观测字段；Axios 文章保留请求去重基础。
如何设计可复用的 HTTP 请求限流器	前端趋势与面试能力模型、跨端交互与发布治理	已覆盖。先区分客户端并发池和服务端限流，再说明队列、公平性、取消、超时、幂等重试和排队/执行指标。

二、后端协作、流式传输与容器

场景	先读	状态与回答重点
前端需要聚合多个后端接口并适配不同端	BFF、REST 与 GraphQL	已覆盖。比较 BFF 的端适配和聚合、REST 的资源契约与 GraphQL 的字段选择；补超时、部分失败、缓存和权限边界。
REST 和 GraphQL 如何选型	BFF、REST 与 GraphQL	已覆盖。从团队协作、缓存、版本、N+1、审计和客户端查询自由度说明取舍，不把任一方案当默认答案。
前后端联调中的 DTO、BO、PO、DAO 如何分层	前后端分层与联调	已覆盖。传输对象、业务对象和持久化对象分开，边界处做校验、错误码、幂等和契约版本。
事件驱动短任务是否适合 Serverless	BFF、REST 与 GraphQL	已覆盖。比较 FaaS/BaaS 与容器的冷启动、执行上限、重复投递、无状态和观测边界，按延迟预算和流量曲线选型。
AI 输出需要实时展示时选哪种协议	AI 前端工程、WebSocket	已覆盖。比较 chunked、SSE 和 WebSocket 的方向性、重连、游标、幂等和鉴权；chunked 是传输编码，不是独立业务协议。
容器启动后立即退出或磁盘被打满	Docker 基础知识速览、Docker 面试进阶详解	已覆盖。检查前台主进程、日志 stdout、DNS、资源限制、镜像/卷清理和非 root 运行。
Redis 锁失效或释放了别人的锁	事务与分布式锁	已覆盖。SET NX PX 配唯一 token，Lua 比较删除；说明租约、时钟、续期、故障和数据库事务并不等价。

三、身份、安全与浏览器存储

场景	先读	状态与回答重点
Token 放在哪里，如何降低 XSS/CSRF 风险	浏览器原理、性能与资深面试、JavaScript 面试真题补充：浏览器 API 与安全场景	已覆盖。说明 Cookie 属性、Storage 的脚本可读性、CSRF token、SameSite、Origin 校验和 CSP 的边界。
跨域请求失败如何定位	浏览器跨域与高频基础速览、HTTP 面试真题补充	已覆盖。先区分同源策略限制的是读取还是发送，再检查 CORS 响应、预检和反向代理。
文件上传如何防止伪造和越权	JavaScript 面试真题补充：浏览器 API 与安全场景、Node.js 文件上传实现详解	已覆盖。扩展名和 file.type 只能作提示，服务端要复核文件内容、大小、权限和存储路径。
iframe/第三方脚本带来的安全风险	浏览器原理、性能与资深面试	已覆盖。文章已覆盖 postMessage 的 origin/source 校验、iframe 隔离、frame-ancestors 与第三方脚本供应链边界；复杂权限协议仍可深化。

四、渲染、性能与大数据量

场景	先读	状态与回答重点
首屏慢，如何判断网络、脚本还是渲染瓶颈	性能知识地图、指标采集与问题诊断、浏览器原理、性能与资深面试	已覆盖。按导航、资源、主线程、布局绘制和交互延迟拆分，不要只说“压缩资源”。
一次性渲染几万条数据	性能与大数据真题、渲染与运行时优化、浏览器原理、性能与资深面试	已覆盖。优先分页/虚拟列表；必须创建全部节点时再用 DocumentFragment 和分帧，批次需用性能记录调整。
图片或列表曝光如何实现	浏览器 高频追问 Q&A、浏览器原理、性能与资深面试	已覆盖。IntersectionObserver 比手写滚动监听更适合曝光，但仍需处理卸载、阈值和重复上报。
CSS 改动导致页面抖动	性能与大数据真题、CSS 面试真题补充：布局边界、渲染与性能、CSS 布局、渲染与资深面试	已覆盖。区分样式计算、布局、绘制和合成；用测量结果决定是否使用 transform 或层提升。
如何采集线上性能和错误	指标采集与问题诊断、前端稳定性：监控 SDK 与故障闭环、浏览器原理、性能与资深面试	已覆盖。统一事件信封、采样、脱敏、上报失败降级和 release/trace 关联。

五、页面生命周期、跨上下文与微前端

场景	先读	状态与回答重点
页面离开前上报最后一次行为	浏览器 高频追问 Q&A、前端稳定性：监控 SDK 与故障闭环	已覆盖。优先 visibilitychange/pagehide + sendBeacon；它只保证请求入队，不保证服务端已处理。
多标签页同步登录状态或主题	浏览器原理、性能与资深面试	已覆盖。同源广播可用 BroadcastChannel；使用后关闭，不能跨源，也不要传递不可结构化克隆的数据。
离线缓存后线上出现旧版本	浏览器原理、性能与资深面试、浏览器 高频追问 Q&A	已覆盖。Service Worker 要有版本化缓存、激活和回滚策略，不能把 skipWaiting() 当成无条件最佳实践。
qiankun 子应用无法加载或卸载后残留	Vue 面试真题补充、Webpack 面试真题补充：构建链路、优化与选型	已覆盖。检查运行时 public path、资源入口、沙箱、事件/定时器清理和开发环境调试边界。
iframe、Worker、跨窗口如何通信	浏览器原理、性能与资深面试、跨端交互与发布治理	已覆盖。基础通道矩阵和安全校验见浏览器专题；请求响应关联、握手、Transferable、超时取消和版本协商见跨端专题。

六、文件、媒体和交互组件

场景	先读	状态与回答重点
大文件分片、断点续传和合并	JavaScript 面试真题补充：浏览器 API 与安全场景、Node.js 文件上传实现详解	已覆盖。会话 ID、分片序号、文件指纹、重试、校验、幂等合并和过期清理要成套回答。
浏览器预览 PDF	JavaScript 面试真题补充：浏览器 API 与安全场景	已覆盖。文章已比较原生/iframe/PDF.js 路径，并说明 worker、按页渲染、跨源权限、任务取消、内存释放和大文档分页策略。
Canvas 交互（座位图、签名、支付码）	跨端交互与发布治理、CSS 布局、渲染与资深面试	已覆盖。专题覆盖 DPR/backing store、坐标逆变换、几何与空间索引命中、可访问性替代方案、跨源导出和敏感数据边界。
复杂组件的键盘、焦点和异步状态	前端组件库工程化、HTML 语义、可访问性与资深面试	已覆盖。组件 API、受控/非受控、焦点管理、回归测试和 SSR 水合需一起考虑。
下拉刷新、手势和滚动冲突	跨端交互与发布治理、浏览器原理、性能与资深面试	已覆盖。专题覆盖下拉刷新状态机、Pointer/Touch Events、passive 与 touch-action、嵌套滚动、回弹、取消和无障碍替代操作。

七、构建、兼容与依赖治理

场景	先读	状态与回答重点
Babel 如何兼容旧浏览器，运行时依赖放在哪里	Babel 原理与运行时依赖、Webpack 面试真题补充：构建链路、优化与选型、ES6 面试真题补充：十题边界索引	已覆盖。先按目标浏览器选择转换与 polyfill 注入策略，再权衡 @babel/runtime、产物体积、库/应用边界；具体版本与构建约束仍需结合项目验证。
构建体积大、HMR 慢或拆包失控	Vite 面试进阶详解、Webpack 面试真题补充：构建链路、优化与选型	已覆盖。先看指标和依赖图，再决定缓存、懒加载、拆包或插件治理。
如何安全修补第三方 npm 包	Git 面试进阶详解、前端组件库工程化	已覆盖。补丁要可审计、可复现、可回滚，锁文件和发布产物必须一并检查。
如何开发、测试和发布自己的 npm 包	跨端交互与发布治理、前端组件库工程化	已覆盖。跨端专题补齐 exports、types、sideEffects、tarball/消费者冒烟、版本策略、registry 与回滚；组件库专题保留 API 和测试基础。
国际化资源如何组织并随路由切换	跨端交互与发布治理、React Context	已覆盖。覆盖 locale 规范化、命名空间懒加载、回退、缺 key 观测、SSR 水合、RTL、URL 本地化和多标签页同步。
大型工程如何统一 ESLint、tsconfig 和自动化检查	跨端交互与发布治理、TypeScript 类型系统与资深面试、前端组件库工程化	已覆盖。专题补齐共享配置继承、Project References/包边界、老项目增量迁移、基线豁免、CI 阻断级别和缓存失效；TypeScript 文章保留严格类型原则。

八、低代码、AI 与系统化项目题

场景	先读	状态与回答重点
Schema 驱动的页面编辑器和运行时	低代码系统：Schema、渲染器与插件化架构	已覆盖。区分物料、编辑器、运行时和发布层，重点讲版本迁移、校验和表达式安全。
运营弹窗或搭投 DSL 如何跨端演进	低代码系统：Schema、渲染器与插件化架构	已覆盖。从领域共性、最小样式、曝光请求和声明式行为建模，说明版本迁移和降级。
模型调用工具并生成受控 UI	AI 前端工程：LLM、Agent、MCP 与生成式 UI	已覆盖。模型只描述意图，前端掌握组件目录、权限和渲染权；限制步数、超时、重试和敏感数据。
如何把 MCP/A2A 服务接入生产	AI 前端工程：LLM、Agent、MCP 与生成式 UI、前端稳定性	已覆盖。工具 Schema、认证、限流、审计、会话、Prometheus/日志和优雅关闭要成套设计，不能直接执行模型代码。
大促前如何做全链路高可用保障	前端稳定性：监控 SDK 与故障闭环	已覆盖。按依赖盘点、监控、容量、响应、测试、复盘推进，并准备预案、作战手册和沙盘演练。
组件库如何支撑多个业务和框架	前端组件库工程化、设计模式面试真题补充：创建、切换与隔离	已覆盖。回答 API 契约、设计令牌、可访问性、测试、版本和弃用周期。
项目故障如何在面试中讲清楚	Vue 面试真题补充：源码、场景与工程实践、前端稳定性：监控 SDK 与故障闭环	已覆盖。按现象、范围、假设、证据、修复、验证和复盘组织，不编造无法证明的指标。

九、本轮新增专题入口

复习目标	推荐入口	使用方式
三份 9 月预测资料的题目总览	9 月高频真题与考点地图	先按模块、网络、性能和表达选题，再回到原理文章
模块、协议、缓存和构建追问	模块、网络与构建真题	用 URL/HTTP/模块/产物四条链路口述
指标、渲染、1px 和大数据	性能、渲染与大数据真题	先写基线和场景，再说明改动、证据和回滚
语言边界与职级表达	JavaScript 语言边界与工程表达真题	用结论、机制、边界、项目证据升级短答
项目亮点与个人职责	项目亮点总览	每个项目补架构图、状态图、指标和失败复盘
性能专项完整知识链	性能优化知识地图	从指标诊断依次读网络、运行时、框架和构建治理

待补专题清单

当前来自场景 PDF 的高优先级专题已在上表和跨端交互与发布治理中落地。后续新增题目仍按“问题、机制、边界、验证”结构补充；课程名称、品牌、师资、就业服务、企业 Logo 和无法验证的收益数字均不纳入知识库。

场景题统一答题模板

问题与成功标准 -> 约束与风险 -> 方案和关键机制
-> 失败/取消/回滚边界 -> 监控与验证 -> 取舍和后续演进

回答具体技术时，优先给可验证的事实和边界，再给项目中的选择；不要把某个库、协议或指标当成脱离上下文的万能答案。