realoneme / fiberlearning

some docs of react fiber learning in JP

FiberでReactを作る原理

フレームレート Frame Rate

「フレームレート」は、1秒間の動画で見せる静止画の枚数（コマ数）です。単位は、「FPS」（frames per second）で、「コマ/秒」を表します。

スクリーンのフレームレートは60コマ/秒（１秒に1000ミリ秒を含める => 一コマは1000ms/60 = 16.666666ms）

例えば、４時間ごとにご飯を食べる。もし食べた過ぎたら、４時間を経っても、お腹が空かないので、食べない。次の給食時間は遅延されます。

Reactのレンダ原理は同じです。ブラウザに処理されるコードの内容は多過ぎて、16.66ms以内処理できなかったら、次のフレームの処理を行わない。次のフレームは遅延されたので、ユーザは遅い感じをする。

フレーム Frame

１コマ（1フレーム）ごとにJSとレンダ処理できる。JSの処理とレンダは順番に処理ので、同時に処理できない。ですから、あるJSの処理任務を行う時間長過ぎたら、ブラウザはレンダの処理を遅延する。

ブラウザが１コマでイベントを処理する段取り

1. MouseとKeyboardイベントは最優先。（touch, wheel, click, keypressイベント）
2. SetTimeOutとSetIntervalを処理。
3. ページイベントを処理。（begin frame）
4. requestAnimationFrame callbackを処理
5. レンダ開始：Layoutの処理開始。
6. レンダ終了:Paintの処理完了。