前端面试知识库 📚

系统化的高级前端面试准备指南，涵盖 JavaScript、React、Vue、Node.js、工程化等核心领域

知识模块

模块	核心主题	难度
JavaScript	类型 / 闭包 / 原型 / 异步 / V8	⭐⭐⭐
TypeScript	泛型 / 类型体操	⭐⭐⭐
CSS	布局 / 动画 / 响应式 / 工程化	⭐⭐
Browser	渲染 / 缓存 / 安全 / Web API	⭐⭐⭐
React	Fiber / Hooks / 并发 / SSR	⭐⭐⭐⭐
Vue	响应式 / Diff / 编译 / Pinia	⭐⭐⭐⭐
Node.js	事件循环 / 流 / 集群 / 性能	⭐⭐⭐⭐
HTTP	协议 / HTTPS / HTTP2 / GraphQL / Web 安全	⭐⭐⭐
Engineering	Webpack / Vite / 微前端 / Wasm	⭐⭐⭐
Testing	单元测试 / 组件测试 / E2E	⭐⭐⭐
Algorithms	排序 / DP / 图 / 高频题型	⭐⭐⭐⭐
NestJS	模块化 / DI / 中间件 / 数据库	⭐⭐⭐⭐
Electron	进程模型 / IPC / 安全 / 打包	⭐⭐⭐
VSCode Extension	激活机制 / API / 发布	⭐⭐⭐
AI Engineering	Agent / RAG / 工具调用 / 评估	⭐⭐⭐⭐⭐
Management	危机处理 / 协作 / 项目管理	⭐⭐⭐
HR 面试	离职原因 / 抗压 / 价值观 🆕	⭐⭐⭐
Docker	镜像 / 容器 / Compose / 网络	⭐⭐⭐
Functional Programming	纯函数 / 柯里化 / 函子 / Monad	⭐⭐⭐

目录结构

