自我介绍

这是面试的“破冰”环节，通常持续1-3分钟。

考察点：

• 沟通表达能力
• 总结概括能力
• 简历核心亮点提炼

回答建议： 不要简单复述简历，采用“过去-未来”或“我是谁-我擅长什么-我做过什么-我为什么适合这个岗位”的结构。

示例： “面试官您好，我叫[你的名字]，有[X]年的Web开发经验，我主要专注于[前端/后端/全栈]领域，熟练使用[React/Vue/Node.js]等技术栈，在上一家公司，我主要负责[某个项目名称]的开发，通过[你采取的关键技术或方法]，成功实现了[项目成果，如：提升了页面加载速度30%，降低了服务器成本等]，我了解到贵公司正在招聘[岗位名称]，并且非常认同[公司的技术理念或产品方向]，相信我的经验能够为团队带来价值，非常期待这次机会。”

技术基础与深度

这部分是核心,会根据你简历上写的技术栈进行深入考察。

前端方向

HTML/CSS:

• 问题： box-sizing: border-box 和 content-box 的区别是什么？什么场景下会使用它们？
  • 建议： 解释两者的计算方式（width 是否包含 padding 和 border），并举例说明 border-box 在响应式布局和避免布局塌陷中的优势。
• 问题： Flexbox 和 Grid 布局有什么区别？分别适用于什么场景？
  • 建议： Flexbox 是一维布局（行或列），适合组件内部的小范围布局（如导航栏、卡片内部）。Grid 是二维布局（行和列），适合整个页面的宏观布局,可以举例说明。
• 问题： 如何实现一个元素的水平垂直居中？至少说出三种方法。
  • 建议： Flexbox (justify-content: center; align-items: center;)、Grid (place-items: center;)、绝对定位 + transform: translate(-50%, -50%)、margin: auto 等,并简要评价各自的优缺点。
• 问题： BFC (Block Formatting Context) 是什么？如何触发？解决了什么问题？
  • 建议： 解释BFC是一个独立的渲染区域，内部元素不会影响外部，触发方式（如 overflow: hidden, float, position: absolute 等），解决的问题（如：清除浮动、外边距塌陷）。

JavaScript:

• 问题： let, const, var 的区别是什么？
  • 建议： 从变量提升、暂时性死区、作用域（函数级/块级）、是否可重新赋值等角度详细对比。
• 问题： 说说你对原型和原型链的理解。
  • 建议： 解释 __proto__ 和 prototype 的关系，instanceof 的判断原理,并用一个简单的图示说明原型链的查找过程。
• 问题： JavaScript 中的事件循环 是什么？setTimeout, Promise, async/await 的执行顺序是怎样的？
  • 建议： 讲清楚宏任务 和微任务 的概念，以及它们在调用栈、任务队列中的执行顺序，给出一个包含这些代码的例子,并一步步分析输出结果。
• 问题： 谈谈你对闭包 的理解，并举一个实际应用场景。
  • 建议： 解释闭包是函数和其词法环境的组合，应用场景：防抖/节流函数、私有变量、函数柯里化等。
• 问题： 跨域是什么？如何解决跨域问题？
  • 建议： 解释同源策略，解决方案：CORS（最常用）、JSONP（仅限GET）、代理服务器（Nginx）、WebSocket等。

框架与工具:

• 问题： React/Vue 的生命周期/钩子函数有哪些？分别在什么时机调用？
  • 建议： 不需要死记硬背，但要能说出关键的钩子函数及其作用，如 useEffect (React) / onMounted (Vue) 的依赖项数组如何影响执行。
• 问题： React 的 useState 和 useEffect 分别是做什么的？useEffect 的依赖项数组为空 [] 和不写有什么区别？
  • 建议： useState 用于状态管理。useEffect 用于处理副作用。[] 表示只在组件挂载和卸载时执行一次；不写则每次渲染后都执行。
