概览 & 知识路线
综述
- 候选人与学习者：碎片化刷题低产出、难以定位真实短板、缺乏“原理—策略—实践—度量”闭环。
- 面试官与团队：问题无序、深挖链路随意、不同面试官标准不一致、评价维度模糊。
- 组织能力建设：缺少可量化的进阶阶梯与复用的案例 / 诊断脚本，知识沉淀停留在零散文档。
价值主张
- 结构化：从「知识点列表」升级为「能力域 → 关键抽象 → 典型场景 → 诊断 & 优化策略」。
- 渐进式：每条主线均可沿 Depth Ladder：概念 → 机制 → 边界 / 失败模式 → Trade-off → 指标化实践。
- 可度量：Rubric + Checklist + 高阶信号，支持自检与面试快速打标（≥3 视为岗位基线，4/5 识别潜力与杠杆点）。
- 可演化：
routes/ 目录定义稳定骨架；backup/、temp/ 持续沉淀过渡材料，最终沉入规范版本；parsed/ 中间产物可用于自动化生成知识图谱或思维导图渲染。 - 真实导向：优先保留“遇到过 / 解释过 / 调优过”的真实案例与决策链，而非死记 API。
能力域九宫格（抽象视角）
- 语言与运行时（语义、内存、调度、并发抽象）
- 浏览器与执行环境（解析、渲染、合成、事件与安全沙箱）
- 异步与调度（事件循环 / 优先级 / 任务切片 / 背压）
- 工程化与质量（构建性能 / 测试金字塔 / 版本与发布安全 / 依赖治理）
- 框架内核与组件建模（响应式 / Diff / 状态分层 / 设计模式 / 性能策略）
- 性能与可观察性（指标体系 / 采集 / 归因 / 治理闭环）
- 网络协议与安全（传输、缓存、鉴权、攻防与供应链风险控制）
- 架构与演进（边界划分 / 微前端 / BFF / 边缘计算 / 扩展弹性）
- 影响力与协作（规范落地 / 质量运营 / Incident 管理 / 技术决策矩阵）
设计原则
- 最小可复用单元（MRU）：每一片段应可独立引用到面试脚本或培训材料。
- 深挖链脚本化：统一 “定义 → 问题来源 → 机制流程 → 边界 & 反例 → 与替代方案对比 → 量化实践”。
- 指标优先：性能 / 质量 / 稳定性回答要求“如何验证结果”优先于“罗列手段”。
- 决策透明：鼓励记录 Trade-off 表（维度：复杂度 / 成本 / 性能 / 风险 / 可演进性）。
- 安全前置：渗透至构建（SourceMap / 供应链）、运行（XSS / CSRF / CSP）、监控（脱敏 & 采样）。
- 工程闭环：采集 → 分析 → 策略 → 执行 → 验证 → 回归 → 模板化沉淀。
使用建议（角色视角）
- 学习者：先用
routes/*/checklist.md 做“冷启动自检” → 锁定 2~3 条主线补齐 → 以真实小项目 / 压测 / 指标采集固化 → 用 Rubric 复评等级。 - 面试官：根据 JD 设定“主干 + 备选”问题链；面中记录“答题路径 & 深挖停点 & 证据”；面后基于 Rubric 与高阶信号对齐等级避免主观漂移。
- 团队教练 / TL：抽取高频薄弱项生成内部 Workshop；复用“案例诊断脚本”形成稳定培养节奏。
进阶路径（参考节奏）
| 阶段 | 目标 | 核心产出 | 建议跨度 |
|---|
| Foundation | 补齐语言 & 事件循环 & 基础网络 | Checklist ≥70% ✓ | 1~2 周 |
| Mechanism | 深入运行机制 & 框架响应式 & 构建链路 | 一篇原理复盘 / 一次性能基线 | 2~3 周 |
| Engineering | 构建提速 / 质量体系 / 监控 + 错误治理 | 指标看板雏形 | 2~3 周 |
| Optimization | 性能 & 稳定性闭环 / 复杂状态建模 | 真实优化前后对比报告 | 2 周 |
| Architecture & Influence | 微前端 / BFF / 边缘策略 / 组织改进 | 决策矩阵 + 落地复盘 | 持续 |
能力评估闭环
定位 (Checklist & Rubric) → 深挖 (原理 & 案例) → 实践 (小型实验 / 重构 / 指标采集) → 度量 (基线 vs 目标) → 沉淀 (Playbook / 模板) → 复盘（差异 & 下一轮假设）。
Roadmap（部分规划）
- [ ] 自动聚合各阶段 checklist → 全局进度面板
- [ ] 题目标签体系（主题 / 难度 / 能力域 / 频次）
- [ ] CLI 或脚本：输入评分 → 生成结构化评语
- [ ] 思维导图 JSON → 交互式可视化（分类缩放 / 过滤高频）
- [ ] 场景化 Case Library：性能事故 / 构建瓶颈 / 线上错误 / 架构演进决策
- [ ] 指标模板：首屏 / 交互 / 稳定性 / 错误率 / 发布质量
- [ ] 供应链风险扫描脚本（依赖哈希 & 可疑行为）
期望：将“刷题”升级为“能力资本复利系统”；每次增量改动都能回落到结构中一个明确节点——可追踪、可度量、可演化。
以下章节为各能力域索引与提问/深挖脚本参考。
知识图谱
- JS 基础与运行机制
- 异步模型 & 事件循环
- 浏览器原理 & 渲染性能
- 网络协议 & 安全
- 工程化体系 (构建 / 质量 / 测试 / CI/CD)
- 框架核心 (Vue / React 对比 & 响应式/调度)
- 状态管理 & 复杂场景建模
- 组件设计 & 设计模式
- 性能优化体系 (加载 / 运行 / 交互 / 稳定性)
- 监控 & 可观察性 (埋点 / 错误 / Trace)
- 架构 & 微前端 / BFF / 边缘计算
- 安全 & 风险控制
- 数据持久化 & 缓存策略
- Dev Influence (代码规范 / Review / 技术决策)
- 综合串联演练 (Case Study / Trade-off)
🎯 面试阶段策略
| 阶段 | 目标 | 方法 | 时间参考 |
|---|
| 热身 | 打开话匣，观察表达 | 轻量基础问题 | 3-5 min |
| 基础验证 | 排除“冒充经验” | 快速多点触摸 | 5-10 min |
| 深挖主线 | 选 1~2 主干能力深钻 | 递进 WHY / HOW / TRADEOFF | 10-20 min |
| 跨域联动 | 测试知识网是否连通 | 关联跳转提问 | 5-10 min |
| 场景题 | 评估建模 & 抽象 & 复杂度处理 | 中型系统 or 性能优化 | 10-15 min |
| 反向提问 | 观察动机 / 视野 | 让对方提问 | 3-5 min |
评分 Rubric 在文末。
1. JavaScript 基础与运行机制
入口问题宜简：类型 / 作用域 / 原型链 / this / 闭包；深挖走向：执行过程 → 内存模型 → 性能影响 → 工程设计。
| 起始问题 | 追问升级路径（示例链） | 考察点 | 高阶信号 | 红旗 |
|---|
| JS 数据类型有哪些？ | typeof null 为什么是 object → JS 内部标签 → 装箱/拆箱 → Symbol/BigInt 设计目的 | 底层理解 | 知道规范语义 [[[Class]] 内部槽] | 只会背八种 |
| let/const 与 var 区别 | 暂时性死区本质 → 词法环境记录结构 → 为什么能减少错误 → 构建阶段与作用域绑定 | 执行上下文 | 能描述 EnvRecord 结构 | 空泛答语法 |
| this 绑定规则 | 箭头函数 this 固定原理 → 柯里化中 this 处理 → 手写 bind 要点 | 调用栈/绑定 | 能谈 new + bind 交互 | 背口诀 |
| 原型链是什么 | 查找过程 → 隐式原型与显式 prototype → class 语法糖 → 组合继承缺陷 | 对象模型 | 能评估继承 vs 组合 | 只说“指针指向” |
| 闭包定义 | 内存释放条件 → 典型泄漏点 → 实战优化（函数工厂/缓存） | 内存与生命周期 | 能举空间换时间例子 | 只说“函数嵌套” |
路径示例：原型链 → (如何判断实例关系) → instanceOf 原理 → (能否被破坏?) → 原型链污染安全案例。
2. 异步模型 & 事件循环
| 起始 | 深挖链 | 核心考察 | 高阶表现 | 红旗 |
|---|
| 宏任务 / 微任务举例 | 浏览器 vs Node 队列差异 → 为什么要区分 → Promise.then 何时排队 → MutationObserver → queueMicrotask 设计动机 | 事件循环模型 | 描述每轮 Tick 各阶段 | 顺序背诵 |
| Promise 状态不可逆意义 | 手写 Promise A+ 要点 → 链式 then 值穿透 → all vs race vs any 适用场景 → 并发控制实现 | 抽象 & 规格 | 能写并发池封装 | 只会 then/catch |
| async/await 是语法糖 | 异常传播模型 → 并行 vs 串行写法优化 → 隐式 Promise 包装成本 | 性能权衡 | 自建 runAll/容错封装 | await 全部串行 |
| 任务调度为何重要 | requestIdleCallback / scheduler API / React Fiber 调度优先级 → 粒度切分策略 | 响应流畅度 | 能提分片 + 背压 | 只说“不卡顿” |
3. 浏览器原理 & 渲染性能
| 起始 | 深挖 | 考察 | 高阶信号 | 红旗 |
|---|
| 从输入 URL 到页面展示 | 网络阶段 → 解析构建（HTML 递归 + CSSOM + Render Tree）→ Layout → Paint → Composite | 全链路脑图 | 能画关键路径并量化 | 背模板无细节 |
| 回流与重绘差异 | 如何降低 Layout Thrashing → RAF / 合理批量 → transform 合成层 | 性能实践 | 用过 Performance 面板分析 | 只会说“用节流” |
| 重排热点定位 | Chrome 工具 / Layout Shift 指标 → CLS 优化策略 | 诊断能力 | 指标驱动思路 | 靠猜 |
| 为什么避免长任务 | Long Task 定义 → 切片策略 → 优化主线程占用 | 交互流畅 | 提前谈 Web Worker 拆分 | 只说“阻塞” |
4. 网络协议 & 安全
| 起始 | 深挖链 | 考察 | 高阶信号 | 红旗 |
|---|
| HTTP1.1 与 HTTP2 区别 | 多路复用具体如何复用 → 队头阻塞原理 → HTTP3 + QUIC 特性 | 协议演进理解 | 能结合链路时延分析 | 只会列特性词 |
| 强缓存 vs 协商缓存 | Cache-Control 优先级 → CDN 回源策略 → ETag 碰撞风险 | 缓存层次 | 能给电商首屏策略组合 | 只会说 304 |
| CORS 原理 | 预检流程 → 凭证请求风险 → 安全基线（SRI/CSP）→ Token 放哪 | 安全模型 | 结合 CSRF 攻击路径示例 | 直接说“加 header” |
| 鉴权方案对比 | Session / JWT / 双 Token / SSO → 失效 & 刷新策略 | Trade-off | 能提重放/撤销/最小权限 | 只说“JWT 无状态” |
5. 工程化体系
| 起始 | 递进 | 考察 | 高阶信号 | 红旗 |
|---|
| 你们构建工具链 | 构建耗时瓶颈定位 → 缓存层（babel-loader / persistent cache / Turbo / SWC）→ 体积 & 体验优化 | 系统化治理 | 有真实基线对比数据 | 只说“压缩/分包” |
| 质量保障怎么做 | Lint → 单测 → E2E → 覆盖率门槛 → Git Hook/CI Gate | 测试金字塔 | 关注可靠性与变更风险 | 只会跑 jest |
| 发布流程 | CI/CD 阶段划分 → 版本标记 / 灰度 / 回滚 / SourceMap 安全 | 发布策略 | 具备灾备与审计意识 | 只是 push 上线 |
| Monorepo 有何利弊 | 依赖隔离 / 版本管理 / 构建加速 → Changeset/Publish 流程 | 架构权衡 | 讲缓存图谱 | 不懂 workspace |
6. 框架核心 (以 Vue 为主，可对比 React)
| 起始 | 深挖 | 考察 | 高阶信号 | 红旗 |
|---|
| Vue 响应式原理 | Proxy 依赖收集流程 → 副作用调度 → 批量更新 flush 时机 | 源码机制 | 能描述 effect / track / trigger | 只说“用 Proxy” |
| 虚拟 DOM 存在价值 | Patch 策略 → 静态标记提升 → Block tree | Diff 细节 | 能定位不必要 diff | 模糊评价“性能好” |
| 组件通信方式 | props/emit vs provide/inject vs store → 何时选总线/事件仓库 | 设计取舍 | 关注耦合方向 | 只会列举 |
| 性能优化手段 | 异步组件 / keep-alive / 懒加载 / SSR → 何时滥用缓存 | 策略选择 | 有命中率指标 | 只说“用缓存” |
| React 对比 | Fiber 调度 → 优先级 → Hook 闭包陷阱 | 跨框架映射 | 能讲 scheduler 意义 | 只说“一个快” |
7. 状态管理 & 复杂场景
| 起始 | 深挖 | 考察 | 高阶信号 | 红旗 |
|---|
| 为什么需要全局状态 | 状态分类（UI/Server/Cache/Session）→ 冷热数据分层 | 抽象能力 | 有最小可变单元思想 | 全用一个 store |
| 状态爆炸如何治理 | 领域划分 / 模块解耦 / 派发协议（Action DSL） | 复杂度控制 | 事件风暴建模经验 | 只会拆文件夹 |
| 一致性问题 | 乐观更新 / 回滚 / 并发写冲突处理 | 数据最终性 | 可描述版本号/向量 | 不知竞态 |
8. 组件设计 & 设计模式
| 起始 | 深挖 | 考察 | 高阶信号 | 红旗 |
|---|
| 设计一个可扩展表格 | 插槽/列描述 DSL → 虚拟滚动 → 行内编辑状态隔离 | 可扩展性 | 可描述渲染分层 | 只拼功能 |
| 复用策略 | HOC / Render Props / Hooks / Mixin 对比 | 模式选择 | 关注侵入性/可测试性 | 背 API |
| 主题定制实现 | CSS Var / 构建时替换 / 动态切换性能 | 前端架构 | 有降级策略 | 只会写两个主题文件 |
9. 性能优化体系
| 起始 | 深挖 | 考察 | 高阶信号 | 红旗 |
|---|
| 如何评估性能 | 指标体系 FP/FCP/LCP/CLS/INP/TBT → 采集管道 → 阈值设定 | 指标驱动 | 有真实治理闭环 | 只看 Lighthouse 分数 |
| 首屏优化策略排序 | 资源优先级 / 关键路径压缩 / Skeleton vs SSR / 边缘缓存 | 优先级判断 | 量化收益 | 无度量 |
| 大图与多媒体 | 格式策略 / 渐进加载 / 协商缓存 / 卷积处理（WASM） | 技术边界 | 提前做占位防抖动 | 只会写 img 标签 |
10. 监控 & 可观察性
| 起始 | 深挖 | 考察 | 高阶信号 | 红旗 |
|---|
| 前端需要监控什么 | 错误 / 性能 / 行为 / 质量 → 指标上报合并策略 | 系统视角 | 能谈采样率与成本 | 只列清单 |
| SourceMap 上传风险 | 混淆/隐藏 → 错误还原流程 → 隐私脱敏 | 安全 & 合规 | 有脱敏 pipeline | 直接上传全量 |
| Trace 关联 | 前端 TraceId 生成 → 透传后端 → 聚合可视化 | 端到端链路 | 深刻理解分布式追踪 | 不懂 Trace |
11. 架构 & 微前端 / BFF
| 起始 | 深挖 | 考察 | 高阶信号 | 红旗 |
|---|
| 为什么上微前端 | 业务拆分痛点 → 公共依赖隔离 → 版本治理 → 样式冲突处理 | 架构动机 | 阶段性评估/替代方案 | 为了“潮流” |
| BFF 价值 | 聚合裁剪 / 降低前端耦合 / 权限注入 | 协同设计 | 能描述缓存前移策略 | 不懂后端交互 |
| 边缘计算应用 | CDN Function / SSR Edge / 预渲染 | 前沿认知 | 关注冷启动与成本 | 空洞流行词 |
12. 安全 & 风险控制
| 起始 | 深挖 | 考察 | 高阶 | 红旗 |
|---|
| XSS 种类 | CSP 白名单策略 → 模板逃逸 → DOM Sink 管控 | 体系化 | 能给编码规范 | 只说“过滤” |
| CSRF 防御 | SameSite / Token 双重提交 / Referer 限制 | 防线组合 | 讲攻击链条 | 只会一个手段 |
| 供应链风险 | 依赖审计 / Lockfile 签名 / 可疑包检测 | 风险意识 | 实施自动化扫描 | 无概念 |
13. 数据持久化 & 缓存策略
| 起始 | 深挖 | 考察 | 高阶 | 红旗 |
|---|
| 前端本地存储选择 | 失效策略 / 容量限制 / 安全性 → 分层缓存（Memory/IndexDB/SW） | 设计能力 | 命中率监控 | 只会 localStorage |
| 跨标签同步 | BroadcastChannel / StorageEvent / SharedWorker | 场景匹配 | 能控制风暴频率 | 不知方案 |
14. Dev Influence（团队影响力）
| 起始 | 深挖 | 信号 | 高阶 | 红旗 |
|---|
| 代码规范如何落地 | 失败案例 → 推行策略 → 指标验证 | 推动力 | 数据驱动迭代 | 只写 README |
| 解决线上事故流程 | 分析 → 定位 → 暂停扩散 → 根因 → 事后复盘 | 稳定性 | 具备 RCA 模板 | 含糊其辞 |
| 技术决策如何评估 | 备选方案矩阵 → 约束条件 / 成本收益 | 架构理性 | 能提时间窗口 | 靠直觉 |
15. 综合串联演练（Case Study）
用一条串问链测试候选人“跨领域联动 + 权衡 + 落地”。
场景：大型活动页秒开优化 → 可能串联：网络 (HTTP/缓存) → 构建 (代码分割/产物分析) → 渲染 (关键路径) → 运行时 (长任务拆分) → 监控 (指标采集与验证) → 回滚策略。
示例串：
- 当前 LCP 指标 4.5s，如何分析瓶颈？
- 回答“图片大”→ 追问：如何验证是图片？→ Performance 面板定位 / Request 瀑布图 / Coverage。
- 回答“拆分资源”→ 追问：拆过度的副作用？→ 首屏请求并发 + 阻塞优先级。
- 回答“用 SSR”→ 追问：SSR 带来的缓存/动态数据问题、边缘 vs 中心节点。
- 回答“监控对比”→ 追问：A/B 方案实验设计如何统计显著性？
评价维度：是否能自顶向下列出诊断矩阵 → 是否有度量 → 是否有回退与风险控制。
🔍 深挖策略范式（面试官脚本）
Candidate says a term → 追问：
1. 定义？(避免空话)
2. 解决什么问题 / 痛点来源？
3. 原理流程能否画步骤？
4. 边界 & 失败场景？
5. 与替代方案对比 (维度：性能/复杂度/可维护/风险/成本)
6. 数据或案例支撑？
7. 若规模扩大 10x 会崩在哪？
8. 你做过什么改进 / 优化量化？
🧪 评分细则 Rubric（示例）
| 维度 | 1 基础欠缺 | 2 基础可用 | 3 稳健熟练 | 4 深度理解 | 5 体系化/影响力 |
|---|
| JS 机制 | 记不清语法 | 基础概念可答 | 能解释常见坑 | 能讲内部模型 | 性能/规范改进经验 |
| 异步模型 | 只会 Promise | 分清宏/微 | 正确调度 | 结合调优 | 自建调度器/实践复杂并发 |
| 性能优化 | 空泛描述 | 能列常见手段 | 能做针对性诊断 | 指标链路闭环 | 推动全局治理体系 |
| 工程化 | 不懂工具细节 | 会用脚手架 | 能配置并优化 | 深谙构建机制 | 设计团队标准与平台 |
| 架构抽象 | 只堆技术 | 能按层分块 | 能权衡取舍 | 前瞻演进方案 | 影响多项目演进 |
| 安全 & 风险 | 忽略风险 | 了解常规 | 能实施防护 | 建体系/审核 | 主导基线与自动化 |
| 可观察性 | 无概念 | 只报错误 | 基本监控 | 关联端到端 Trace | 指标驱动改进闭环 |
| 团队影响 | 个人贡献 | 偶发协作 | 持续稳定产出 | 引导规范 | 推动文化 / 复用生态 |
评估建议：以 3 作为合格基线；岗位要求 mid-high，需要 ≥3 且若干关键主线(性能/工程/框架/架构)出现 4，至少一项具备 5 水平潜力。
✅ 使用方式建议
- 面试前：根据 JD 勾选需要重点覆盖的主干节点。
- 记录：每条深挖链写“答题关键点 + 评分 + 风险提示”。
- 复盘：若多候选人同点薄弱，调整问题模板或提前投喂学习材料。
- 培养：把“高阶信号”沉淀为内部进阶手册指标。
可后续扩展：脚本化问答卡片、针对得分自动生成评语、与 routes/ 下 checklist 建立锚点。
（完）