一个月面试复习方案（9 年前端）

总体策略

核心原则

9 年经验的前端面试重点不在八股文的覆盖面，而在于 深度 + 体系化 + 表达力。面试官期望你能从原理、工程、架构三个层面给出有见地的回答。

优先级说明

每篇文档标注优先级，根据面试高频程度和你的时间灵活调整：

标记	含义	建议时间	说明
🔴	必学	30-45 min	深入理解，能讲清原理，高频考点
🟡	重点	15-20 min	掌握核心要点，能回答基本问题
🟢	速览	5-10 min	知道概念即可，被问到能简单回答

每天 3.5-4 小时，30 天共约 110 小时，覆盖全部 463 篇知识文档。

每日练手：保持题感

为什么要把算法和手写分散到每天？

集中突击容易"学了后面忘了前面"。将 34 道算法题 和 25 道手写题 分散到每天，每天固定 30-40 分钟练手，保持手感和肌肉记忆，面试时才能下意识写出来。

阶段	日期	安排
新题阶段	Day 1-24	每天 1-2 道算法 + 1 道手写（🔴 题优先排前两周）
收尾阶段	Day 25	最后 1 道手写题
复习阶段	Day 26-29	复习错题 + 高频题速写热手
模拟阶段	Day 30	全真模拟面试

9 年经验面试的核心差异

和初中级不同，资深面试考察的是：

1. 技术深度 —— 不只是"怎么用"，要讲清"为什么"和"怎么实现的"
2. 架构能力 —— 系统设计、技术选型、权衡取舍
3. 工程思维 —— 规范落地、CI/CD、监控告警、团队协作
4. 业务理解 —— 技术方案如何服务业务目标
5. 领导力信号 —— 推动技术改进、带人经验、跨团队协作

---

第 1 周：算法基础 + 前端核心 + 项目梳理

知识文档：算法基础 6 + JS 18 + TS 16 + CSS 18 + HTML 6 + 浏览器 16 + 项目 24 = 104 篇 每日练手：算法 11 题 + 手写 7 题

Day 1：算法基础 + JavaScript 语言核心

上午：算法基础速览（6 篇）

为什么从算法基础开始？

算法基础是后续 30 天每日练手的前置知识。先建立复杂度分析、数据结构、常见算法思维的框架，后面每天做题才能高效。

优先级	文档	重点
🔴	常见算法思维	双指针、滑动窗口、递归、DP、贪心、回溯
🔴	解题思路与方法论	读题、分析、设计、编码、测试
🟡	复杂度分析	大 O 表示法、时间/空间复杂度
🟡	数据结构基础	数组、链表、栈、队列、哈希表、树
🟢	排序算法	快排、归并、堆排序
🟢	二分查找	基础模板、常见变体

下午：JavaScript 语言核心（9 篇）

优先级	文档	重点
🔴	作用域与作用域链	词法作用域、变量提升、TDZ、let/const
🔴	闭包	闭包原理、应用场景、内存问题
🔴	this 指向	4 种绑定规则、箭头函数、优先级
🔴	原型与继承	原型链、继承方式、ES6 class
🔴	Event Loop 事件循环	宏/微任务、输出题必考
🟡	数据类型与类型判断	typeof/instanceof、类型转换
🟡	异步编程	Promise、async/await、错误处理
🟡	ES6+ 新特性	解构、可选链、空值合并
🟡	V8 垃圾回收与内存泄露	分代回收、内存泄露场景

📝 每日练手

类型	题目	考点
🧮 算法	两数之和	哈希表
🧮 算法	有效的括号	栈
✍️ 手写	手写 Promise	Promises/A+ 规范

常考输出题

Event Loop 输出题几乎必考，重点练习 Promise + setTimeout + async/await 混合执行顺序。

Day 2：JavaScript 进阶与工具

优先级	文档	重点
🔴	Proxy 与 Reflect	Vue 3 响应式基础、元编程
🟡	深拷贝与浅拷贝	实现方式、循环引用
🟡	防抖和节流	概念、应用场景、手写
🟡	JavaScript 模块化	ESM vs CJS、Tree Shaking
🟡	Set 和 Map	WeakMap/WeakRef、实际应用
🟡	数组方法	高阶函数、迭代方法
🟢	Symbol 与迭代器	迭代协议、Generator
🟢	正则表达式	常用场景、性能
🟢	位运算	权限控制、算法应用

📝 每日练手

类型	题目	考点
🧮 算法	反转链表	迭代、递归
🧮 算法	合并两个有序链表	链表操作
✍️ 手写	深拷贝与浅拷贝	循环引用、WeakMap

Day 3：TypeScript 全覆盖

优先级	文档	重点
🔴	泛型	泛型约束、条件类型、infer
🔴	工具类型	Partial/Pick/Omit 原理
🔴	type vs interface	区别、声明合并
🔴	类型守卫	is、asserts、可辨识联合
🟡	TypeScript 与 React	组件 Props、Hooks 类型
🟡	条件类型	extends、infer、分发
🟡	联合类型与交叉类型	联合 |、交叉 &、分发
🟡	深度工具类型	DeepPartial/DeepReadonly
🟡	映射类型	keyof、in、as 子句
🟡	实现 Pick/Omit	手写 Pick/Omit/Exclude
🟢	TypeScript 基础知识	类型系统概览
🟢	类型断言	as、!、satisfies
🟢	类型推断	变量推断、泛型推断
🟢	装饰器	TS5 标准装饰器
🟢	模板字面量类型	模板字面量、字符串操作
🟢	TypeScript 配置	strict、paths、模块解析

