こんにちは！Webの深淵を覗き込もうとしているあなたへ。
ブラウザの仕組みと聞くと、「なんだか難しそうだな…」と身構えてしまうかもしれませんね。でも大丈夫です。ブラウザという巨大なエンジンも、実は「お腹を空かせた職人さん」が、限られた時間の中でいかに効率よく仕事を片付けるか、という物語に過ぎないんです。
今日は、そんなブラウザの「頭脳」であるメインスレッドとイベントループという、少し奥深くて最高に面白い世界へご案内します。
—
1. ブラウザは「究極のマルチタスク職人」
想像してみてください。あなたは今、小さなお店を一人で切り盛りしています。
お客さん（ユーザー）がHTMLという「注文票」を持ってきて、あなたはそれを受け取り、料理を作り、お皿に盛り付けて提供します。
この時、あなた（メインスレッド）は一度に一つのことしかできません。でも、手際よくタスクをこなさないと、お客さんはすぐに帰ってしまいます。この「手際の良さ」を実現しているのがイベントループという仕組みです。
タスクの行列（キュー）を理解しよう
ブラウザには大きく分けて2つの「待ち行列」があります。
1. タスクキュー（マクロタスク）:
「クリックされたよ！」「通信が終わったよ！」という大きなお仕事が並ぶ列です。
2. マイクロタスクキュー:
「ちょっとこれ、すぐに確認して！」という、緊急度が高い短いお仕事（Promiseの`.then`など）が並ぶ列です。
ルールは一つ： 「メインスレッドが空いたら、まずはマイクロタスクを全部片付ける。その後で、タスクキューから一つだけタスクを取り出して処理する」という約束事です。
—
2. レンダリングパイプライン：お皿を並べるタイミング
ここが一番のつまずきポイントです。ブラウザは「タスクを処理する」だけではなく、「画面を更新する（レンダリング）」という重労働もこなさなければなりません。
この「画面を描くタイミング」をコントロールしているのが、`requestAnimationFrame` です。
- タスク処理: データの計算やJSの実行
- マイクロタスク: データの微調整
- requestAnimationFrame: 「画面を書き換える直前」の予約席
- レンダリング: 実際に色を塗って画面に表示
ブラウザは、このサイクルを1秒間に60回（約16msごと）繰り返しています。このリズムを崩さないことが、サクサク動くWebサイトを作る秘訣です。
—
3. コードで体験する「順番の魔術」
言葉だけだと少し硬いので、実際にブラウザがどう動いているか見てみましょう。下のコードをブラウザのコンソールに貼り付けてみてください。
console.log(“1: 最初のタスク”);
// マイクロタスク（緊急のお仕事）
Promise.resolve().then(() => {
console.log(“2: マイクロタスク（優先順位が高い！）”);
});
// タスクキュー（普通のお仕事）
setTimeout(() => {
console.log(“3: タスクキュー（遅れてやってくる）”);
}, 0);
// レンダリング直前の予約席
requestAnimationFrame(() => {
console.log(“4: requestAnimationFrame（画面を描く直前！）”);
});
console.log(“5: 最初のタスク終了”);
なぜこの順番になるの？
結果を見ると、`1 → 5 → 2 → 4 → 3` の順で表示されるはずです。
- 1と5が先に実行されるのは、メインスレッドが今やっている「同期処理」だからです。
- 2がすぐ後に来るのは、「メインスレッドが空くのを待たずに、今すぐ処理しろ！」というマイクロタスクの特権です。
- 4は、ブラウザが「よし、画面を描く準備をしよう」とした瞬間に呼ばれます。
- 3は、最後です。`setTimeout`は「最短で0秒後」と言っても、あくまでタスクキューの最後尾に並ぶしかないのです。
—
4. 現場からのメッセージ：無理をさせないで
開発をしていると、つい「重たい計算」をメインスレッドで実行してしまいがちです。でも、そうするとブラウザは画面の更新を止め、ユーザーは「カクカクして動かない！」と不満を感じてしまいます。
- 重たい計算はWeb Workerへ: メインスレッドとは別の「別働隊」に任せましょう。
- DOM操作は一気に: チリも積もれば山となります。細かくDOMを触るより、一度にまとめて更新するほうがブラウザは喜びます。
「ブラウザは忙しい」ということを知っているだけで、あなたの書くコードはぐっと優しく、そしてプロフェッショナルなものに変わります。
最初は分からなくても全く問題ありません。こうして「ブラウザの気持ち」を想像しようとした、その一歩がすでに素晴らしいエンジニアへの道なんです。
今日からブラウザを開くとき、「今この子はどんなタスクをこなしているのかな？」と少しだけ気にしてみてくださいね。きっと、今までとは違ったWebの世界が見えてくるはずですよ！
コメント