前端面试准备 00：知识体系地图（8 年工程师版）与复习节奏

这是一套“从一线交付走到面试现场”的知识体系。目标不是把知识点背一遍，而是把能力组织成可表达、可推导、可落地的结构。

你可以把这套系列当成一个“面试用的知识图谱 + 训练营”。每篇都给必会点、高频追问、实战落地与自测清单。

01 面试在考什么（你要对齐的评价模型）#

多数前端面试并不是在考“你记得多少 API”，而是在考四类能力：

• 基础可推导：遇到新问题能从语言/运行时原理推导出结论（例如事件循环、闭包、原型链、渲染流水线）。
• 工程可交付：能把复杂需求做成可维护的工程（模块边界、依赖管理、质量体系、CI、发布、回滚）。
• 性能与稳定性：能定位问题、量化收益、做取舍（Web Vitals、长任务、内存、缓存、监控）。
• 业务与协作：能讲清楚“我如何把需求做成结果”，以及“我如何推动团队更好”（方案、风险、里程碑、复盘）。

02 知识体系地图（建议按此顺序复习）#

我建议用“从底向上”的顺序。每一层都依赖下层：

A. 语言与运行时（JavaScript / TypeScript）#

• JS：执行上下文、作用域链、闭包、this、原型链、类语法糖、模块系统
• 异步：Promise、微任务/宏任务、async/await、取消与超时
• 语义：相等比较、类型转换、Map/Set、迭代器、生成器
• TS：类型系统、泛型、条件类型、infer、类型体操边界与工程落地

B. 浏览器与网络（Browser / HTTP）#

• 浏览器：渲染流水线、合成层、回流重绘、事件模型、输入响应
• 存储：Cookie / localStorage / sessionStorage / IndexedDB / Cache Storage
• 网络：HTTP/1.1 vs HTTP/2 vs HTTP/3、缓存、CORS、CDN、TLS

C. 框架与 UI（React 为主，也要懂通用思想）#

• React：渲染与更新、Hooks 心智模型、并发渲染、SSR/CSR/Streaming
• 状态：本地状态、服务端状态、缓存一致性、表单复杂度
• 组件：可复用/可测试/可维护的组件设计，A11y 与交互细节

D. 工程化（Build / Lint / Test / CI / Release）#

• 构建：Tree Shaking、code splitting、依赖图、bundle 分析
• 质量：ESLint/TS、单测/集成/E2E、Mock 策略、契约测试
• 发布：灰度、回滚、版本策略、变更风险控制

E. 性能与可观测性（Performance / Observability）#

• 指标：LCP/INP/CLS、TTFB、Long Task、内存与 GC
• 手段：拆包、缓存、图片与字体、预加载、服务端渲染策略
• 可观测：埋点、日志、Tracing、告警、SLO

F. 安全与合规（Security）#

• XSS、CSRF、CSP、点击劫持、依赖供应链风险
• 权限与鉴权：Cookie/Session、JWT、SameSite、刷新与吊销

G. 系统设计与架构（Front-end System Design）#

• 模块边界、可扩展性、配置化、插件化、微前端的取舍
• 多端一致性、国际化、主题与设计 Token、组件库治理

H. 项目表达与行为面（Project / Behavioral）#

• STAR 结构讲项目：背景/目标/行动/结果/复盘
• 关键：你做了什么权衡、如何推动、如何衡量结果

03 2 / 4 / 8 周复习节奏（可执行）#

2 周冲刺（已会基础，补短板）#

• 第 1 周：JS + 浏览器 + 网络（每天 2 小时高强度）
• 第 2 周：React + 工程化 + 性能 + 项目表达

4 周稳扎稳打（大多数人最合适）#

• Week 1：JS（含异步、手写题与边界）
• Week 2：浏览器/网络/安全
• Week 3：React + 状态管理 + SSR
• Week 4：工程化 + 性能 + 系统设计 + 模拟面试

8 周体系化（目标大厂/高阶岗位）#