📝 每日练手

类型	题目	考点
🧮 算法	移动零	双指针
🧮 算法	最小栈	辅助栈
✍️ 手写	手写 EventEmitter	发布订阅、TypeScript 泛型

Day 4：CSS 全覆盖

优先级	文档	重点
🔴	Flex 布局	容器/项目属性、flex 简写
🔴	BFC 块级格式化上下文	触发条件、应用场景
🔴	CSS 居中方案	至少 5 种方案
🔴	移动端适配	viewport、rem/vw、1px
🟡	Grid 布局	模板属性、Grid vs Flex
🟡	盒模型	border-box、margin 塌陷
🟡	定位与层叠上下文	5 种定位、z-index
🟡	选择器与优先级	优先级计算、:has()
🟡	响应式设计	媒体查询、容器查询、clamp()
🟡	CSS 动画与过渡	transition、animation、GPU
🟡	常见布局实现	圣杯/双飞翼、粘性页脚
🟢	CSS-in-JS 与原子化 CSS	styled-components、Tailwind
🟢	CSS 性能优化	contain、content-visibility
🟢	CSS 自定义属性	CSS 变量、主题切换
🟢	浮动与清除浮动	clearfix 方案
🟢	CSS 预处理器	Sass/Less/PostCSS
🟢	隐藏元素的方式	9 种方式对比
🟢	CSS 新特性	Nesting、@layer、@scope

📝 每日练手

类型	题目	考点
🧮 算法	三数之和	排序 + 双指针
✍️ 手写	手写 Promise 静态方法	all/race/allSettled/any

Day 5：HTML + 浏览器原理 Part 1

HTML（6 篇）：

优先级	文档	重点
🟡	语义化与可访问性	语义化标签、ARIA、WCAG
🟡	HTML5 新特性	Canvas、拖拽、Web Storage
🟡	meta 标签与 SEO	viewport、OG 协议
🟢	表单与表单验证	FormData、React 表单
🟢	Canvas 与 SVG	2D API、动画、性能对比
🟢	Web Components	Shadow DOM、Custom Elements

浏览器 Part 1（8 篇）：

优先级	文档	重点
🔴	浏览器渲染原理	关键渲染路径、重排重绘
🔴	从输入 URL 到页面展示	全链路面试经典题
🔴	浏览器缓存机制	强缓存 vs 协商缓存
🔴	跨域问题	CORS、简单/预检请求
🔴	跨页面通信	BroadcastChannel、SharedWorker、postMessage、MessageChannel
🟡	浏览器安全	XSS/CSRF 防御
🟡	事件机制	冒泡、捕获、委托
🟡	前端存储技术	Cookie/localStorage/IndexedDB
🟡	浏览器进程架构	多进程、站点隔离

📝 每日练手

类型	题目	考点
🧮 算法	字符串相加	模拟竖式加法
🧮 算法	千分位格式化数字	字符串处理
✍️ 手写	手写 new/instanceof/typeof	原型链遍历

Day 6：浏览器 Part 2 + 项目梳理开始

浏览器 Part 2（8 篇）：

优先级	文档	重点
🟡	script 的 defer 和 async	加载方式、执行顺序
🟡	Web Workers	Worker 类型、Service Worker
🟡	History API 与前端路由	pushState、Hash/History
🟢	页面生命周期	DOMContentLoaded、bfcache
🟢	requestAnimationFrame	动画原理、requestIdleCallback
🟢	WebSocket 与 SSE	实时通信方案对比
🟢	浏览器兼容性	特性检测、Polyfill
🟢	浏览器指纹	Canvas/WebGL 指纹

项目经验梳理开始（下午）：

项目经验是资深面试的重中之重

9 年经验的面试，50% 以上时间在聊项目。用 STAR 法则结构化 2-3 个核心项目。

选择 2-3 个核心项目（技术挑战大、有量化成果），开始 STAR 梳理：

S（Situation）：项目背景、团队规模、你的角色
T（Task）：你负责什么、面临什么技术挑战
A（Action）：你做了什么、技术方案是什么、为什么这么选
R（Result）：量化结果（性能提升 X%、效率提升 X 倍）

📝 每日练手

类型	题目	考点
🧮 算法	合并区间	排序 + 贪心
✍️ 手写	手写柯里化 curry	占位符、类型安全

Day 7：项目经验深度准备

Step 1：选择 2-3 个核心项目

选择标准：

• 技术挑战大、有亮点的项目
• 能体现架构设计能力的项目
• 有量化成果的项目（性能提升 X%、效率提升 X 倍）

Step 2：用 STAR 法则结构化每个项目

S（Situation）：项目背景、团队规模、你的角色
T（Task）：你负责什么、面临什么技术挑战
A（Action）：你做了什么、技术方案是什么、为什么这么选
R（Result）：量化结果（性能、效率、业务指标）

Step 3：准备每个项目的深挖点

对照这些文档准备项目相关的高频问题：

