前端面试核心知识点梳理
React Fiber 架构原理
在 16.x 版本中，React 将其最为核心的 Diff 算法整个重写，使其以'Fiber Reconciler'的全新面貌示人。
Stack Reconciler 的局限性
Stack Reconciler 是一个同步的递归过程。这意味着一旦更新开始，就像吃了炫迈一样，根本停不下来。当处理结构相对复杂、体量相对庞大的虚拟 DOM 树时，需要的调和时间会很长，导致 JavaScript 线程长时间霸占主线程，进而引发渲染卡顿或交互无响应等问题。
在 React 15 及之前的版本中，虚拟 DOM 树的数据结构载体是计算机科学中的'树'，其 Diff 算法的遍历思路沿袭了传统计算机科学中'对比两棵树'的算法。从本质上来说，栈调和机制下的 Diff 算法是树的深度优先遍历的过程。
拿这棵树来举例，若 A 组件发生了更新，那么栈调和的工作过程是这样的：对比第 1 层的两个 A，确认节点可复用，继续 Diff 其子组件。当 Diff 到 B 的时候，对比前后的两个 B 节点，发现可复用，于是继续 Diff 其子节点 D、E。待 B 树最深层的 Diff 完成、逐层回溯后，再进入 C 节点的 Diff 逻辑。调和器会重复'父组件调用子组件'的过程，直到最深的一层节点更新完毕，才慢慢向上返回。
这个过程的致命性在于它是同步的，不可以被打断。当处理结构相对复杂、体量相对庞大的虚拟 DOM 树时，Stack Reconciler 需要的调和时间会很长，这就意味着 JavaScript 线程将长时间地霸占主线程，进而导致我们上文中所描述的渲染卡顿/卡死、交互长时间无响应等问题。
Fiber 架构设计思想
什么是 Fiber？从字面上来理解，Fiber 这个单词翻译过来是'丝、纤维'的意思，是比线还要细的东西。在计算机科学里，我们有进程、线程之分，而 Fiber 就是比线程还要纤细的一个过程，也就是所谓的'纤程'。纤程的出现，意在对渲染过程实现更加精细的控制。
Fiber 是一个多义词。从架构角度来看，Fiber 是对 React 核心算法（即调和过程）的重写；从编码角度来看，Fiber 是 React 内部所定义的一种数据结构，它是 Fiber 树结构的节点单位，也就是 React 16 新架构下的'虚拟 DOM'；从工作流的角度来看，Fiber 节点保存了组件需要更新的状态和副作用，一个 Fiber 同时也对应着一个工作单元。
Fiber 架构的应用目的，按照 React 官方的说法，是实现'增量渲染'。所谓'增量渲染'，通俗来说就是把一个渲染任务分解为多个渲染任务，而后将其分散到多个帧里面。不过严格来说，增量渲染其实也只是一种手段，实现增量渲染的目的，是为了实现任务的可中断、可恢复，并给不同的任务赋予不同的优先级，最终达成更加顺滑的用户体验。
Fiber 架构核心：可中断、可恢复与优先级
在 React 16 之前，React 的渲染和更新阶段依赖的是两层架构：
![图片]
正如上文所分析的那样，Reconciler 这一层负责对比出新老虚拟 DOM 之间的变化，Renderer 这一层负责将变化的部分应用到视图上，从 Reconciler 到 Renderer 这个过程是严格同步的。
而在 React 16 中，为了实现'可中断'和'优先级'，两层架构变成了三层架构：
![图片]
多出来的这层架构，叫作'Scheduler（调度器）'，调度器的作用是调度更新的优先级。
在这套架构模式下，更新的处理工作流变成了这样：首先，每个更新任务都会被赋予一个优先级。当更新任务抵达调度器时，高优先级的更新任务（记为 A）会更快地被调度进 Reconciler 层；此时若有新的更新任务（记为 B）抵达调度器，调度器会检查它的优先级，若发现 B 的优先级高于当前任务 A，那么当前处于 Reconciler 层的 A 任务就会被中断，调度器会将 B 任务推入 Reconciler 层。当 B 任务完成渲染后，新一轮的调度开始，之前被中断的 A 任务将会被重新推入 Reconciler 层，继续它的渲染之旅，这便是所谓'可恢复'。
以上，便是架构层面对'可中断''可恢复'与'优先级'三个核心概念的处理。
八股文档（含答案）
1. JavaScript
- 相比于 npm 和 Yarn，pnpm 的优势是什么？
- 如果使用 Math.random() 计算中奖概率会有什么问题吗？
- 怎么使用 JS 实现拖拽功能？
- 举例说明你对尾递归的理解，以及有哪些应用场景。
- 说说你对 Iterator, Generator 和 Async/Await 的理解。
- 说说你对模块化方案的理解，比如 CommonJS, AMD, CMD, ES Module。
- 前端跨页面通信，你知道哪些方法？
- JavaScript 脚本延迟加载的方式有哪些？
- 怎么理解 ES6 中 Generator 的？使用场景有哪些？