front-end/
├── javascript/         # JavaScript 核心
│   ├── 01-core-*.md    # 类型系统
│   ├── 02-core-*.md    # 作用域、闭包
│   ├── 03-core-*.md    # 原型链
│   ├── 04-core-*.md    # 异步编程
│   ├── 05-core-*.md    # ES6+
│   ├── 06-deep-*.md    # V8 引擎
│   ├── 07-deep-*.md    # 内存与 GC
│   ├── 08-practice-*.md # 设计模式
│   └── examples/
│
├── typescript/         # TypeScript 专题
│   ├── 01-core-*.md    # 基础类型
│   ├── 02-core-*.md    # 泛型
│   ├── 03-deep-*.md    # 类型体操
│   └── examples/
│
├── css/                # CSS 布局与动画
│   ├── 01-core-*.md    # 布局
│   ├── 02-core-*.md    # 响应式
│   ├── 03-deep-*.md    # 动画与性能
│   ├── 04-practice-*.md # CSS 工程化
│   ├── 05-practice-*.md # 多主题方案 🆕
│   └── examples/
│
├── browser/            # 浏览器原理
│   ├── 01-core-*.md    # 渲染流程与重排重绘
│   ├── 02-core-*.md    # 缓存策略
│   ├── 03-core-*.md    # 安全
│   ├── 04-deep-*.md    # 性能优化
│   ├── 05-core-*.md    # Web Storage
│   ├── 06-core-*.md    # Web Worker
│   ├── 07-deep-*.md    # Service Worker
│   ├── 08-practice-*.md # 观察者 API
│   ├── 09-deep-*.md    # Canvas 绘图与动画 🆕
│   ├── 10-practice-*.md # 浏览器插件开发 🆕
│   └── examples/
│
├── react/              # React 生态
│   ├── 01-core-*.md    # Fiber、Diff
│   ├── 02-core-*.md    # Hooks
│   ├── 03-deep-*.md    # Scheduler
│   ├── 04-deep-*.md    # Concurrent
│   ├── 05-deep-*.md    # SSR、RSC
│   ├── 06-practice-*.md # 状态管理
│   ├── 07-practice-*.md # Headless UI 🆕
│   └── examples/
│
├── vue/                # Vue 生态
│   ├── 01-core-*.md    # 响应式系统
│   ├── 02-core-*.md    # 虚拟 DOM
│   ├── 03-deep-*.md    # 编译器
│   ├── 04-deep-*.md    # Composition API
│   ├── 05-practice-*.md # Pinia 状态管理
│   └── examples/
│
├── nodejs/             # Node.js 服务端
│   ├── 01-core-*.md    # 事件循环
│   ├── 02-core-*.md    # 流、Buffer
│   ├── 03-core-*.md    # 模块系统
│   ├── 04-core-*.md    # 中间件
│   ├── 05-deep-*.md    # 集群
│   ├── 06-deep-*.md    # 内存管理
│   ├── 07-deep-*.md    # 性能优化
│   ├── 08-practice-*.md # 安全
│   ├── 09-practice-*.md # 优雅退出
│   ├── 10-practice-*.md # 分布式锁
│   ├── 11-practice-*.md # 原生插件
│   ├── 12-practice-*.md # MySQL 数据库 🆕
│   ├── 13-deep-*.md    # 稳定性方案 🆕
│   └── examples/
│
├── http/               # 网络协议
│   ├── 01-core-*.md    # HTTP、HTTPS、TCP/IP
│   ├── 02-core-*.md    # HTTPS、TLS
│   ├── 03-core-*.md    # TCP、DNS
│   ├── 04-practice-*.md # 请求层封装
│   ├── 05-practice-*.md # 代理、CORS
│   ├── 06-practice-*.md # SSE、Streaming、文件传输
│   ├── 07-practice-*.md # 文件传输
│   ├── 09-security-*.md # XSS、CSRF
│   ├── 10-security-*.md # 中间人攻击
│   ├── 11-security-*.md # API 安全
│   ├── 12-optimize-*.md # 缓存优化
│   ├── 14-debug-*.md   # 网络调试
│   ├── 16-deep-*.md    # HTTP2
│   ├── 17-deep-*.md    # HTTP3、QUIC
│   ├── 18-deep-*.md    # WebSocket
│   ├── 19-practice-*.md # GraphQL
│   └── examples/
│
├── engineering/        # 前端工程化
│   ├── 01-core-*.md    # Webpack/Vite 打包器
│   ├── 02-core-*.md    # Babel 转译
│   ├── 03-practice-*.md # Monorepo
│   ├── 04-practice-*.md # CI/CD
│   ├── 05-deep-*.md    # 微前端
│   ├── 06-deep-*.md    # WebAssembly
│   ├── 07-practice-*.md # 国际化 (i18n) 🆕
│   ├── 08-practice-*.md # 组件库方案 🆕
│   ├── 09-practice-*.md # 错误监控 🆕
│   └── examples/
│
├── testing/            # 前端测试
│   ├── 01-core-*.md    # 单元测试
│   ├── 02-core-*.md    # 组件测试
│   ├── 03-deep-*.md    # E2E 测试
│   ├── 04-practice-*.md # TDD 与测试策略
│   └── examples/
│
├── algorithms/         # 数据结构与算法
│   ├── 01-linked-list.md # 链表
│   ├── 02-binary-tree.md # 二叉树
│   ├── 03-array-string.md # 数组、字符串
│   ├── 04-dynamic-programming.md # 动态规划
│   ├── 05-graph.md    # 图算法
│   ├── 06-sorting.md  # 排序算法
│   ├── 07-frontend-handwriting.md # 前端手写题
│   └── examples/
│
├── nestjs/             # NestJS 框架 🆕
│   ├── 01-core-*.md    # 架构、依赖注入、装饰器
│   ├── 02-core-*.md    # 中间件、守卫、拦截器
│   └── 03-practice-*.md # 数据库集成
│
├── ai/                   # AI 工程 🆕
│   ├── 01-core-*.md    # LLM 原理
│   ├── 02-core-*.md    # Prompt 模式
│   ├── 03-core-*.md    # 工具调用
│   ├── 04-deep-*.md    # Agent 架构
│   ├── 05-deep-*.md    # Workflow 编排
│   ├── 06-deep-*.md    # RAG、记忆
│   ├── 07-deep-*.md    # 多模态
│   ├── 08-practice-*.md # 评估
│   ├── 09-practice-*.md # Cursor 实现分析
│   ├── 10-practice-*.md # Claude Code 分析
│   ├── 11-practice-*.md # Manus Agent 分析
│   ├── 12-practice-*.md # Claude Skills
│   ├── 13-deep-*.md    # Agent 协议 (MCP & A2A)
│   └── examples/
│
├── electron/           # Electron 桌面应用 🆕
│   ├── 01-core-*.md    # 进程模型、IPC、Preload
│   ├── 02-deep-*.md    # 安全实践
│   └── 03-practice-*.md # 打包与分发
│
├── vscode-extension/   # VSCode 插件开发 🆕
│   ├── 01-core-*.md    # 架构、激活机制、命令、配置
│   ├── 02-core-*.md    # API、Workspace、TreeView、Webview
│   └── 03-practice-*.md # 开发、调试、测试、发布
│
├── management/           # 技术管理与软技能
│   ├── 01-practice-*.md  # 危机处理（线上故障、紧急 Bug）
│   ├── 02-practice-*.md  # 团队协作（投诉、跨团队沟通）
│   ├── 03-practice-*.md  # 项目管理（延期、资源调配）
│   ├── 04-practice-*.md  # 技术决策（选型、架构、技术债）
│   └── 05-practice-*.md  # 成长带人（新人培养、绩效沟通）
│
└── hr/                   # HR 面试通关指南 🆕
    ├── 01-core-*.md      # HR 评估的底层逻辑
    ├── 02-practice-*.md  # 7 类高频问题与高分回答
    └── 03-practice-*.md  # 扣分点与加分技巧