优先级	文档	说明
🔴	SWAI 面试高频	Next.js、BFF、埋点、Monorepo
🔴	Swee 面试高频	NestJS、PWA、VTable
🔴	RYZZ 面试高频	WebSocket、Web3、Next.js
🔴	HUYA 面试高频	播放器 SDK、SSR、性能优化
🟡	SWAI 主站技术总结	Next.js 16、React 19
🟡	SWAI 后端服务总结	NestJS、BFF
🟡	SWAI 事件埋点服务总结	埋点、BI 分析
🟡	SWAI 管理后台技术总结	UmiJS、Ant Design Pro
🟡	Swee Mobile PWA 技术总结	Next.js、PWA、AI 伴侣
🟡	Swee 官网技术总结	i18n、Sentry
🟡	Swee H5 页面技术总结	JSBridge、游戏 SSO
🟡	Swee 后端服务技术总结	NestJS、TypeORM
🟡	Swee 管理后台技术总结	VTable、薪资结算
🟡	Swee 技术评审	改进建议
🟢	RYZZ 主站技术总结	WebSocket+Protobuf
🟢	RYZZ H5 页面技术总结	Web3、OAuth
🟢	RYZZ 管理后台技术总结	UmiJS Max 4
🟢	RYZZ 图片处理服务	Sharp、OSS、CDN
🟢	RYZZ 技术评审	Monorepo、Docker
🟢	HUYA 沉浸式播放器	HLS、虚拟列表
🟢	HUYA 中台视频上传SDK	分片上传、TUS
🟢	HUYA 直播m站&视频站重构	SSR、性能优化
🟢	HUYA 视频站播放器SDK	HLS、弹幕
🟢	FKW 凡科快图	Canvas、Fabric.js

Step 4：准备通用项目问题

必须能流利回答：

1. 介绍一下你做过最有挑战的项目 → 参考
2. 你做过最有成就感的事 → 参考
3. 你在项目中遇到的最难的 Bug → 参考
4. 你推动过哪些技术改进 → 参考
5. 你是怎么做技术选型的 → 参考

📝 每日练手

类型	题目	考点
🧮 算法	接雨水	双指针 / 单调栈
✍️ 手写	限流调度器	并发控制、优先级

---

第 2 周：框架原理 + 工程化体系

知识文档：React 18 + Vue 17 + 构建 14 + 工程化 12 + 性能 16 = 77 篇 每日练手：算法 10 题 + 手写 7 题

Day 8：React 核心原理

优先级	文档	重点
🔴	Fiber 架构	数据结构、双缓冲、时间切片
🔴	虚拟 DOM 与 Diff 算法	三种 Diff 策略、key
🔴	Hooks 原理	链表结构、闭包陷阱
🔴	Reconciliation	协调算法、lastPlacedIndex
🟡	渲染流程	Render vs Commit 阶段
🟡	setState 批量更新	React 18 自动批处理

📝 每日练手

类型	题目	考点
🧮 算法	二叉树的层序遍历	BFS、队列
🧮 算法	二叉树的最大深度	递归
✍️ 手写	LRU 缓存	双向链表 + 哈希表

Day 9：React 高级 + 状态管理

优先级	文档	重点
🔴	React 性能优化	memo/useMemo/useCallback
🔴	状态管理方案	Redux vs Zustand vs Jotai
🟡	组件通信方案	Props、Context、状态提升
🟡	生命周期演变	16/17/18/19 变化
🟡	懒加载与代码分割	React.lazy、Suspense
🟡	列表渲染优化	key 原理、虚拟列表
🟡	合成事件	事件委托、原生事件区别

📝 每日练手

类型	题目	考点
🧮 算法	对称二叉树	镜像递归
🧮 算法	二叉树的右视图	BFS 层序
✍️ 手写	遍历二叉树	前/中/后序、Morris

Day 10：React 18/19 + 生态

优先级	文档	重点
🔴	React 18 新特性	Concurrent、useTransition
🔴	React 19 新特性	Compiler、Actions、use
🔴	Server Components 深入	RSC 原理、Server/Client 边界
🟡	Next.js 核心知识	App Router、SSR/SSG
🟡	React Router 原理	数据加载、路由守卫

📝 每日练手

类型	题目	考点
🧮 算法	从前序与中序遍历序列构造二叉树	递归分治
✍️ 手写	异步串行与并行	串行、并行、限流并行

Day 11：Vue 全覆盖

优先级	文档	重点
🔴	Vue 3 为什么使用 Proxy	Proxy vs defineProperty
🔴	Vue 3 响应式原理深入	ref/reactive、依赖收集
🔴	虚拟 DOM 与 Diff 算法	快速 Diff、与 React 对比
🟡	Composition API vs Options API	逻辑复用
🟡	Vue 2 vs Vue 3 对比	迁移策略
🟡	computed vs watch	三者区别
🟡	组件通信方式	props/emit、provide/inject
🟡	Vue 生命周期	Options vs Composition
🟡	Vue Router 原理	Hash/History、导航守卫
🟡	Vuex vs Pinia	状态管理对比
🟡	模板编译原理	Parse/Transform/Generate
🟢	keep-alive 原理	LRU 缓存
🟢	v-if vs v-show	条件渲染对比
🟢	v-for 中的 key	key 在 Diff 中的作用
🟢	script setup 语法	defineProps/defineEmits
🟢	Teleport 与 Suspense	内置组件
🟢	Vue 性能优化	虚拟列表、懒加载

📝 每日练手

类型	题目	考点
🧮 算法	无重复字符的最长子串	滑动窗口
✍️ 手写	数组扁平化 flat	递归、reduce、Generator

Day 12：构建工具全覆盖

