プリロードスキャナについて調べた
はじめに
パフォーマンス改善を調べていく中でプリロードスキャナという私が知らない単語に出会ったのでまとめました。基本的にはこちらのページから引用させてもらっています。
プリロードスキャナとは
ページ速度の最適化で見落とされがちな点として、ブラウザの内部について少し理解しておく必要があります。ブラウザは、デベロッパーが行えない方法でパフォーマンスを改善するために、特定の最適化を行います。
内部ブラウザの最適化として、ブラウザのプリロード スキャナがあります。
すべてのブラウザには、未加工のマークアップをトークン化してオブジェクトモデルに変換するメインの HTML パーサーがあります。<link> 要素で読み込まれたスタイルシートや、async 属性または defer 属性のない <script> 要素で読み込まれたスクリプトなど、ブロックするリソースが検出されるまで、この処理は順調に進みます。
- トークン化
<div class="box"> → 「開始タグ」「要素名：div」「属性：class="box"」など
CSS ファイルの場合、スタイルなしコンテンツのフラッシュ（FOUC）を防ぐためにレンダリングがブロックされます。これは、スタイルが適用される前にスタイルなしのページが一瞬表示される現象です。
また、defer 属性または async 属性のない <script> 要素が検出されると、ページの解析とレンダリングがブロックされます。
これは、プライマリ HTML パーサーがまだ処理を行っている間に、特定のスクリプトが DOM を変更するかどうか、ブラウザが確実に把握できないためです。そのため、ブロックされた解析とレンダリングの影響が軽微になるように、JavaScript をドキュメントの最後に読み込むのが一般的でした。
このような理由から、ブラウザは解析とレンダリングの両方をブロックする必要があります。ただし、通常のHTMLパーサーが何かの理由で処理を止めてしまうと、下記のような問題があります。
- 他の重要なファイル（CSS、JavaScript、画像など）の発見が遅れる
- ページの表示が遅くなってしまう
そこで、ブラウザはプリロードスキャナと呼ばれるセカンダリ HTML パーサーを使用して、これらの問題を軽減するよう最善を尽くしています。
プリロードスキャナは、元のマーカーアップを調べて、プライマリ HTML パーサーが検出する前に、その場で取得するリソースを見つけます。
例えば、メインパーサーが<script>で止まっている間に、プリロードスキャナが<img src="photo.jpg">や<link href="style.css">などを見つけると、すぐにダウンロードを開始します。
動作イメージ
- 稼働開始
HTMLの読み込み開始と同時に、メインパーサーとプリロードスキャナが並行稼働開始 - 並行スキャン
- メインパーサー
構文解析 → DOMツリー構築 - プリロードスキャナ
軽量スキャン → リソース発見
- メインパーサー
- メインパーサーブロック発生
- メインパーサー
ブロック中（JavaScript実行など） - プリロードスキャナ
スキャン継続 → さらなるリソース発見＆ダウンロード
- メインパーサー
- ブロック解除後
- メインパーサー
処理再開 → 既にダウンロード済みリソースを活用 - プリロードスキャナ
スキャン継続 → さらなるリソース発見＆ダウンロード
- メインパーサー
参考文献
Discussion