时间切片和优先级调度概述：React源码解析25
2023-12-19 07:38:37
React源码解析25-schedule工作原理
概述
时间切片和优先级调度是React的核心调度机制，确保了应用程序的流畅运行。时间切片是将一帧的时间分成多个小的时段，每个时段执行一定数量的任务，以模拟requestIdleCallback的执行过程。优先级调度则是根据任务的优先级决定任务的执行顺序。React通过将更新划分为不同的优先级，并根据优先级调度更新，确保了重要更新的及时执行。
时间切片
时间切片概述
浏览器一帧执行的任务，除去浏览器重排/重绘还有四个是可以用来执行我们的js的：
- 脚本（script）：执行我们的js代码；
- 网络（network）：进行ajax请求；
- 定时器（timers）：setTimeout/setInterval等；
- 浏览器任务（browser tasks）：例如浏览器内部事件等。
浏览器会将这些任务放到四个不同的队列中，每个队列会有自己的执行时机，并且浏览器会保证这些任务按照队列的顺序执行。
时间切片的实现
React的时间切片是通过requestIdleCallback实现的。requestIdleCallback是一个浏览器API，它可以请求浏览器在空闲时间执行一个回调函数。React通过将更新任务包装成requestIdleCallback回调函数，并在浏览器空闲时间执行这些回调函数，从而实现了时间切片。
优先级调度
优先级调度概述
React将更新划分为不同的优先级，以确保重要更新的及时执行。React的优先级调度机制分为两部分：
- 任务优先级：任务优先级决定了任务的执行顺序。React根据任务的类型和来源等因素为任务分配优先级。
- 工作单元优先级：工作单元优先级决定了一组任务的执行顺序。React将多个任务组合成一个工作单元，并为每个工作单元分配优先级。
优先级调度的实现
React的优先级调度机制是通过Fiber实现的。Fiber是React的一个数据结构，它代表了一个React组件及其子组件。React通过Fiber树来跟踪组件的更新，并根据Fiber树的结构和优先级来决定任务的执行顺序。
总结
时间切片和优先级调度是React的核心调度机制，确保了应用程序的流畅运行。时间切片是通过requestIdleCallback实现的，它将一帧的时间分成多个小的时段，每个时段执行一定数量的任务，以模拟requestIdleCallback的执行过程。优先级调度则是根据任务的优先级决定任务的执行顺序。React通过将更新划分为不同的优先级，并根据优先级调度更新，确保了重要更新的及时执行。