优先级	文档	重点
🔴	Webpack 核心原理	构建流程、Loader、Plugin
🔴	Vite 原理与优势	No-Bundle、ESM、HMR
🔴	Tree Shaking	ESM 静态分析、sideEffects
🟡	代码分割与懒加载	splitChunks、动态导入
🟡	Webpack 性能优化	构建速度、产物体积
🟡	Webpack 迁移 Vite	迁移步骤、常见坑
🟡	Babel 原理	AST 转换、Polyfill 策略
🟡	esbuild 与 SWC	Go/Rust 构建工具
🟢	Loader 与 Plugin 开发	自定义 Loader/Plugin
🟢	Source Map	devtool、VLQ 编码
🟢	模块联邦	Host/Remote、微前端
🟢	Rollup 与库打包	ESM 打包、tsup
🟢	PostCSS 与 Autoprefixer	CSS 转换、browserslist
🟢	Rspack/Farm	Rust 构建工具

📝 每日练手

类型	题目	考点
🧮 算法	岛屿数量	DFS 洪水填充
✍️ 手写	重试机制 retry	指数退避、可取消

Day 13：工程化体系全覆盖

优先级	文档	重点
🔴	CI/CD 与自动化部署	GitHub Actions、部署策略
🔴	Monorepo 管理	pnpm workspace、Turborepo
🔴	前端监控与埋点	错误/性能监控、SDK 设计
🟡	代码规范与 Lint	ESLint + Prettier + Husky
🟡	微前端架构	qiankun、Module Federation
🟡	前端基础建设	脚手架、公共包、物料
🟡	前端测试策略	Jest/Vitest、E2E
🟡	Docker 与容器化	Dockerfile、多阶段构建
🟢	Git 工作流	Git Flow、Conventional Commits
🟢	组件库建设	Storybook、Design Token
🟢	环境管理与配置	dotenv、Feature Flags
🟢	Kubernetes 基础	K8s 核心概念、HPA

📝 每日练手

类型	题目	考点
🧮 算法	课程表	拓扑排序（类似依赖分析）
✍️ 手写	请求缓存	请求去重、TTL 缓存

Day 14：性能优化全覆盖

优先级	文档	重点
🔴	首屏优化	关键渲染路径、预加载
🔴	打包优化	代码分割、Tree Shaking
🔴	Web 性能指标与监控	Core Web Vitals
🟡	渲染优化	重排重绘、GPU 加速
🟡	长列表优化	react-window
🟡	SSR 与 SSG	方案选择
🟡	图片优化	WebP/AVIF、懒加载
🟡	内存优化	内存泄漏、WeakMap
🟡	常见性能问题与排查	DevTools 排查
🟢	大文件上传和下载	分片、断点续传
🟢	低网速下的白屏问题	骨架屏、SSR
🟢	动画性能优化	CSS 动画、WAAPI
🟢	Web Worker 优化	线程池、Transferable
🟢	字体优化	font-display、子集化
🟢	Lighthouse 性能审计	评分解读
🟢	性能预算	预算制定、监控

📝 每日练手

类型	题目	考点
🧮 算法	爬楼梯	DP 入门
🧮 算法	买卖股票的最佳时机	贪心
✍️ 手写	模板字符串解析	双大括号、嵌套属性

---

第 3 周：全栈基础 + 系统架构

知识文档：Node 17 + 系统设计 32 + 设计模式 14 + 网络 12 + 服务端 23 = 98 篇 每日练手：算法 8 题 + 手写 7 题

Day 15：Node.js 全覆盖

优先级	文档	重点
🔴	Node.js 基础	特点、V8、单线程非阻塞
🔴	Event Loop	libuv 六阶段、与浏览器差异
🟡	模块系统	CJS vs ESM、循环依赖
🟡	进程与线程	cluster、worker_threads
🟡	Express 与 Koa	中间件原理、洋葱模型
🟡	NestJS 框架深入	IoC、装饰器、Guard
🟡	Node.js 主流框架对比	Express/Koa/NestJS/Fastify
🟡	包管理器	npm/yarn/pnpm
🟢	Buffer 与 Stream	四种流、背压、pipe
🟢	文件系统	读写、Promise API
🟢	HTTP 模块	createServer、Keep-Alive
🟢	错误处理	异步错误、uncaughtException
🟢	调试与性能分析	inspect、profiling
🟢	Node.js 安全	SQL注入、XSS
🟢	数据库连接	连接池、ORM
🟢	部署与运维	PM2、Docker
🟢	Node.js 新特性	ESM、test runner

📝 每日练手

类型	题目	考点
🧮 算法	全排列	回溯
✍️ 手写	大数相加	字符串加法、BigInt

Day 16：系统设计 Part 1 —— SDK + 组件 + 基建

优先级	文档	重点
🔴	前端 SDK 通用架构设计	插件化、事件驱动
🔴	设计组件库	分层架构、Headless UI
🔴	前端 React 组件通用设计	Compound Components
🟡	设计 BFF 网关层	请求聚合、限流熔断
🟡	前端 CI/CD 部署系统	Pipeline、灰度发布
🟡	设计 SSR 框架与应用架构	Hydration、Streaming
🟡	设计前端沙箱隔离系统	Proxy 沙箱、CSS 隔离
🟡	设计前端灰度发布系统	Feature Flag、A/B 测试

📝 每日练手

类型	题目	考点
🧮 算法	最大子数组和	Kadane 算法
✍️ 手写	版本号比较	基础比较、版本范围

Day 17：系统设计 Part 2 —— 复杂系统

