こんにちは！Webブラウザの裏側の世界へようこそ。
フロントエンドのアーキテクチャを長年見つめてきた私ですが、ブラウザという小さな宇宙が、画面の裏側でどれほど必死に、そして賢く私たちを助けてくれているかを知ると、今でもワクワクしてしまいます。
今回は、Web制作やフロントエンドの学習を始めたばかりの方が「おっ、ブラウザってそんなことまで考えてくれてたのか！」と膝を打つような、「投機적パース（Speculative Parsing）」という裏技について、温かく、そして徹底的に紐解いていきましょう。
難しい専門用語に身構える必要は全くありませんよ。大丈夫です、一緒にゆっくり見ていきましょうね。
—
1. ページが表示されるまでの「ちょっとした渋滞」のドラマ
私たちが普段何気なくブラウザにURLを打ち込んだり、ブックマークをクリックしたりすると、画面にパッとWebサイトが表示されますよね。
この瞬間、ブラウザの内部（メインスレッドと呼ばれる中心人物）は、大忙しでお仕事しています。
届いたHTMLのテキストを上から順に1行ずつ読んでいき、DOMツリー（HTMLの要素を木構造にしたもの）を作っていくのです。これをHTMLパースと呼びます。
ここで、ちょっと想像してみてください。
ブラウザ君がHTMLを上から読んでいって、途中でこんなものに出くわしました。
ブラウザ君は真面目です。「おっと、外部のJavaScriptファイルが出てきたぞ。このスクリプトがページのデザインや動きをガラリと変えるかもしれないから、念のため読み込んで実行し終わるまで、先のHTMLを読むのはいったんストップしよう！」と、その場で立ち止まってしまいます。これが世に言う「パーサーブロック（解析のストップ）」です。
大きなJavaScriptやCSSが途中に挟まるたびに、ブラウザ君は足止めを食らってしまいます。
「これじゃあ、ページの表示が遅くなっちゃうよ！」――そう、これがWeb制作の現場で私たちが頭を悩ませるパフォーマンス低下の大きな原因の一つなんです。
—
2. そこで登場するのが「投機的パース（Speculative Parsing）」という名の有能なアシスタント
立ち止まってしまったメインスレッド。このままだとページの表示がどんどん遅くなってしまいます。
そこでブラウザは、「メインスレッドが止まっている間に、別の裏方スレッドに先読みをさせよう！」という、とっても賢いサボり…じゃなくて、素晴らしい効率化の仕組みを編み出しました。
これが「投機的パース（Speculative Parsing）」です。
身近な例え話：お買い物でのチームプレイ
スーパーのレジに並んでいるところを想像してください。
あなたが大きなカゴいっぱいに商品を入れてレジに並んでいます。レジの店員さん（メインスレッド）は、1つずつ商品のバーコードをピピッ、ピピッとお会計していきます（HTMLの解析）。
ところが、途中で「あれ、このお惣菜、温めますか？」と確認が必要な特殊な商品が出てきました。店員さんは手を止めて、お客さんに確認をとります。レジの列は一時ストップです。
ここで、もう一人の店員さん（先読みスレッド＝投機的パーサー）の登場です。
「おっ、レジの列が止まったな。じゃあ今のうちに、お客さんのカゴの中を先読みして、奥の棚から『次に必要になりそうなお皿や調味料』をこっそり裏で集めておこう！」
……どうでしょう？ メインの作業が止まっている隙に、次に必要になるであろう資材やファイルを「先回りしてこっそり集めておく」。これが、投機的パースの正体です。
—
3. ブラウザの中では何が起きているの？
投機的スレッドは、メインスレッドがJavaScriptの読み込みや実行で「うーん、どうしよう」とストップしている脇で、HTMLのテキストを先の方まで超高速でざっと斜め読み（スキャン）します。
そして、次のような「重たい外部リソース」を見つけ出します。
- 画像ファイル (`
`)
- スタイルシート (``)
- スクリプト (`