在 4 周基础上加：

• 深入性能与可观测（真实线上问题）
• 组件库/设计系统治理
• 架构演进（多团队协作、边界与治理）

04 每一块的“验收标准”（不是背完就算）#

你需要能做到：

• 讲得清：用自己的话讲清概念与边界（3 分钟/10 分钟两个版本）
• 推得出：遇到变形题能推导而不是靠背答案
• 写得对：能写出可运行、可测试的最小实现
• 落得下：能给到工程落地方案与权衡（成本/收益/风险）

05 复盘模板（强烈建议每次练习后写）#

写 5 行就够：

1. 问题是什么（原题）
2. 我第一反应是什么（哪里卡住）
3. 正确答案/关键推导
4. 易错点与边界
5. 下次如何 60 秒讲清

---

接下来每篇文章会对应上面地图的一块：先把高频考点打穿，再把“能落地的工程经验”补齐。

06 怎么把“会”训练成“能面试”（训练方法论）#

你在准备时会遇到一个典型错觉：看懂了 ≠ 说得清 ≠ 写得对 ≠ 能在压力下稳定输出。

我建议你把训练分为三条线并行：

A. 解释线（Explain）#

目标：任何高频题都能讲出「结论 → 原理 → 边界 → 例子」。

训练法：

• 60 秒版：一口气讲清核心结论 + 1 个关键例子
• 5 分钟版：补上原理推导 + 边界情况 + 常见坑

B. 编码线（Implement）#

目标：能写出最小正确实现（可跑、可测），而不是“写个大概”。

训练法：

• 先写“最小实现”（先覆盖主路径）
• 再补“边界与测试”
• 最后再谈“性能与工程化”

C. 复盘线（Review）#

目标：每道题都留下可复用的“错误模式”与“纠错手段”。

训练法：

• 把错误分类：概念缺失 / 推导断层 / 边界没想到 / 表达混乱
• 针对性补齐：画图、写最小例子、整理口述模板

07 面试题库如何刷（从题海到结构）#

题目分级（建议）#

• S 级（必须秒答）：事件循环、闭包、this、原型链、React hooks、缓存、CORS
• A 级（高频追问）：SSR/CSR 取舍、性能指标、工程化体系、发布与回滚
• B 级（加分项）：系统设计、可观测、组件库治理、供应链安全

刷题策略#

• 先刷 S 级“讲解题”（把语言组织好）
• 再刷 S 级“代码输出题”（训练推导）
• 最后刷“系统题”（工程化/架构/项目表达）

08 全系列统一练习模板（每篇都会用）#

你会在每篇末尾看到类似结构：

• 笔试题：选择/问答/代码输出（有标准答案）
• 编码题：手写实现/小组件/小工具（有参考实现）
• 开放题：工程取舍/方案设计（有回答框架）

下面给一个“跨章节的示例题”，让你感受答案的推导方式。

09 示例：如何写出“讲原理”的参考答案（演示）#

题目（问答）#

为什么 Promise.then 的回调通常比 setTimeout(fn, 0) 更早执行？

参考答案（结论 → 原理 → 推导 → 边界）#

结论：因为 then 回调进入微任务队列，而 setTimeout 进入宏任务队列。每一轮宏任务执行完毕后，事件循环会“清空微任务”，再进入下一轮宏任务。

原理：浏览器/Node 都有事件循环调度机制。主线程执行一个宏任务（例如执行脚本、处理一次事件回调），期间可能产生微任务（Promise reaction）。当调用栈清空时，会先把“本轮产生的微任务”全部执行完，再去取下一个宏任务。

推导：因此在同一轮宏任务里创建的 Promise.resolve().then(...) 会在 setTimeout 之前运行。

边界：不同环境对“渲染时机”与某些任务源（例如 MessageChannel、setImmediate）的实现细节不同，但“微任务优先于下一轮宏任务”这一点是通用规律。

---

下一篇（01）开始我们进入第一块核心：JavaScript 运行时。