• 问题： 虚拟DOM 是什么？它的工作原理是什么？
  • 建议： 解释虚拟DOM是一个轻量级的JavaScript对象，是真实DOM的映射，工作原理：数据变化 -> 生成新的虚拟DOM -> 通过 diff 算法比较新旧虚拟DOM -> 找出差异 -> 只将差异部分更新到真实DOM上。
• 问题： Webpack/Vite 的核心概念有哪些？（Entry, Output, Loader, Plugin）
  • 建议： 简要解释每个概念的作用,并说明它们是如何协同工作的。
• 问题： 你用过哪些性能优化手段？
  • 建议： 从代码层面（减少DOM操作、事件委托、防抖节流）、资源层面（图片懒加载、代码压缩、CDN）、网络层面（HTTP缓存、减少HTTP请求）等角度回答。

后端方向

Node.js:

• 问题： Node.js 的事件循环和浏览器的事件循环有什么区别？
  • 建议： 浏览器事件循环宏任务包括 script、setTimeout 等，微任务包括 Promise、MutationObserver，Node.js 的事件循环阶段更多，且 process.nextTick() 的优先级高于 Promise.then()。
• 问题： 什么是中间件？Express/Koa 中间件的原理是什么？
  • 建议： 中间件是函数，用于处理请求和响应，原理是基于函数的洋葱模型，请求进入后依次经过每个中间件,再依次返回。

数据库:

• 问题： 数据库的三大范式是什么？
  • 建议： 简要说明第一范式（1NF，原子性）、第二范式（2NF，非部分依赖）、第三范式（3NF，非传递依赖）,并理解在实际项目中有时会为了性能而反范式设计。
• 问题： JOIN 操作有哪些？INNER JOIN 和 LEFT JOIN 的区别是什么？
  • 建议： INNER JOIN（内连接，取交集）、LEFT JOIN（左连接，取左表全部和右表匹配项）、RIGHT JOIN、FULL JOIN,用实例说明区别。
• 问题： 什么是索引？为什么用索引？索引的缺点是什么？
  • 建议： 索引是数据结构（如B+树），用于快速查询，优点是加快查询速度，缺点是占用磁盘空间、降低增删改速度、需要维护。
• 问题： SQL 注入是什么？如何防范？
  • 建议： 解释SQL注入的原理，防范措施：使用参数化查询（Prepared Statements）、对用户输入进行严格过滤和转义。

网络与服务器:

• 问题： HTTP 和 HTTPS 的区别是什么？为什么现在推荐使用 HTTPS？
  • 建议： HTTPS = HTTP + SSL/TLS，区别在于HTTPS具有加密传输、身份认证和数据完整性保护，推荐原因：安全、SEO友好、现代浏览器要求。
• 问题： GET 和 POST 请求有什么区别？
  • 建议： 从参数位置（URL体/请求体）、安全性、数据长度限制、幂等性 等方面回答。
• 问题： 什么是RESTful API？它的设计原则是什么？
  • 建议： 一种软件架构风格，使用HTTP动词来操作资源，原则：无状态、客户端-服务器、统一接口、可缓存、分层系统等。

项目经验与解决问题能力

考察点：

• 实际项目经验的真实性
• 技术选型的思考能力
• 独立分析和解决问题的能力
• 团队协作与沟通能力

常见问题：

1. 请详细介绍你做过的最有成就感的一个项目。

   • 建议： 使用 STAR法则 来回答：
     • S (Situation): 项目背景是什么？要解决什么问题？
     • T (Task): 你在这个项目中的角色和具体任务是什么？
     • A (Action): 你采取了哪些行动？遇到了什么困难？你是如何解决的？（重点突出你的技术难点和解决方案）
     • R (Result): 项目取得了什么成果？（最好有数据支撑，如性能提升、用户增长、成本降低等）

2. 你在项目中遇到的最大技术挑战是什么？你是如何解决的？

   • 建议： 不要说“没遇到困难”，选择一个真实、有技术含量、且你成功解决的问题，重点在于展现你的分析思路、排查过程和学习能力。

