【テクニカル・上級編】 HTMLパーサーの投機的パース（プリスキャン） – Webブラウザの仕組み実践ガイド

フロントエンドの最適化を語るとき、多くのエンジニアは「画像サイズ」や「バンドル容量」に目を向ける。しかし、ブラウザの内部で何が起きているかを知っている者は、まず「ブラウザがいかにしてネットワークのアイドル時間を殺そうと必死になっているか」に思いを馳せる。

今回は、WebブラウザのレンダリングエンジンがHTMLをパースする際、裏で行っている最も泥臭く、かつエレガントな最適化技術の一つ、「投機的パース（Speculative Parsing）」、あるいは「プリスキャナ（Preloader）」の深淵に潜る。

—

HTMLパースは、基本的にメインスレッドという「狭い路地」で直列的に行われる。しかし、DOM構築の途中で `

ブラウザのレンダリングエンジンは、常に「いかにしてメインスレッドを止めないか」という終わりのない戦いをしている。投機的パースは、その戦いの中で生まれた最も人間臭い（泥臭い）ハックの一つだ。

我々エンジニアがやるべきは、このプリスキャナの挙動を「想像する」ことだ。
「今、プリスキャナはこのリソースを見つけられているか？」「メインスレッドがリソースを要求したとき、既にネットワークキューは埋まっていないか？」

ブラウザは魔法ではない。ただひたすらに、我々が書いたコードを読み解き、少しでも速く画面を表示しようとあがいている巨大なマシンだ。そのマシンの内部構造を深く理解し、手助けしてあげることこそが、真のフロントエンド・スペシャリストの矜持と言えるだろう。

さあ、Chrome DevToolsの「Network」タブを開き、各リソースの優先度（Priority）を眺めてみてほしい。そこには、ブラウザが必死に先読みした跡が、鮮明に記録されているはずだ。