「フレームレート」は、1秒間の動画で見せる静止画の枚数(コマ数)です。単位は、「FPS」(frames per second)で、「コマ/秒」を表します。
スクリーンのフレームレートは60コマ/秒(1秒に1000ミリ秒を含める => 一コマは1000ms/60 = 16.666666ms)
例えば、4時間ごとにご飯を食べる。もし食べた過ぎたら、4時間を経っても、お腹が空かないので、食べない。次の給食時間は遅延されます。
Reactのレンダ原理は同じです。ブラウザに処理されるコードの内容は多過ぎて、16.66ms以内処理できなかったら、次のフレームの処理を行わない。次のフレームは遅延されたので、ユーザは遅い感じをする。
1コマ(1フレーム)ごとにJSとレンダ処理できる。JSの処理とレンダは順番に処理ので、同時に処理できない。ですから、あるJSの処理任務を行う時間長過ぎたら、ブラウザはレンダの処理を遅延する。
- MouseとKeyboardイベントは最優先。(touch, wheel, click, keypressイベント)
- SetTimeOutとSetIntervalを処理。
- ページイベントを処理。(begin frame)
- requestAnimationFrame callbackを処理
- レンダ開始:Layoutの処理開始。
- レンダ終了:Paintの処理完了。