【入門編】 ブラウザの投機的パース(Speculative Parsing) – Webブラウザの仕組み実践ガイド

こんにちは!フロントエンド・アーキテクトの私です。

日々、私たちが何気なくブラウザにURLを打ち込んだり、お気に入りのサイトを開いたりするとき、画面の裏側ではブラウザがものすごい猛ダッシュで仕事をしています。

「HTMLを上から順に読んで、画面を描画する」――これは基本中の基本ですが、実は今のWebブラウザは、ただ順番に読んでいるだけでは到底たどり着けないほどの「超・高速化」のテクニックを隠し持っています。

今回は、その中でも特にぶっ飛んだ凄腕の裏方機能である「投機的パース(Speculative Parsing)」について、難しい専門用語をなるべく取っ払って、温かく紐解いていきたいと思います。
「なんだか難しそう……」なんて身構えなくて大丈夫ですよ。一緒にゆっくり見ていきましょう!

—

1. まずはイメージしてみよう:お医者さんの「先読み」と似ている?

想像してみてください。あなたは今、風邪を引いてお医者さんに診察してもらい、お薬手帳といくつかの症状を伝えたところです。

お医者さんは、あなたが症状のすべてを話し終わるのをじっと待ってから、「じゃあ、この薬を出しましょう」とカルテに書き始めるでしょうか?
名医であれば、患者さんが話しはじめた段階で「あ、この咳の感じと熱の高さなら、あの薬とあの検査が必要になりそうだな」と、頭の中で先回りして準備を始めていますよね。そして、話し終わった瞬間に「はい、これどうぞ!」と処方箋を出す。

Webブラウザの「投機的パース」も、これとまったく同じことをやっています。

2. メインの仕組みで起きる「もどかしい渋滞」

Webブラウザは、HTMLファイルという「設計図」を上から1行ずつ読んで(パースして)、DOMツリーという画面の骨組みを作っていきます。

ここでちょっとした「意地悪な問題」があります。HTMLを上から読んでいくと、途中でこんなコードに出会うことがありますよね。

こんにちは、私のブログへようこそ!

このテキストは、JavaScriptの読み込みが終わるまで表示されません……?

ブラウザは真面目なので、`

シェアする
frontendintronationalをフォローする

コメント

タイトルとURLをコピーしました