こんにちは！フロントエンド・アーキテクトの私です。
Webサイトを作っていて、「なんだか表示が遅いな……」と頭を抱えた経験はありませんか？ 画像やスタイルシートが読み込まれるのを、ブラウザがなんだかボーッと待っているように見えるあの瞬間。もどかしいですよね。
実は、あの裏側で、目立たないけれどめちゃくちゃ優秀な「裏方さん」が汗を流して働いてくれています。その名も「プリロードスキャナ（Preload Scanner）」。
今回は、このプリロードスキャナがブラウザの裏側でどんなファインプレーを見せているのか、難しい専門用語をできるだけ取っ払って、一緒に覗いていきましょう！ つまずきやすいポイントも優しくフォローするので、どうぞリラックスして読んでくださいね。
—
1. メインのHTMLパーサーは大忙しで、実は「視野が狭い」
私たちが書いたHTMLファイルがブラウザに届くと、ブラウザは上から順番に文字を読み解いていきます。これを担当するのが「HTMLパーサー」というメインの料理人のような存在です。
この料理人、真面目すぎて困った癖があります。それは、「目の前の作業に集中しすぎて、先々のことが見えていない」ということ。
例えば、HTMLの上の方でこんなコードに出会ったとします。
メインの料理人は、「おっと、スタイルシート（デザインの指示書）が出てきたぞ！これが読み終わるまで、次のHTMLを読むのをストップしよう！」と、そこでピタッと手を止めてしまいます。これを専門用語で「レンダリングブロック」と言ったりしますが、要するに「通行止め」が起きちゃうわけです。
「いやいや、ちょっと待って！ その下には画像（``タグ）や、読み込んでほしいJavaScript（`
コメント