hushicai/hushicai.github.io

React Scheduler

Opened this issue · 11 comments

hushicai commented

React调度相关资料。

hushicai commented

MessageChannel

postMessage() schedules the MessageEvent to be dispatched only after all pending execution contexts have finished. For example, if postMessage() is invoked in an event handler, that event handler will run to completion, as will any remaining handlers for that same event, before the MessageEvent is dispatched.

hushicai commented

一个React调度例子：

scheduletron3000

hushicai commented

React通过Fiber架构，使渲染的过程可以被中断，时间分片用完后，可以将控制权交回浏览器，让位给更高优先级的任务，浏览器空闲后再恢复渲染。

浏览器提供了相应的API: requestIdleCallback，可使浏览器在空闲后，将控制权交回给React。

但requestIdleCallback 实际上有点过于严格，并且执行频次不足以实现流畅的UI渲染，因此React团队必须实现自己的版本。

最终React通过RAF + MessageChannel模拟了一个requestIdleCallback，RAF在repaint之前调用，而MessageChannel在repaint之后调用：

image