当前前端招聘市场已进入精耕细作阶段，单纯掌握框架语法已不足以应对挑战。面试官更看重候选人的计算机基础、原理理解以及工程化能力。本文梳理了 React Fiber 架构的核心设计思想，并整理了涵盖 JavaScript、Vue、CSS、Node.js 等方向的高频面试题，旨在帮助开发者构建扎实的技术底座。
React Fiber 架构：从同步到异步的演进
在 React 16.x 版本中，核心的 Diff 算法被重写为'Fiber Reconciler'。Stack Reconciler（React 15 及之前）存在一个无解的问题：JavaScript 对主线程的超时占用。
为什么会产生卡顿？
Stack Reconciler 是一个同步的递归过程。一旦更新开始，就像吃了炫迈一样根本停不下来。虚拟 DOM 树的遍历本质上是树的深度优先遍历，当处理结构复杂、体量庞大的树时，调和时间会很长。这意味着 JavaScript 线程将长时间霸占主线程，导致渲染卡顿或交互无响应。
浏览器是多线程的，包含事件系统、定时器、网络请求和 UI 渲染线程。JavaScript 线程可以操作 DOM，因此必须与渲染线程互斥。若 JS 线程长时间占用主线程，渲染层面的更新就不得不等待，界面长时间不更新，用户体验就是'卡顿'。
Fiber 的设计思想
Fiber 意为'丝、纤维'，是比线程更纤细的过程（纤程）。其出现意在对渲染过程实现更加精细的控制。
- 架构角度：Fiber 是对 React 核心算法（调和过程）的重写。
- 编码角度：Fiber 是 React 内部定义的数据结构，是 Fiber 树结构的节点单位。
- 工作流角度：Fiber 节点保存组件需要更新的状态和副作用，对应一个工作单元。
Fiber 架构的应用目的是实现增量渲染。通俗来说，就是把一个渲染任务分解为多个任务，分散到多个帧里执行。严格来说，这是为了达成任务的可中断、可恢复，并赋予不同优先级，最终实现更顺滑的用户体验。
核心机制：可中断、可恢复与优先级
React 16 引入了 Scheduler（调度器），将两层架构变为三层：
- 优先级分配：每个更新任务抵达调度器时都会被赋予优先级。
- 中断与恢复：高优先级任务（A）进入 Reconciler 层后，若有更高优先级任务（B）抵达，A 会被中断，B 被推入。B 完成后，A 重新被推入继续渲染。
- 结果：实现了任务的可中断和可恢复，避免了长任务阻塞主线程。
高频面试题精选
以下整理了前端开发中常见的高频考点，涵盖基础、框架、性能优化及场景设计。
1. JavaScript 基础
- 相比于 npm 和 yarn，pnpm 的优势是什么？
- 如果使用 Math.random() 计算中奖概率会有什么问题吗？
- 怎么使用 JS 实现拖拽功能？
- 举例说明你对尾递归的理解，以及有哪些应用场景。
- 说说你对 Iterator, Generator 和 Async/Await 的理解。
- 说说你对模块化方案的理解，比如 CommonJS, AMD, CMD, ES Module。
- 前端跨页面通信，你知道哪些方法？
- JavaScript 脚本延迟加载的方式有哪些？
- 怎么理解 ES6 中 Generator 的？使用场景有哪些？
- 导致页面加载白屏时间长的原因有哪些，怎么进行优化？
- 微前端中的应用隔离是什么，一般是怎么实现的？
- JavaScript 对象的底层数据结构是什么？
- 浏览器和 Node 中的事件循环有什么区别？
- 版本号排序逻辑是怎样的？
