前端面试核心考点与架构原理深度梳理
当前前端技术招聘市场已进入精耕细作阶段。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?
- 路由懒加载原理?


