こんにちは。Webブラウザという「魔法の箱」の裏側を覗きに来てくれてありがとうございます。
普段私たちが何気なく見ているWebサイト。ページを開いた瞬間に画像がパッと表示され、スクロールも滑らかですよね。でも、その裏側ではブラウザが必死になって「今、何を優先してやるべきか？」という過酷なタスク管理を行っているんです。
今日は、そんなブラウザが「ちょっと手が空いた瞬間に、こっそり裏仕事を片付ける」ための魔法の道具、『`requestIdleCallback`』について、一緒に紐解いていきましょう。
—
ブラウザは「超多忙なレストランのキッチン」
まずは、ブラウザを「レストランのキッチン」に例えてみましょう。
- メインの仕事（シェフの料理）: HTMLを読み込み、CSSを計算し、画面に絵を描く（レンダリング）。これは、お客さん（ユーザー）を待たせないための最優先事項です。
- 裏の仕事（仕込み）: 分析データの送信、次に表示する画像のプリロード、複雑な計算など。
もし、シェフがいきなり「あ、今のうちに玉ねぎ切らなきゃ！」と、料理の最中に裏仕事を始めたらどうなるでしょう？ お客さんは「料理がまだ来ないぞ！」とイライラしてしまいますよね。
ブラウザも同じです。「画面の描画」を止めてまで裏仕事をすると、画面がカクついてユーザー体験が台無しになってしまうんです。
そこで登場するのが `requestIdleCallback`
そこで、ブラウザはこう考えました。
「よし、お客さんの料理（描画）が一通り終わって、次の注文が来るまでのほんの数ミリ秒の『隙間時間（アイドルタイム）』に、裏仕事を片付けよう！」
これが `requestIdleCallback` の正体です。「ブラウザの手が空いたら、この処理をやってね」と予約を入れておくAPIなんです。
コードで見てみよう
書き方は驚くほどシンプルです。
// ブラウザが暇になったら実行したい関数
function myBackgroundWork(deadline) {
// deadline.timeRemaining() で「あと何ミリ秒くらい暇か」がわかります
while (deadline.timeRemaining() > 0) {
console.log(“ブラウザが暇なので、少しだけ裏仕事をします！”);
// ここに重い計算処理などを少しずつ分割して書く
break; // 今回は一回だけ実行して終了
}
}
// ブラウザのアイドル時間を待ち受ける予約チケットの発行
requestIdleCallback(myBackgroundWork);
このコードの賢いところは、`deadline.timeRemaining()` というメソッドです。これを使えば、「あと1ミリ秒しかないなら、この重い処理は次回に回そう」といった「引き際」の判断ができるんです。なんて慎ましいんでしょうね。
—
初学者がつまずきがちな「勘違い」
ここで一つだけ、大切なことをお伝えしますね。
「じゃあ、全部の処理を `requestIdleCallback` に入れれば完璧じゃない？」と思うかもしれません。でも、それは危険です。
- やっていいこと: 分析データの送信、優先度の低いコンテンツの読み込み、検索のインデックス作成など。
- 絶対にダメなこと: 「画面の見た目を変えること」。
なぜか？ それは、ブラウザが「暇だ！」と思って実行しているその瞬間に、実はもう次のフレーム（画面の描画）の準備が始まっているかもしれないからです。そこで無理やり画面を書き換えると、かえって動きがガタついてしまいます。
「裏仕事は裏仕事らしく、画面の表舞台には手を出さない」。これが、熟練のWeb職人が守っている鉄則です。
—
大丈夫、焦らなくていいんです
最初は「アイドル時間なんて意識しなくてもサイトは動くし……」と感じるかもしれません。それでいいんです！
まずは、「ブラウザは常に一生懸命、画面を描画し続けているんだな」と想像することから始めてみてください。そして、もし今後、重い処理を書いて画面が少し重いなと感じたら、この `requestIdleCallback` という「お助けマン」を思い出してください。
Web開発の面白さは、こうしたブラウザの機嫌を伺いながら、最高に滑らかな体験をユーザーにプレゼントできるところにあると、私は信じています。
今日学んだことを、ぜひあなたのコードで試してみてください。何か一つでも「なるほど！」と思える瞬間があれば、あなたはもう立派なフロントエンド・エンジニアの入り口に立っていますよ。
それでは、また次回の深掘りでお会いしましょう！
コメント