前端面试核心考点与架构原理深度梳理
当前前端技术招聘市场已进入精耕细作阶段。HC（招聘名额）紧缩，面试官不再满足于候选人'会用'框架，而是更看重对底层原理、工程化能力及计算机基础的理解。从 JavaScript 核心机制到 React/Vue 的渲染原理，再到性能优化与工程实践，这是一场全方位的技术考核。
Fiber 架构：从同步到异步的演进
在 React 16.x 版本中，核心的 Diff 算法被重写为'Fiber Reconciler'。理解这一变革，需要回溯 Stack Reconciler 的局限性。
前置知识：单线程与多线程的博弈
JavaScript 是单线程的，而浏览器是多线程的（包含 UI 渲染、事件循环等）。JavaScript 线程和渲染线程必须是互斥的：当 JS 执行时，渲染挂起；反之亦然。若 JS 长时间占用主线程，界面更新就会延迟，导致用户感知到的'卡顿'。
Stack Reconciler 是一个同步的递归过程。一旦更新开始，就像吃了炫迈一样停不下来。在处理复杂虚拟 DOM 树时，这种同步遍历会长时间霸占主线程，引发渲染卡顿或交互无响应。
在 React 15 及之前，虚拟 DOM 树的 Diff 算法本质上是树的深度优先遍历，这与递归紧密相关。
Fiber 的设计思想
Fiber 意为'丝'，比线程更纤细。从架构角度看，它是 React 核心算法的重写；从数据结构看，它是 React 16 新架构下的节点单位；从工作流看，它保存了组件的状态和副作用。
其核心目的是实现增量渲染。将一个大任务分解为多个小任务，分散到多帧中执行。严格来说，这是为了实现任务的可中断、可恢复，并赋予不同优先级，从而达成流畅的用户体验。
核心机制：可中断、可恢复与优先级
React 16 引入了三层架构：Reconciler（调和）、Renderer（渲染）以及新增的 Scheduler（调度器）。
调度器的作用是调度更新的优先级。高优先级任务（B）可以打断低优先级任务（A），待 B 完成后，A 再继续执行。这便是'可恢复'机制。
核心面试题集
以下整理了高频考察领域，涵盖基础、框架、工程化及场景设计。
1. JavaScript 基础
- pnpm 相比 npm 和 yarn 的优势是什么？
- Math.random() 计算中奖概率会有什么问题？
- 如何用 JS 实现拖拽功能？
- 尾递归的理解及应用场景？
- Iterator, Generator 和 Async/Await 的区别？
- 模块化方案对比（CommonJS, AMD, CMD, ES Module）。
- 跨页面通信方式有哪些？
- 脚本延迟加载方式？
- 生成海报的实现思路？
- AST 语法树的概念？
- JS 内存泄露排查？
- Promise finally 的实现原理？
- 限制异步操作并发个数？
- async/await 实现原理？
2. React 框架
- Fiber 架构的工作原理及迭代动机？
- useState 是如何实现的？
- React Hooks 闭包陷阱及解决方案？
- useEffect 如何支持 async/await？
- React 性能优化方法？
- React 18 新特性？
- render 阶段与 commit 阶段的执行过程？
- Fiber 如何实现时间切片？
- 为什么不直接使用 requestIdleCallback？
- 路由懒加载原理？