学习路径

基础巩固 (1-2 周)

1. JavaScript 基础 (01-05)
2. CSS 布局
3. 浏览器渲染与缓存

框架深入 (2-3 周)

1. React Fiber & Hooks
2. Vue 响应式与 Composition API
3. Node.js 核心

工程实践 (1-2 周)

1. TypeScript 类型系统
2. 构建工具与微前端
3. 测试策略与 CI/CD

算法刷题 (持续)

1. 掌握高频题型模式
2. LeetCode Hot 100

软技能提升 (面试前突击)

1. 危机处理与团队协作情景题
2. 项目管理与技术决策情景题
3. 带人与成长相关情景题

HR 面准备 (面试前 1-2 天)

1. 熟读 HR 评估的底层逻辑
2. 准备 7 类高频问题的个人版回答
3. 避开扣分雷区，准备高质量反问

特色内容

• 🔥 面试高频: 每个文档都包含高频面试题
• 💻 代码示例: examples 目录包含可运行代码
• 📊 对比表格: 清晰的概念对比
• ⭐ 难度标识: 帮助规划学习优先级

快速导航

JavaScript 核心

• 数据类型与类型检测
• 异步编程 (Event Loop/Promise)
• 设计模式

React & Vue

• Fiber 架构与 Diff 算法
• Hooks 原理
• Vue 响应式系统
• Composition API

网络与性能

• 浏览器缓存策略
• 前端性能优化
• SSE 与 LLM 打字机效果
• Web 安全

工程化与测试

• 微前端架构
• 单元测试 (Jest/Vitest)
• E2E 测试 (Playwright)

新增内容 🆕

• CSS 多主题方案
• Canvas 绘图与动画
• 国际化 (i18n)
• 组件库方案
• 错误收集与监控
• Headless UI
• Node.js 稳定性方案
• Koa 框架
• Express 框架
• Redis 缓存
• MongoDB 数据库
• RabbitMQ 消息队列
• Kafka 消息队列

容器化与架构 🆕

• Docker 基础与容器化
• Docker Compose 编排
• 函数式编程核心概念
• 函子与 Monad

跨平台开发 🆕

• NestJS 核心架构
• Electron 进程与通信
• VSCode 插件开发
• 浏览器插件开发
• AI Agent 架构 🆕
• Agent 协议 (MCP & A2A) 🆕
• Cursor 实现分析 🆕

技术管理与软技能

• 危机处理（线上故障、紧急 Bug）
• 团队协作（被投诉、跨团队沟通）
• 项目管理（延期、资源调配）
• 技术决策（选型、架构、技术债）
• 成长带人（新人培养、绩效沟通）

HR 面试通关 🆕

• HR 评估的底层逻辑
• 7 类高频问题与高分回答
• 扣分点与加分技巧

---

持续更新中 | 欢迎 Star ⭐ | GitHub