优先级	文档	重点
🔴	设计知识库系统	文档管理、全文搜索
🔴	设计实时通讯系统	WebSocket、消息投递
🔴	设计权限管理系统	RBAC、动态路由
🟡	设计在线协同编辑系统	OT、CRDT、Yjs
🟡	设计低代码/可视化搭建平台	Schema 驱动、拖拽
🟡	设计表单引擎	Schema 驱动、联动
🟡	设计富文本编辑器	Slate.js、ProseMirror
🟡	设计在线表格系统	Canvas 渲染、公式引擎
🟡	设计单点登录系统	CAS、OAuth 2.0、PKCE

📝 每日练手

类型	题目	考点
🧮 算法	零钱兑换	完全背包 DP
✍️ 手写	解析 URL 参数	query string、URLSearchParams

Day 18：系统设计 Part 3 —— 业务系统

优先级	文档	重点
🟡	设计前端埋点监控系统	错误监控、SDK
🟡	设计大文件上传系统	分片、断点续传
🟡	设计 Feed 信息流系统	无限滚动、推拉模型
🟡	设计搜索自动补全系统	Trie、防抖
🟡	设计 AI Agent 的前端架构	流式渲染、工具调用
🟢	设计直播弹幕系统	Canvas、消息队列
🟢	设计多语言管理系统	i18n、翻译管理
🟢	设计扫码登录系统	状态机、WebSocket

📝 每日练手

类型	题目	考点
🧮 算法	最长递增子序列	DP + 二分
✍️ 手写	手写 reduce	reduce/reduceRight

Day 19：系统设计 Part 4 + 设计模式

系统设计剩余（8 篇）：

优先级	文档	重点
🟢	设计视频播放器 SDK	HLS、插件化
🟢	设计在线图片编辑器	Canvas、Fabric.js
🟢	设计图片处理 CDN 服务	Sharp、CDN 缓存
🟢	设计秒杀系统的前端	高并发、降级
🟢	设计移动端上拉加载下拉刷新	Touch 手势
🟢	设计 H5 海报生成系统	html2canvas
🟢	设计文件预览系统	PDF.js、水印
🟢	Web3 钱包连接方案	EIP-1193

设计模式（14 篇）：

优先级	文档	重点
🔴	观察者模式与发布订阅模式	两者区别
🟡	单例模式	懒汉饿汉、应用场景
🟡	策略模式	消除 if-else
🟡	代理模式	ES6 Proxy、缓存代理
🟡	工厂模式	简单/抽象工厂
🟡	装饰器模式	HOC、TS 装饰器
🟢	适配器模式	接口转换
🟢	迭代器模式	迭代协议
🟢	状态模式	状态机
🟢	命令模式	撤销重做
🟢	组合模式	树形结构
🟢	模板方法模式	算法骨架
🟢	中介者模式	解耦交互
🟢	享元模式	对象池

📝 每日练手

类型	题目	考点
🧮 算法	LRU 缓存	哈希 + 双向链表
🧮 算法	数组中的第 K 个最大元素	快速选择
✍️ 手写	手写 map 和 filter	map/filter/forEach

Day 20：计算机网络全覆盖

优先级	文档	重点
🔴	HTTP/HTTPS 协议	状态码、Headers、TLS
🔴	TCP 与 UDP	三次握手、四次挥手
🔴	HTTP/2 与 HTTP/3	多路复用、QUIC
🟡	DNS 域名解析	解析过程、前端优化
🟡	Cookie 与 Session	安全属性、分布式
🟡	JWT 认证	结构、刷新机制
🟡	RESTful API 设计	幂等性、版本控制
🟡	网络安全	HTTPS、中间人攻击
🟢	CDN 原理	边缘节点、缓存策略
🟢	网络模型	OSI 七层、TCP/IP 四层
🟢	代理与负载均衡	正向/反向代理、Nginx
🟢	GraphQL	与 REST 对比

📝 每日练手

类型	题目	考点
🧮 算法	搜索旋转排序数组	二分查找变体
✍️ 手写	红绿灯	async/await、状态机

Day 21：服务端全覆盖

优先级	文档	重点
🔴	Nginx 配置与部署	反向代理、负载均衡
🔴	认证鉴权体系	JWT、OAuth 2.0、RBAC
🟡	微服务基础	服务拆分、API 网关
🟡	服务端缓存策略	Redis、穿透/击穿/雪崩
🟡	限流与熔断	令牌桶、熔断器
🟡	分布式系统基础	CAP、分布式锁
🟡	API 设计与文档	OpenAPI、版本控制
🟡	Serverless 与边缘计算	函数计算、冷启动
🟢	Linux 常用命令	文件操作、进程管理
🟢	消息队列	Kafka、异步解耦
🟢	日志与监控体系	ELK、Prometheus
🟢	服务端性能优化	数据库优化、连接池
🟢	WebSocket 服务端	Socket.IO、集群
🟢	gRPC 与 RPC	Protocol Buffers
🟢	GraphQL 服务端	Schema、DataLoader
🟢	容器与编排基础	Docker、K8s
🟢	服务端安全	SSRF、密钥管理
🟢	文件存储与 OSS	对象存储、CDN
🟢	定时任务与后台作业	Cron、Bull Queue
🟢	邮件与通知服务	邮件、推送
🟢	Webhook 设计与实现	签名验证、重试
🟢	健康检查与优雅停机	探针、零停机
🟢	配置中心与密钥管理	Vault、动态配置

📝 每日练手

类型	题目	考点
🧮 算法	螺旋矩阵	边界收缩模拟
✍️ 手写	sleep 函数	可取消、AbortController

---

第 4 周：扩展领域 + 场景实战 + 模拟面试

