1468 字
7 分钟
前端面试宝典总览:6 年中高级工程师面试知识地图
NOTE

本系列专为 6 年左右中高级前端开发工程师 打造,覆盖面试高频知识点,每篇 20+ 道面试题配详细解析。

面试知识地图#

前端面试知识体系
├── 基础三剑客
│ ├── HTML & CSS(布局、选择器、响应式、动画)
│ ├── JavaScript 核心(原型链、闭包、this、ES6+)
│ └── JS 异步编程(事件循环、Promise、async/await)
├── 框架与跨端
│ ├── Vue(响应式原理、生命周期、组件通信、Vuex/Pinia)
│ ├── React(Fiber、Hooks、虚拟DOM、状态管理)
│ └── 跨端开发(uniapp、React Native、原理与差异)
├── 工程化与网络
│ ├── 构建工具(Webpack、Vite、Tree Shaking、HMR)
│ ├── 网络与 HTTP(TCP/IP、HTTP/2、缓存、跨域、安全)
│ ├── 工程化实践(Monorepo、微前端、组件库、CI/CD)
│ └── 实时通信(WebSocket、SSE、WebRTC、协同编辑)
├── 后端知识
│ ├── Nginx(反向代理、负载均衡、配置优化)
│ ├── MySQL(索引、事务、SQL 优化、锁机制)
│ ├── 后端基础(RESTful、Node.js、Java 基础)
│ └── Node.js 专篇(事件循环、Stream、进程线程、框架、部署)
├── 进阶必修
│ ├── TypeScript(泛型、条件类型、infer、类型体操)
│ ├── 性能优化(LCP/INP/CLS、白屏、内存泄漏)
│ ├── 手写代码(防抖节流、深拷贝、Promise、并发控制)
│ └── 系统设计(大文件上传、权限、监控、低代码)
├── 综合面试
│ └── 软素质与 HR 面(项目介绍、STAR、职业规划、薪资)
└── 深水区实战(资深扩展)
├── 核心能力问答(双栈选型、图形渲染、Hybrid、AI 研发 24 问)
└── 深水区实战(配置驱动、2D×3D、硬件链路、离线包、AI 协作流)

文章索引#

基础三剑客#

序号文章核心考点
01HTML & CSS 面试题语义化、盒模型、BFC、Flex/Grid、响应式
02JavaScript 核心面试题原型链、闭包、this、作用域、ES6+
03JS 异步与事件循环Event Loop、Promise、async/await、宏微任务

框架与跨端#

序号文章核心考点
04Vue 框架面试题响应式原理、虚拟DOM、Diff算法、生命周期
05React 框架面试题Fiber、Hooks、JSX、状态管理、性能优化
06跨端框架面试题uniapp、RN、Flutter、跨端原理

工程化与网络#

序号文章核心考点
07前端构建工具面试题Webpack、Vite、Babel、Tree Shaking
08网络与 HTTP 面试题TCP/IP、HTTP/2、HTTPS、缓存、跨域
15前端工程化实践Monorepo、微前端、组件库、npm 发包、CI/CD
16实时通信面试题WebSocket、SSE、WebRTC、协同编辑、弹幕

后端知识#

序号文章核心考点
09Nginx 面试题反向代理、负载均衡、配置优化
10MySQL 面试题索引、事务、SQL优化、锁机制
11后端知识面试题RESTful、Node.js、Java基础、微服务
19Node.js 面试题专篇事件循环、Stream、进程线程、Express/Koa/NestJS、部署

进阶必修#

序号文章核心考点
12TypeScript 进阶面试题泛型、条件类型、infer、映射类型、协变逆变
13性能优化面试题LCP/INP/CLS、白屏优化、虚拟列表、内存泄漏
14手写代码题专篇防抖节流、深拷贝、Promise.all、并发控制、发布订阅
17前端系统设计场景题大文件上传、权限系统、监控、低代码、JSBridge

综合面试#

