初级全栈开发工程师面试题：该准备什么
Milad Bonakdar
作者
围绕 HTML、CSS、JavaScript、React、Node.js、API、SQL、Git 和调试，准备初级全栈开发工程师面试。
先掌握全栈基础
初级全栈开发工程师面试通常会考察你是否能说明一个简单 Web 应用从浏览器到数据库的工作方式：HTML 和 CSS 负责页面结构，JavaScript 增加交互，React 管理界面状态，Node.js 处理服务端逻辑，API 连接各层，SQL 存储数据，Git 让代码变更可追踪、可评审。
使用这份指南时，先练习简短清晰的回答，再把每个回答和你做过的小项目联系起来。初级岗位一般不要求很深的架构能力，但会看重基础理解、调试习惯，以及能否诚实说明取舍。
如何准备
- 准备讲清楚一个项目从 UI 事件到 API 请求，再到数据库查询的流程。
- 不只讲完成的功能，也要能讲你修复过的错误。
- 回答保持实用：先定义概念，再给一个小例子，并指出一个常见错误。
HTML & CSS
1. 解释 CSS 中的盒模型。
答案： CSS 盒模型是网页布局的基础。每个元素都被表示为一个矩形盒子。
- 内容 (Content): 实际的文本或图像。
- 内边距 (Padding): 内容周围的透明区域（在边框内部）。
- 边框 (Border): 围绕内边距和内容的一条边框。
- 外边距 (Margin): 边框外部的透明区域（用于创建元素之间的空间）。
常见度： 非常常见 难度： 简单
2. display: block、inline 和 inline-block 之间有什么区别？
答案：
- Block (块级元素): 从新的一行开始，并占据可用宽度的全部（例如，
<div>，<p>）。 - Inline (行内元素): 不从新的一行开始，只占据必要的宽度。
width和height属性无效（例如，<span>，<a>）。 - Inline-block (行内块级元素): 类似于行内元素，但可以设置
width和height。适用于网格或导航菜单。
常见度： 常见 难度： 简单
3. 什么是语义化 HTML，为什么它很重要？
答案： 语义化 HTML 指的是使用能够传达内容 含义 的标签，而不仅仅是外观。
- 示例： 使用
<header>、<nav>、<article>、<footer>而不仅仅是<div>。 - 重要性：
- 可访问性 (Accessibility): 屏幕阅读器使用这些标签来帮助视力障碍用户导航。
- SEO (搜索引擎优化): 搜索引擎更好地理解内容的结构和重要性。
- 可读性 (Readability): 代码更容易被开发人员理解。
常见度： 常见 难度： 简单
4. 解释 Flexbox 和 CSS Grid。
答案：
- Flexbox： 一维布局模型（行或列）。最适合对齐容器内的项目或分配空间（例如，导航栏）。
- CSS Grid： 二维布局模型（行和列）。最适合定义页面的整体布局（例如，页眉、侧边栏、主要内容、页脚）。
常见度： 常见 难度： 中等
JavaScript
5. var、let 和 const 之间有什么区别？
答案：
var： 函数作用域（或全局作用域）。可以重新声明和更新。会被提升到其作用域的顶部。let： 块作用域（仅存在于{}内部）。可以更新，但不能在同一作用域中重新声明。const： 块作用域。不能更新或重新声明。必须在声明时初始化。默认情况下使用它，除非需要重新赋值。
常见度： 非常常见 难度： 简单
6. 解释 async 和 await。
答案：
async 和 await（在 ES2017 中引入）使异步代码看起来和行为更像同步代码。
async： 放在函数之前，它确保该函数返回一个 Promise。await： 在async函数内部使用，它会暂停执行，直到 Promise 被解析。- 优点： 比链接
.then()和.catch()更简洁、更易读。
常见度： 常见 难度： 中等
7. 什么是 DOM？
答案： DOM（文档对象模型）是用于 Web 文档的编程接口。它表示页面，以便程序（JavaScript）可以更改文档结构、样式和内容。DOM 将文档表示为节点和对象。
常见度： 常见 难度： 简单
8. == 和 === 之间有什么区别？
答案：
==（宽松相等）： 在进行类型转换（将它们转换为通用类型）后比较值。例如，5 == "5"为true。===（严格相等）： 比较值和类型。没有类型转换。例如，5 === "5"为false。- 最佳实践： 始终使用
===以避免意外的错误。
常见度： 常见 难度： 简单
React
9. 什么是 Virtual DOM？
答案： Virtual DOM 是保存在内存中的真实 DOM 的轻量级副本。
- 过程： 当状态更改时，React 首先更新 Virtual DOM。然后，它将新的 Virtual DOM 与之前的 Virtual DOM 进行比较（差异比较），并计算出更新真实 DOM 的最有效方法（协调）。
- 优点： 最大程度地减少了对速度较慢的真实 DOM 的直接操作，从而提高了性能。
常见度： 常见 难度： 中等
10. 什么是 Props 和 State？
答案：
- Props (属性): 从父组件传递到子组件的只读数据。它们使组件可重用且动态。
- State (状态): 在组件 内部 管理的数据。它可以随时间变化（例如，用户输入、API 响应）。当状态更改时，组件会重新渲染。
常见度： 非常常见 难度： 简单
11. 什么是 React Hooks？说出几个常见的 Hook。
答案： Hooks 是让函数组件使用 React 功能的函数，例如 state、context、refs 和 effects。
useState： 保存组件本地状态，例如表单输入值或当前选中的标签页。useEffect： 让组件与 React 外部的事物同步，例如获取数据或订阅事件。它不应该被用来处理所有计算。useContext： 读取共享 context，避免手动把 props 一层层传下去。- 面试提示： 提到 Hooks 规则：hooks 应在 React 组件或 custom hook 的顶层调用，不要放在循环或条件语句中。
常见度： 常见 难度： 中等
Node.js & 后端
12. 什么是 Node.js，为什么它是单线程的？
答案： Node.js 是基于 V8 引擎的 JavaScript 运行时。JavaScript 在一个主线程上执行，但 Node.js 仍能处理许多 I/O 密集型任务，因为 event loop 会协调异步工作。
- 主线程： 执行 JavaScript 回调。
- 非阻塞 I/O： 文件、网络和数据库操作可以交给操作系统或 libuv，等结果准备好后再继续处理。
- 重要限制： CPU 密集型 JavaScript 仍然会阻塞 event loop。对于耗时任务，可以使用 worker thread、任务队列，或把它移出请求处理路径。
- 好例子： 需要等待大量数据库或网络调用的 API 服务器。
常见度： 常见 难度： 中等
13. 什么是 NPM 和 package.json？
答案：
- NPM (Node Package Manager): Node.js 的默认包管理器。它允许你安装和管理库（依赖项）。
package.json： Node.js 项目的清单文件。它列出了元数据（名称、版本）和依赖项（运行应用程序所需的库）。
常见度： 常见 难度： 简单
14. 解释 GET 和 POST 之间的区别。
答案：
- GET： 获取资源。它应该是 safe 的，也就是不主动改变服务器状态；同时也是 idempotent 的，即重复相同请求应产生相同效果。
- POST： 向服务器发送需要处理的数据，常用于创建资源或触发操作。POST 不保证 idempotent，如果 API 没有保护机制，重复 POST 可能造成重复创建或重复执行。
- 实际例子： 加载商品列表用 GET；提交订单或创建评论用 POST。
常见度： 常见 难度： 简单
数据库 (SQL)
15. 什么是主键和外键？
答案：
- 主键 (Primary Key): 唯一标识表中每一行的列（或列的集合）。它不能为
NULL。 - 外键 (Foreign Key): 链接到另一个表的主键的列。它建立两个表之间的关系。
常见度： 常见 难度： 简单
16. 解释 INNER JOIN 和 LEFT JOIN 之间的区别。
答案：
- INNER JOIN (内连接): 返回在 两个 表中都具有匹配值的记录。
- LEFT JOIN (左连接) (或 LEFT OUTER JOIN): 返回左表中的所有记录，以及右表中匹配的记录。如果没有匹配项，则右侧的结果为
NULL。
常见度： 非常常见 难度： 中等
17. 什么是规范化？
答案： 规范化是在数据库中组织数据以减少冗余并提高数据完整性的过程。
- 目标： 将较大的表划分为较小的表，并使用关系将它们链接起来。
- 形式： 1NF、2NF、3NF（第三范式通常足以满足大多数应用程序的需求）。
常见度： 不常见（对于初级开发） 难度： 中等
通用
18. 什么是 Git，我们为什么使用它？
答案： Git 是一个分布式版本控制系统。
- 用途： 它跟踪软件开发过程中源代码的更改。
- 优点： 允许多个开发人员一起工作（协作），保留更改的历史记录（版本控制），并允许在出现问题时恢复到以前的状态。
常见度： 常见 难度： 简单
19. 什么是 API？
答案： API 代表应用程序编程接口。它是一组允许不同软件应用程序相互通信的规则。在 Web 开发中，它通常指的是 REST API，其中前端（客户端）从后端（服务器）请求数据。
常见度： 常见 难度： 简单
20. 你如何调试 Web 应用程序？
答案： 先复现问题，并缩小范围：问题出在浏览器、网络请求、后端处理逻辑，还是数据库。
- 前端： 使用浏览器 DevTools：Console 看错误，Network 看 API 状态和 payload，Elements 看 HTML/CSS，必要时使用 React DevTools。
- 后端： 检查结构化日志、request ID、stack trace、环境变量和数据库查询。如果控制流程不清楚，使用调试器。
- 好的面试回答： 说明一个你真实修复过的 bug、你先检查了什么，以及如何确认修复有效。
常见度： 常见 难度： 简单