知识文档：数据库 22 + 编译 3 + 跨端 7 + Wasm 2 + AI 19 + 场景 44 + 开放 28 = 125 篇 每日练手：算法 5 题 + 手写 4 题 + 复习巩固

Day 22：数据库 + 编译原理

数据库（22 篇）：

优先级	文档	重点
🟡	SQL vs NoSQL	选型依据
🟡	数据库索引原理	B+ 树、最左前缀
🟡	事务与并发控制	ACID、隔离级别
🟡	Redis 基础	数据结构、持久化、分布式锁
🟡	ORM 框架对比	TypeORM/Prisma/Drizzle
🟢	MySQL 基础与查询	JOIN、子查询
🟢	MongoDB 基础	文档模型、聚合
🟢	数据库设计与范式	三范式、ER 模型
🟢	SQL 查询优化	EXPLAIN、索引优化
🟢	PostgreSQL 特性	JSONB、CTE
🟢	数据库高可用	主从复制
🟢	数据库迁移与版本管理	Migration 工具
🟢	数据库安全	SQL 注入防御
🟢	缓存与数据库一致性	Cache Aside
🟢	分布式事务	2PC、Saga
🟢	向量数据库	Embedding、RAG
🟢	数据建模实战	电商/社交模型
🟢	数据库连接与连接池	配置优化
🟢	搜索引擎	Elasticsearch
🟢	时序数据库与日志存储	InfluxDB
🟢	数据备份与恢复	备份策略
🟢	SQLite 与嵌入式数据库	Turso、D1

编译原理（3 篇）：

优先级	文档	重点
🟡	编译原理基础	编译流程、AST
🟢	AST 实战应用	Babel 插件、ESLint
🟢	手写简易编译器	JSON Parser

📝 每日练手

类型	题目	考点
🧮 算法	最长回文子串	中心扩展
✍️ 手写	带过期时间的 localStorage	TTL 缓存

Day 23：跨端开发 + WebAssembly + AI Part 1

跨端开发（7 篇）：

优先级	文档	重点
🟡	跨端方案对比与选型	选型决策框架
🟢	PWA 渐进式 Web 应用	Service Worker
🟢	React Native 基础与原理	新架构、JSI
🟢	Flutter 基础与原理	三棵树、Dart
🟢	小程序原理与跨端框架	双线程、Taro
🟢	Electron 桌面开发	IPC、安全
🟢	Tauri 桌面开发	Rust、WebView

WebAssembly（2 篇）：

优先级	文档	重点
🟢	WebAssembly 基础	概念、与 JS 交互
🟢	Wasm 实战应用	FFmpeg.wasm

AI Part 1（10 篇）：

优先级	文档	重点
🔴	AI 基础与大语言模型	LLM 原理、Token
🟡	前端接入大模型 API	SSE、Function Calling
🟡	流式渲染与 Markdown	ReadableStream
🟡	Prompt 工程	Few-shot、CoT
🟡	AI SDK 与工具库	Vercel AI SDK
🟡	AI 辅助开发	工具选型、Rules
🟢	RAG 检索增强生成	向量数据库、分块
🟢	Function Calling 与 Agent	Agent 核心循环
🟢	MCP 协议	Tools/Resources/Prompts
🟢	AI 聊天界面设计	消息模型、自动滚动

📝 每日练手

类型	题目	考点
🧮 算法	扁平化嵌套数组与对象	递归、迭代
🧮 算法	DOM 树的最近公共祖先	路径比较
✍️ 手写	字符串字符分组排序	频次排序

Day 24：AI Part 2 + 场景题 Part 1（性能排查 + 线上故障）

AI Part 2（9 篇）：

优先级	文档	重点
🟢	AI 应用性能优化	TTFT、缓存
🟢	AI 应用安全	Prompt 注入防御
🟢	多模态 AI 应用	Vision、语音
🟢	浏览器端 AI	WebLLM、WebGPU
🟢	生成式 UI	streamUI
🟢	AI 生成服务端	Supabase
🟢	AI 数据可视化	NL2Chart
🟢	向量搜索与 Embedding	余弦相似度
🟢	AI 全流程研发实战	需求到部署

场景题 Part 1 —— 性能排查 + 线上故障（15 篇）：

优先级	文档	重点
🔴	页面加载慢排查	Navigation Timing
🔴	内存泄漏排查	Heap Snapshot
🔴	线上故障应急	止血→定位→修复→复盘
🟡	运行时卡顿排查	Long Task、时间切片
🟡	首屏白屏排查	ErrorBoundary
🟡	移动端性能排查	远程调试
🟡	打包产物分析	bundle-analyzer
🟡	CDN 资源容灾	多 CDN 切换
🟡	缓存版本不一致	SW 更新
🟡	偶现 Bug 排查	竞态条件
🟢	第三方依赖安全漏洞	npm audit
🟢	部署后样式/功能异常	环境变量
🟢	资源加载失败处理	CDN 切换
🟢	异常数据防御性编程	Zod 校验
🟢	XSS/CSRF 漏洞修复实战	DOMPurify、CSP

📝 每日练手

类型	题目	考点
🧮 算法	JSON 深度比较与 Diff	deepEqual、递归比较
🧮 算法	实现简易 JSON.parse	递归下降解析
✍️ 手写	两个数组的交集	Set、Map 计数

Day 25：场景题 Part 2 —— 交互方案

