【入門編】プリロードスキャナーの役割 – Webブラウザの仕組み実践ガイド

やあ、フロントエンドの世界へようこそ。ブラウザの深淵を覗こうとするその好奇心、最高に素敵だよ。

Webサイトを作っていると、「なぜか表示が遅いな……」と悩む瞬間があるよね。実は、ブラウザというやつは、私たちが書いたコードをただ順番に読むだけじゃなく、裏側でとんでもない「先読み」の魔法を使っているんだ。

今日は、その魔法の主役「プリロードスキャナー（Preload Scanner）」について、現場の知見を交えながら優しく紐解いていこう。

—

まず、ブラウザがHTMLを読み込む様子を「高級レストランの厨房」に例えてみよう。

メインの料理人（パーサー）は、届いたオーダー（HTML）を上から順番に丁寧に調理していく。野菜を切り、お肉を焼き、ソースを煮詰める……。この作業はとても真剣で、一度始めたら中断できない。

もし、HTMLの途中に``なんていう「ものすごく時間がかかる下準備」が必要な指示があったらどうなる？メインの料理人は「よし、このスクリプトが終わるまで他のことは一切ストップ！」と立ち止まってしまうんだ。これが、世間で言われる「レンダリングブロック」という厄介なやつだ。

でも、もし厨房に「見習いのアルバイト（プリロードスキャナー）」がいたらどうだろう？

メインの料理人が一生懸命調理している横で、見習いの子が「あ、次はあのお肉と、あそこの冷蔵庫にある野菜が必要だな」と先回りして、材料をキッチンに運んでおいてくれる。これがプリロードスキャナーの正体だよ。

ブラウザは、HTMLを上から解析している最中に、メインのパーサーが「ちょっと待った！」と停止している間も、別の裏側のスキャナーを走らせているんだ。

このスキャナーは、HTMLのテキストの中を高速でなぞりながら、次のような「急いで手に入れるべきもの」を血眼になって探している。

こんにちは、ブラウザの魔法へ！