3. 你如何进行技术选型？比如为什么选择这个框架/语言/数据库？

   • 建议： 不要只说“因为流行”，从项目需求（性能、并发量）、团队技术栈、开发效率、社区生态、可维护性等多个维度进行阐述。

4. 你如何保证代码质量？

   • 建议： 提及代码规范（ESLint, Prettier）、代码审查、单元测试、集成测试、CI/CD 流程等。

5. 你如何进行性能优化？有没有具体案例？

   • 建议： 结合一个具体项目，从前端（资源加载、渲染优化）和后端（数据库查询、缓存、代码逻辑）两方面展开。

软技能与职业规划

考察点：

• 学习能力和主动性
• 团队协作精神
• 沟通表达能力
• 职业稳定性和发展意愿

常见问题：

1. 你的职业规划是什么？未来3-5年想成为什么样的开发者？

   • 建议： 表达出对技术的热情和持续学习的意愿，可以规划为：1-2年内成为团队的技术骨干，3-5年内在某个领域（如架构、前端工程化）有深入的研究和贡献。

2. 你最近在学习什么新技术？为什么学习它？

   • 建议： 展现你的好奇心和学习能力，可以提一些与你岗位相关的技术,并说明你对它的理解和学习计划。

3. 你如何与产品经理、设计师、后端工程师协作？

   • 建议： 强调沟通的重要性，与产品经理明确需求，与设计师确认UI/UX细节,与后端API联调时主动沟通接口规范和数据格式。

4. 你有什么问题想问我们吗？

   • 建议： 一定要准备2-3个问题！ 这表明你对公司和职位有浓厚兴趣。
   • 好问题示例：
     • “团队目前的技术栈是怎样的？未来有什么技术规划？”
     • “这个岗位入职后，前三个月的主要工作目标是什么？”
     • “团队的开发流程是怎样的？代码审查和单元测试的要求是怎样的？”
     • “公司对员工的成长和培训有什么支持？”

现场编程/手写代码

这是技术岗面试的“硬通货”。

考察点：

• 基础编程能力
• 代码规范性
• 算法与数据结构应用
• 问题分析能力

常见题型：

1. 数组/字符串操作：
   • 数组去重、扁平化
   • 字符串反转、查找第一个不重复的字符
   • 两数之和、三数之和
2. 算法题：
   • 手写一个防抖/节流函数
   • 手写一个 Promise (或 Promise.all/Promise.race)
   • 深度优先搜索/广度优先搜索
3. DOM/BOM 操作：
   • 手写一个 ajax 请求
   • 实现一个拖拽功能

回答建议：

• 先沟通： 拿到题目不要马上写，先向面试官确认需求，比如输入是什么，输出是什么,有没有边界条件。
• 先说思路： 大声说出你的解题思路，我打算先对数组进行排序，然后用双指针法来解决这个问题”。
• 再写代码： 写代码时注意格式清晰、变量命名规范。
• 多考虑边界： 写完后，主动思考并测试一些边界情况，如空数组、null、undefined等,并写出对应的测试用例。
• 写完复盘： 代码写完后，可以简单分析一下时间复杂度和空间复杂度,并讨论是否有更优的解法。

总结与准备建议

1. 简历是核心： 确保简历上写的每一个技术点你都能流利地解释清楚。
2. 项目是重点： 对自己做过的项目了如指掌,能用STAR法则清晰地讲出来。
3. 算法是基础： LeetCode等平台上的“剑指Offer”和“Hot 100”题目要刷熟，尤其是数组、字符串、链表、树相关的题目。
4. 模拟面试： 找朋友或进行模拟面试,练习口头表达和临场反应。
5. 了解公司： 面试前花时间研究公司的产品、技术博客和招聘岗位要求,做到心中有数。

祝你面试顺利,拿到心仪的Offer！