反応16の後、Fiberが導入され、コアアルゴリズムがリファクタリングされました。調査と研究に時間を費やすことは、非常にやりがいのあることでした。
requestAnimationFrameがキャンバス描画アニメーションでより多く使用されることは誰もが知っています。
以前にrequestAnimationFrameとsetTimeout（setInterval）を比較する必要がありました。RequestAnimationFrameには、ウィンドウがフォーカスを失った後の違いなど、パフォーマンスの最適化ポイントがいくつかあります。
メソッドrequestIdleCallbackは、比較的馴染みのないものである必要があり
ます。https：
//www.w3.org/TR/requestidlecallback/ requestIdleCallbackは、ReactFiberによって実装される基本的なAPIでもあります。RequestIdleCallbackを使用すると、開発者は、アニメーションや入力応答などの遅延した主要イベントに影響を与えることなく、メインイベントループでバックグラウンドおよび優先度の低い作業を実行できます。 。。通常のフレームタスクの完了後、16msを超えないことは、アイドル時間が超過していることを示しており、この時点でrequestIdleCallbackに登録されているタスクが実行されます。
具体的な実行プロセスは次のとおりです。開発者はrequestIdleCallbackメソッドを使用して対応するタスクを登録し、タスクの優先度が高くないことをブラウザに通知します。各フレームにアイドル時間があれば、登録したタスクを実行できます。さらに、開発者はタイムアウトパラメータを渡してタイムアウト期間を定義できます。タイムアウト期間に達した場合、ブラウザはすぐに実行する必要があります。使用方法は次のとおりです。window.requestIdleCallback（callback、{timeout：1000} ）。ブラウザがこのメソッドの実行を終了した後、残り時間がないか、次の実行可能タスクがない場合、Reactは制御を返し、requestIdleCallbackを使用して次のタイムスライスを適用する必要があります
requestIdleCallback（callback）コールバックは、デフォルトのパラメーター期限を受け取り、2つのパラメーターを含みます
- DidTimeoutタイムアウト
- timeRemaining（）現在のフレームの残りのミリ秒数
1フレームでのマルチタスクの例
let taskQueue = [
() => {
console.log('task1 start')
console.log('task1 end')
},
() => {
console.log('task2 start')
// sleep(950)
console.log('task2 end')
},
() => {
console.log('task3 start')
console.log('task3 end')
}
]
const performUnitWork = (deadline) => {
// 取出第一个队列中的第一个任务并执行
console.log(`此帧的剩余时间为: ${
deadline.timeRemaining()}`)
taskQueue.shift()()
}
const workloop = (deadline) => {
// 如果此帧剩余时间大于0或者已经到了定义的超时时间（上文定义了timeout时间为1000，到达时间时必须强制执行），且当时存在任务，则直接执行这个任务
// 如果没有剩余时间，则应该放弃执行任务控制权，把执行权交还给浏览器
while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && taskQueue.length > 0) {
performUnitWork(deadline)
}
// 如果还有未完成的任务，继续调用requestIdleCallback申请下一个时间片
if (taskQueue.length > 0) {
window.requestIdleCallback(workloop, {
timeout: 1000 })
}
}
requestIdleCallback(workloop, {
timeout: 1000 })
各タスクでスリープが16ミリ秒を超える場合、タスクは複数のフレームで実行されます。