优先级	文档	重点
🔴	Token 无感刷新	Axios 拦截器、双 Token
🔴	接口竞态处理	AbortController
🟡	复杂表单设计与优化	React Hook Form
🟡	实时搜索与自动补全	防抖、高亮
🟡	无限滚动与分页	IntersectionObserver
🟡	拖拽排序	@dnd-kit
🟡	多标签页通信与数据同步	BroadcastChannel
🟡	水印实现与防篡改	MutationObserver
🟡	前端导出 Excel/PDF	SheetJS、jsPDF
🟢	倒计时精度与服务端时间同步	drift 补偿
🟢	前端容错与降级策略	ErrorBoundary
🟢	请求重试与超时策略	指数退避
🟢	断线重连与离线处理	WebSocket 重连
🟢	敏感数据安全处理	数据脱敏
🟢	前端鉴权方案选型	JWT vs Session

📝 每日练手

类型	题目	考点
✍️ 手写	判断 DOM 祖先节点	contains、最近公共祖先

所有新题已分配完毕，从明天起进入复习巩固阶段。

Day 26：场景题 Part 3 —— 工程实践

优先级	文档	重点
🔴	前端技术选型方法论	评估维度
🟡	接手遗留项目重构策略	绞杀者模式
🟡	技术栈升级迁移	Vue2→3、Webpack→Vite
🟡	前端质量保障体系	测试金字塔
🟡	发布与回滚策略	灰度、CDN 回切
🟡	技术方案设计与评审	方案文档模板
🟢	代码规范如何落地	渐进推行
🟢	前后端高效协作	API First
🟢	需求排期与风险管理	工时评估
🟢	技术债务管理	优先级矩阵
🟢	移动端常见兼容问题	软键盘、滚动穿透
🟢	跨浏览器兼容处理	特性检测
🟢	微信/WebView 环境兼容	JSBridge
🟢	响应式适配实践	容器查询

📝 每日练手（复习）

回顾 Day 1-7 的算法和手写题，重写做错或不熟的题目：

• 重写：Promise、深拷贝、两数之和、反转链表
• 限时：每题 10 分钟内完成

Day 27：开放题 Part 1（高频重点）

行为面试（Behavioral Interview）

资深面试 30%+ 的时间考察软技能。每道开放题都用 STAR 法则准备结构化回答。

优先级	文档	重点
🔴	你做过最有挑战的技术难题	STAR 法则
🔴	你在项目中遇到的最难解决的 Bug	Bug 排查方法论
🔴	你做过最有成就感的项目	量化成果
🔴	如何做技术方案对比	决策矩阵
🔴	如何推动团队采用新技术	试点→推广
🔴	如何理解前端工程化	四大支柱
🔴	如何理解前端架构	分层模型
🟡	如何带领前端团队	技术规划
🟡	如何做好 Code Review	关注点、流程
🟡	如何看待 AI 对前端的影响	能力转型
🟡	前端工程师的职业发展路线	技术线/管理线
🟡	如何衡量前端代码质量	度量指标
🟡	前端未来 3-5 年的趋势	AI 原生
🟡	如何做技术规划	OKR 设定
🟡	如何从业务角度思考技术方案	ROI 评估

📝 每日练手（复习）

回顾 Day 8-14 的算法和手写题，重写做错或不熟的题目：

• 重写：EventEmitter、LRU 缓存、二叉树遍历
• 限时：每题 10 分钟内完成

Day 28：开放题 Part 2 + 手写高频速刷

开放题 Part 2（14 篇）：

优先级	文档	重点
🟡	如何在有限时间内交付高质量代码	取舍原则
🟡	如果让你重构现有项目	渐进式迁移
🟡	如何看待微前端	适用场景
🟡	如何看待前端框架之争	技术选型
🟢	如何持续学习前端技术	学习体系
🟢	如何做技术分享	选题、演讲
🟢	如何培养和指导初中级工程师	分层培养
🟢	如何建设技术文档体系	ADR
🟢	如何做好跨部门技术协作	联调效率
🟢	如何平衡创新和稳定性	Feature Flag
🟢	你对前端边界扩展的看法	BFF、Serverless
🟢	如何建设工程师文化	Hackathon
🟢	如何评估和引入开源方案	选型标准
🟢	如何处理技术方案的分歧	Disagree and Commit

📝 每日练手（复习）

手写高频 5 题限时速刷（每题 8 分钟）：

1. 手写 Promise（含 then 链）
2. 深拷贝（含循环引用）
3. 防抖节流
4. EventEmitter
5. Promise.all

Day 29：全面复盘 + 查漏补缺

上午：薄弱领域专项复习

回顾 30 天的学习笔记，找出薄弱环节重点突破：

• 翻阅之前标记的"不熟"或"做错"的题目
• 重新阅读对应文档的核心部分

下午：高频算法速写

从 34 道算法题中选出 10 道高频题限时默写：

题目	限时
两数之和	5 min
反转链表	5 min
有效的括号	5 min
无重复字符最长子串	8 min
二叉树层序遍历	8 min
LRU 缓存	10 min
全排列	8 min
接雨水	10 min
爬楼梯	5 min
三数之和	8 min

晚上：自我介绍 + 项目话术

• 打磨 2 分钟自我介绍
• 3 个核心项目 STAR 话术过一遍
• 准备反问问题

Day 30：模拟面试 + 最终 Checklist

上午：模拟面试（3 轮）

一面模拟（基础 + 编码，45 min）：

1. 自我介绍（2 分钟）
2. JS 基础 2 题（10 分钟）
3. 框架原理 2 题（10 分钟）
4. 手写代码 1 题（15 分钟）
5. 项目深挖（10 分钟）

