こんにちは。Webの深淵を歩くエンジニアの皆さん。
ブラウザという名の「魔法の箱」が、どうやって皆さんの書いたコードを読み解き、画面に絵を描いているのか。今日は、その中でも特に「気が利く」技術であるLinkヘッダーによるリソースヒントについて、コーヒーでも飲みながらゆっくりお話ししましょう。
HTMLを書いていると、つい「どうやって要素を配置するか」に目が行きがちですよね。でも、実はブラウザにとって一番のストレスは、「次に何を読み込めばいいか分からない時間」なんです。
—
1. ブラウザの「お買い物」を想像してみてください
想像してみてください。あなたは今、巨大なスーパーマーケット（サーバー）にやってきました。
ブラウザは非常に働き者ですが、基本的には「言われたことしかやらない」素直な性格です。
1. HTMLという「買い物リスト」をまず受け取る。
2. リストを上から順に読んで、「あ、牛乳が必要だ」「次はパンが必要だ」とカゴに入れる。
3. レジ（描画）へ向かう。
これ、実はすごく非効率なんです。リストを読み終わるまで、牛乳がどこにあるかすら分からないんですから。もし、店に入る前に「今日は牛乳とパンを買うから、入り口で先に確保しておいて！」と指示できたら、買い物は一瞬で終わりますよね。
これが、今回解説する「Linkヘッダーによるプリロード（事前読み込み）」の正体です。
—
2. HTMLパースを待たない「先回り」の知恵
通常、ブラウザはHTMLを上から順に解析（パース）して、`` や `
コメント