前端工程师面试线路

[ 2025.4.22更新 ]

前端工程师面试学习线路（七阶段现代化全栈打怪流）

🎯 目标：系统掌握现代前端开发核心知识，涵盖基础语法、框架体系、构建工具、工程化、性能优化与面试场景实战，完成从切图仔到架构师的演化。

第一阶段：HTML + CSS 基础牢固营

目标：别再说你“会写页面”了，先把基础打好再说话。

1. HTML 知识点

• 语义化标签、meta 标签、表单元素
• SEO 基础、无障碍（a11y）考虑
• iframe、video、canvas 的作用

2. CSS 样式体系

• Flex / Grid 布局
• BFC、margin 合并、层叠上下文
• 动画 & 过渡、媒体查询响应式设计

3. 面试高频

• CSS 选择器优先级？inline 和 important 谁狠？
• 什么是 BFC？能干嘛？
• Flex 和 Grid 区别在哪？

第二阶段：JavaScript 核心语法机制

目标：不是写个 for 循环就叫会 JS，把异步、作用域、原型链给我吃透。

1. JS 核心机制

• 数据类型、类型转换、== vs ===
• 作用域链、闭包、执行上下文、this绑定
• 原型链与继承、class糖衣

2. 异步编程

• 回调、Promise、async/await
• 微任务 vs 宏任务、事件循环机制

3. 面试地狱题

• 手写 Promise.all / debounce / deepClone
• this 的五种绑定方式？
• Event Loop 的执行顺序？

第三阶段：DOM/BOM 与浏览器机制

目标：你要是真敢说“我用 jQuery 操作 DOM”，我真替你感到羞耻。

1. DOM 基础

• 节点查找、属性操作、事件绑定与委托
• 节流防抖、IntersectionObserver

2. 浏览器机制

• 浏览器渲染流程、重绘与回流
• 浏览器缓存策略：强缓存 vs 协商缓存
• 跨域原理、CORS、JSONP、Cookie vs localStorage

3. 面试热门

• 为什么页面加载慢？如何优化？
• 浏览器如何解析 CSS 和 JS？
• 如何手动实现懒加载？

第四阶段：现代框架体系（React/Vue/Angular）

目标：掌握一个主流框架及其生态，理解状态管理与组件架构设计

1. 框架理解

• React 的虚拟 DOM、hooks、组件生命周期
• Vue 的响应式系统、Composition API、指令系统
• Angular 的依赖注入、模块系统（如果你够勇敢）

2. 状态管理

• Redux / Zustand / Pinia / Vuex
• 跨组件通信方式：props、context、eventBus

3. 面试要点

• React 中 setState 是同步还是异步的？
• Vue2 和 Vue3 响应式系统有啥差异？
• 如何封装一个通用组件？

第五阶段：前端工程化与构建工具

目标：你以为 webpack 是魔法？我告诉你它是堆难读的 JS 代码。

1. 模块化

• CommonJS vs ESM
• tree shaking、code splitting、懒加载

2. 构建工具链

• Webpack：loader、plugin、alias、env
• Vite：更快的 dev server 和 esbuild 原理
• Babel：转译原理与 polyfill 策略

3. 面试炸点

• Webpack 的构建流程？
• 如何优化打包体积？
• 什么是 HMR？Vite 为什么快？

第六阶段：性能优化与安全策略

目标：页面不是“能打开就行”，还得快，还得不被攻击。

1. 性能优化

• 关键渲染路径优化：减少 TTI、FCP
• 图片懒加载、预加载、CDN、gzip、缓存控制
• Lighthouse 分析、Core Web Vitals 指标

2. 安全防护

• XSS、CSRF 攻击原理与防范
• CSP、token 安全策略、输入校验

3. 面试高频

• 如何优化首屏加载速度？
• 什么是防抖和节流？为什么要用它？
• 如何防止 XSS 攻击？

第七阶段：项目实战与面试能力提升

目标：能讲项目、能讲架构、能讲优化点，别再说“我写了一个 to-do”。

1. 项目经验提炼

• 业务背景 → 技术挑战 → 解决方案 → 收益结果
• 封装通用组件、搭建 CLI 工具、SSR 支持、微前端拆分

2. 系统设计题

• 如何设计一个权限路由系统？
• 怎么构建一个支持多语言的前端应用？

3. 面试答题技巧

• STAR 法则讲经历，别当流水账讲
• 技术问题+业务影响，显得你不是只懂代码的工具人

附录：面试高频问题 TOP 10

1. 你如何理解虚拟 DOM？
2. React 中 diff 算法是怎么优化性能的？
3. 如何实现一个双向绑定？
4. 什么是事件委托？它有什么好处？
5. Webpack 怎么做懒加载？
6. 跨域的几种解决方案有哪些？
7. 如何封装一个自定义的 hook？
8. 前端性能优化做过哪些？有没有量化指标？
9. Vue3 为什么比 Vue2 快？
10. 说说浏览器的渲染流程

推荐学习资源

• 文档党必看：

  • MDN Web Docs（前端人之光）
  • React 官方文档（新版教程超级香）
  • Vue 官方指南（别抄 demo，读它）

• 刷题练习：

  • LeetCode Easy/Medium
  • 前端面试宝典（牛客、掘金、小红书）
  • 大厂前端题库合集 GitHub 上一堆

• 实战项目：

  • 用 React + Zustand 做一个博客后台系统
  • 用 Vite + Vue3 写一个图床
  • 用原生 JS 手写一个 mini-react