前端面试官指导手册

一、技术能力评估体系

模块	核心领域	关键考察点
基础核心	语言规范	HTML5 语义化、CSS3 (Flexbox/Grid)、JavaScript ES6+、TypeScript
	浏览器与运行时	网络基础、网络安全、浏览器原理（渲染、事件循环、Web API、跨域）
开发框架	主流框架	React (Hooks/RSC)、Vue (Composition API)、Next.js/Nuxt、Svelte
工程化与架构	开发工具链	Vite/Webpack/Rollup、pnpm、ESLint/Prettier
	质量保障	Jest/Vitest、Playwright、Sentry
	自动化部署	CI/CD (GitHub Actions)、Docker、部署策略
	架构模式	微前端、Monorepo、低代码引擎、Edge SSR
全栈技术	服务端运行时	Node.js (Express/Koa)、Deno、Bun
	后端与数据库	Next.js API、Prisma、Supabase
	Linux 运维	systemd、日志分析、性能监控、Nginx、Shell
跨平台开发	移动端	React Native、Flutter、PWA
	桌面端	Electron、Tauri
	小程序	uniapp、Taro、公众号开发、JSBridge
前沿与进阶	可视化与图形	WebGL、Three.js、WebXR、D3.js
	性能优化	Core Web Vitals、代码分割、缓存策略
	AI & Web3	Prompt Engineering、TensorFlow.js、Web3.js、智能合约

---

二、场景题（软技能评估）

协作能力

• 前司整个开发协作流程（需求 → 开发 → 测试 → 部署）
• 部署方案（CI/CD、发布流程、回滚策略）
• AI 工具使用（Cursor/Copilot/Claude）

问题解决能力

• Debug 思路：页面白屏/卡顿排查
  • 环境检查、缓存清理、控制台日志
  • 火焰图分析、二分法定位
  • 事后复盘、预防机制

抗压能力

• 前司加班情况
• 能否接受偶尔加班到 9 点
• 观察情绪基调和态度

责任心

• 是否主动处理分外之事（如接手烂摊子项目）
• 做事是否闭环（开发 → 测试 → 上线 → 监控）
• 失败经历复盘（自我反思能力）
• 主动优化意识（如构建速度优化）

技术深度

• 印象最深刻的技术方案/项目
  • 为什么选择该方案（优势对比）
  • 为什么不用其他方案（技术选型依据）
  • 遇到的难点和解决方案
  • 数据支撑（优化前后对比数据）

学习态度

• 每份工作的离职原因（深挖动机）
• 自我发展规划（3-5 年）
• 最近关注的前端新技术
• 如何成为合格的前端工程师
• 对前端架构的理解

自我认知

• 评价自己的优缺点
• 观察是否有清晰的自我认知

---

三、八股文（核心技术问题）

1. CSS 盒模型与性能优化

• CSS 盒模型（标准盒/IE 盒）
• BFC（块级格式化上下文）及应用场景
• 避免重排和重绘的方法
• 哪些操作会引起强制布局

2. JavaScript 事件循环

• 调用栈、任务队列的工作机制
• 微任务与宏任务的区别
• 为什么要区分宏任务和微任务
• 常见的微任务和宏任务类型

3. Vue 响应式原理

• Vue2：Object.defineProperty（优缺点）
• Vue3：Proxy（优缺点）
• 两者对比及性能差异

4. 浏览器渲染流程

• 从输入 URL 到页面显示的完整过程
• DNS 解析、TCP 连接、HTTP 请求
• 浏览器解析、渲染树构建、绘制

5. Webpack 构建流程

• 初始化、编译、输出三个阶段
• Loader 和 Plugin 的作用
• 常见优化手段

6. 前端性能优化体系

• 资源优化：压缩、合并、Tree Shaking
• 网络优化：HTTP/2、CDN、预加载
• 加载优化：懒加载、代码分割、骨架屏
• 运行优化：防抖节流、虚拟列表、Web Worker
• 缓存优化：强缓存、协商缓存、LocalStorage
• 接口优化：并发控制、请求合并、接口缓存
• 性能监控：Lighthouse、性能 API、埋点上报

7. 浏览器兼容性保障

• Polyfill 方案（core-js、@babel/preset-env）
• Browserslist 配置
• CSS 前缀自动化（Autoprefixer）
• 兼容性测试流程

---

四、面试评分维度

• 技术深度（30%）：核心技术理解深度、源码阅读能力
• 技术广度（20%）：技术栈覆盖面、新技术学习
• 工程能力（20%）：工程化实践、代码规范、架构设计
• 问题解决（15%）：Debug 能力、技术选型、方案设计
• 软技能（15%）：沟通协作、责任心、抗压能力

---

五、面试技巧

1. 循序渐进：由浅入深，从基础到进阶
2. 追问细节：不满足于表面回答，深挖实现原理
3. 场景结合：结合实际项目场景提问
4. 观察态度：注意候选人的情绪、思考方式
5. 给予机会：遇到不会的问题，可以引导或换个角度