二面模拟（深度 + 设计，45 min）：

1. 项目深挖 —— 一个项目从头到尾（20 分钟）
2. 系统设计题（15 分钟）
3. 场景题 / 开放题（10 分钟）

终面模拟（软技能，30 min）：

1. 职业规划、为什么换工作
2. 团队协作、冲突处理
3. 技术视野和判断力

下午：最终 Checklist

• 自我介绍打磨到 2 分钟，流畅自然
• 3 个核心项目各能讲 10 分钟，经得起深挖
• 手写 Promise、深拷贝、防抖节流、EventEmitter 闭眼能写
• React Fiber / Vue 响应式原理，能画图讲清楚
• 至少准备 2 个系统设计方案（可画架构图）
• 算法 34 题思路清晰，核心 20 题能默写
• 5 个开放题有 STAR 结构化回答
• 准备好反问问题（团队技术栈、业务方向、技术文化）

---

每日练手分配总览

算法题分配（34 题 → Day 1-24）

日期	题目	考点
Day 1	两数之和、有效的括号	哈希表、栈
Day 2	反转链表、合并两个有序链表	链表
Day 3	移动零、最小栈	双指针、栈
Day 4	三数之和	排序 + 双指针
Day 5	字符串相加、千分位格式化	字符串
Day 6	合并区间	排序 + 贪心
Day 7	接雨水	双指针 / 单调栈
Day 8	二叉树层序遍历、最大深度	BFS、递归
Day 9	对称二叉树、二叉树右视图	镜像、BFS
Day 10	前序+中序构造二叉树	递归分治
Day 11	无重复字符最长子串	滑动窗口
Day 12	岛屿数量	DFS
Day 13	课程表	拓扑排序
Day 14	爬楼梯、买卖股票	DP、贪心
Day 15	全排列	回溯
Day 16	最大子数组和	Kadane
Day 17	零钱兑换	完全背包 DP
Day 18	最长递增子序列	DP + 二分
Day 19	LRU 缓存、第 K 大元素	设计、快选
Day 20	搜索旋转排序数组	二分变体
Day 21	螺旋矩阵	模拟
Day 22	最长回文子串	中心扩展
Day 23	扁平化嵌套结构、DOM LCA	递归
Day 24	JSON Diff、简易 JSON.parse	递归比较/解析

手写题分配（25 题 → Day 1-25）

日期	题目	考点
Day 1	手写 Promise	Promises/A+ 规范
Day 2	深拷贝与浅拷贝	循环引用、WeakMap
Day 3	手写 EventEmitter	发布订阅、泛型
Day 4	手写 Promise 静态方法	all/race/allSettled/any
Day 5	手写 new/instanceof/typeof	原型链遍历
Day 6	手写柯里化 curry	占位符、类型安全
Day 7	限流调度器	并发控制、优先级
Day 8	LRU 缓存	双向链表 + 哈希表
Day 9	遍历二叉树	前/中/后序、Morris
Day 10	异步串行与并行	限流并行、管道
Day 11	数组扁平化 flat	递归、reduce
Day 12	重试机制 retry	指数退避、可取消
Day 13	请求缓存	请求去重、TTL
Day 14	模板字符串解析	双大括号、过滤器
Day 15	大数相加	字符串加法、BigInt
Day 16	版本号比较	版本范围
Day 17	解析 URL 参数	query string
Day 18	手写 reduce	reduce/reduceRight
Day 19	手写 map 和 filter	map/filter/forEach
Day 20	红绿灯	async/await、状态机
Day 21	sleep 函数	可取消、AbortController
Day 22	带过期时间的 localStorage	TTL 缓存
Day 23	字符串字符分组排序	频次排序
Day 24	两个数组的交集	Set、Map 计数
Day 25	判断 DOM 祖先节点	contains、LCA

---

文档覆盖统计

分类	总数	安排日期
算法基础	6	Day 1
JavaScript	18	Day 1-2
TypeScript	16	Day 3
CSS	18	Day 4
HTML	6	Day 5
浏览器	16	Day 5-6
项目经验	24	Day 7
React	18	Day 8-10
Vue	17	Day 11
构建工具	14	Day 12
前端工程化	12	Day 13
性能优化	16	Day 14
Node.js	17	Day 15
系统架构	32	Day 16-19
设计模式	14	Day 19
计算机网络	12	Day 20
服务端	23	Day 21
数据库	22	Day 22
编译原理	3	Day 22
跨端开发	7	Day 23
WebAssembly	2	Day 23
AI	19	Day 23-24
场景题	44	Day 24-26
开放题	28	Day 27-28
算法题	34	Day 1-24（每日练手）
手写代码	25	Day 1-25（每日练手）
合计	463	30 天全覆盖

---

面试当天 Checklist

• 回顾自我介绍和核心项目要点
• 手写题热手（写一道 Promise 或深拷贝）
• 检查网络、摄像头、麦克风（远程面试）
• 准备纸笔（现场面试）或在线编辑器（远程面试）
• 准备 2-3 个反问问题
• 心态调整：面试是双向选择，展示真实水平就好

面试表达的黄金法则

1. 先总后分：先给结论，再展开细节
2. 有深有浅：核心点深入讲，非核心点一句带过
3. 有理有据：观点 + 原因 + 例子
4. 主动引导：把话题引向你擅长的领域
5. 坦诚不装：不会的坦诚说不会，但可以说你的思考方向