序号文章核心考点
18软素质与 HR 面自我介绍、STAR、离职原因、职业规划、薪资谈判

深水区实战(资深扩展)#

序号文章核心考点
20资深前端核心能力问答双栈选型、Next.js SSR、Konva/Three.js、Hybrid N-API、工程化性能、AI 研发 24 问
21前端深水区实战配置驱动渲染、2D×3D 协同、Hybrid 硬件链路、离线包热更新、AI 协作流

面试准备策略#

时间分配建议#

阶段时间内容
基础复习1-2 周HTML/CSS/JS 核心知识
框架深入1-2 周Vue 或 React 原理(根据岗位选择)
工程化3-5 天构建工具、性能优化
后端知识3-5 天Nginx、MySQL 基础
项目复盘1 周准备项目经验、难点亮点
模拟面试2-3 天刷题、模拟真实面试场景

高频考点 TOP 10#

  1. 🔥 闭包:什么是闭包?应用场景?内存泄漏问题?
  2. 🔥 原型链:__proto__ 和 prototype 的区别?
  3. 🔥 事件循环:宏任务、微任务的执行顺序?
  4. 🔥 Vue 响应式:Object.defineProperty vs Proxy?
  5. 🔥 React Fiber:为什么需要 Fiber?时间切片原理?
  6. 🔥 虚拟 DOM:虚拟 DOM 一定比直接操作 DOM 快吗?
  7. 🔥 跨域解决方案:CORS、JSONP、代理的区别?
  8. 🔥 性能优化:首屏加载优化、代码分割、懒加载?
  9. 🔥 Webpack vs Vite:为什么 Vite 快?冷启动原理?
  10. 🔥 HTTP 缓存:强缓存、协商缓存的区别?

面试回答技巧#

STAR 法则回答项目经验:
S (Situation) - 项目背景
T (Task) - 你的任务
A (Action) - 你做了什么
R (Result) - 取得了什么成果
技术问题回答框架:
1. 是什么(定义)
2. 为什么(原理)
3. 怎么用(实践)
4. 注意什么(最佳实践/坑)

复习卡片#

知识领域重要程度建议时间
JavaScript 核心⭐⭐⭐⭐⭐2-3 天
Vue/React 框架⭐⭐⭐⭐⭐2-3 天
CSS 布局⭐⭐⭐⭐1 天
网络与 HTTP⭐⭐⭐⭐1 天
构建工具⭐⭐⭐1 天
跨端开发⭐⭐⭐0.5 天
Nginx⭐⭐0.5 天
MySQL⭐⭐0.5 天
后端基础⭐⭐0.5 天
TypeScript⭐⭐⭐⭐1-2 天
性能优化⭐⭐⭐⭐⭐1-2 天
手写代码⭐⭐⭐⭐⭐2-3 天(需动手敲)
工程化实践⭐⭐⭐⭐1-2 天
实时通信⭐⭐⭐0.5-1 天
系统设计⭐⭐⭐⭐⭐2-3 天(重点)
软素质 HR 面⭐⭐⭐⭐⭐1 天(需演练)
Node.js⭐⭐⭐⭐2-3 天(全栈方向重点)
资深核心能力问答⭐⭐⭐⭐1-2 天(查漏补缺)
深水区实战⭐⭐⭐⭐1-2 天(架构思路)
TIP

建议按顺序阅读,先打牢基础再看框架和工程化。已经熟悉的部分可以直接跳到对应文章当作速查表使用。

WARNING

面试不仅仅是技术

  • 沟通能力:清晰表达思路,不懂就问
  • 项目经验:准备 2-3 个有亮点的项目
  • 学习能力:展示学习新技术的方法
  • 团队协作:举例说明如何处理分歧
前端面试宝典总览:6 年中高级工程师面试知识地图
http://117.72.32.87/blog/posts/interview-guide-00-overview/
作者
Ethan
发布于
2026-09-15
许可协议
CC BY-NC-SA 4.0