Web

Webページが読み込まれる際、HTMLは分割されてパースされます

投稿日:2021年9月23日 更新日:

1. はじめに

この記事では、Webページが読み込まれる際、HTMLが分割されて段階的にパースされる様子を観察します。

2. 前提知識

  1. (HTML)パースは、HTMLを読み込んでDOMツリーという「HTML要素から構成される木構造」を構築する処理を指します。
  2. これとは別に、CSSを元に CSSOMツリーが構築されます(装飾を担当)。
  3. DOMツリーとCSSOMツリーから、レンダリングツリーが構築されます。
  4. レンダリングツリーができた上で、画面のレイアウトやレンダリングが行なわれ、画面にWebページが表示されます。
  5. HTMLファイルの途中までの情報を元にしても、以上の処理を行うことができます。

以下の記事も参考にしてください。

Web

ウェブブラウザがページを取得して表示するまでの流れ

2018.11.05

3. 方法

Chrome ブラウザのデベロッパーツール (DevTools) が備えている [Performance] パネルで、Webページの読み込み処理を解析させ、その結果を観察します。

4. 解析した結果を観察する

とあるWebページを、[Performance] パネルで解析しましたので、その結果を紹介します。

まず、このWebページのHTMLファイルは、654行あります(下画像参照)。

[Sources]パネルで htmlファイルを表示しています

ここから、[Performance]パネルで行った解析の結果画面を載せていきます。

1回目のHTMLパース処理

※ 横軸は時間で、左から右に時間が進みます。

画面中央左端あたりの青い四角の部分で、HTMLファイルが読み込まれています。そこから下の部分では、Mainスレッドで実行された処理が時系列で表示されています。赤枠で囲われた部分が1回目のパース処理です(このとき、この部分を選択状態にしていたので赤枠がついています)。ここの詳細情報が画面の下側で表示されているのですが、先頭に「Parse HTML」という表示があるので、HTMLをパースしていることが分かります。そして、下の方の Range の部分に [0…103] とあるのは、HTMLファイルの0行目から103行目までをパースしたことを意味しています(1からではなく、0からカウントしているようです)。

この赤枠のすぐ下の部分では、パース中に見つかったCSSファイルやJavaScriptファイルを取得するためにリクエストを送信している四角があります(細すぎてこの画像では分かりづらいと思います)。画像の中央まで視線を上げると、そのあたりで紫の四角 (CSSファイル)、オレンジの四角 (JavaScriptファイル) が現れているのはそのためです。

2回目のHTMLパース処理

次の画像(上の画像です)では、赤枠が右の方に移動しました。ここが 2回目のHTMLパース処理です。Range の行では [104…365] とあり、104行目から365行目までをパースしていることが分かります。

3回目のHTMLパース処理(中断?)

3回目のHTMLパースでは、Range の部分が [366…365] というおかしな数字になっています。ここで赤枠のすぐ右側を見ると、しばらく何も処理が行なわれていません。恐らくですが、ここでは既にリクエストを送信したCSSファイル (紫色) が取得され、CSSOMが構築されるのを待っているのだと思われます。CSSファイルをリクエストすると、そのファイルを取得してその時点でのCSSOMが構築されるまで、レンダリング処理がブロックされるためです(CSSOMがないとレンダリングツリーが構築できないため。レンダリングツリーがないとレンダリングができません)。このとき、ブラウザはここまでのHTMLとCSSで一旦レンダリングまで行うことがユーザーから見て有益であると判断した可能性があります。というわけで、HTMLパースの終了地点を365行目に戻すことにより、次回は再度366行目から再開できることになります。

4回目のHTMLパース処理

4回目では、366行目から613行目までをパースしています。

5回目のHTMLパース処理

5回目にして、ようやくHTMLファイルの最後の行までパースされました (最後の行は閉じタグなので行数として表示されていないのだと思われます)。

HTMLパースにより、この時点で一旦 DOMツリーが完成されていますが、この後、JavaScript が実行されるため、JavaScriptの処理によってDOMツリーが操作される可能性があります。変更された場合は、その部分だけパース処理が行なわれます。

ということで、HTMLが分割されてパースされる様子を観察しました。

5. おわりに

Chrome のデベロッパーツールはどなたでも使えますので、是非お好みのWebページで [Performance] パネルでの解析を行ってみてください。

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Glitch

Glitch に DokiWiki を設置しようとして失敗しました

Glitch に DokuWiki を設置しようとしたのですが、残念ながら失敗してしまいました。ここにその記録を残しておこうと思います。

Web

Service Worker を使ってオフラインでも閲覧できるウェブページを作る方法

Service Worker を使ってオフラインでも閲覧できるウェブページを作る方法について説明します。

Web

AMP for WordPress プラグインを利用した AMP対応をやめる方法

AMP for WordPress プラグインを使って WordPressサイトをAMP対応する手順 では、AMP for WordPress プラグインの利用方法について説明しましたが、今回のその逆 …

Chrome

Chrome のアドレスバーから任意のサイトの検索機能を使用する方法

目次1. Chrome の検索エンジン管理機能2. 任意サイトの検索機能を Chrome に追加して使用する1. アルクのサイトで検索したときの URL を調査する2. 検索エンジンとして追加する3. …

Web

Material の Icons (アイコン)を導入する手順

2020年8月:Material design icons 側に変更があり、手順が変わってしまったようです。 目次1. はじめに2. Icons の導入手順2-1. Google Web Fonts …