公開日: 2014 年 3 月 31 日
ブラウザはページをレンダリングする前に、DOM を構築して、 CSSOM ツリー。そのため、HTML と CSS の両方ができるだけ早くブラウザに提供されるようにする必要があります。
概要
- バイト→文字→トークン→ノード→オブジェクトモデル。
- HTML マークアップはドキュメント オブジェクト モデル（DOM）に変換され、CSS マークアップは CSS オブジェクト モデル（CSSOM）に変換されます。
- DOM と CSSOM は独立したデータ構造です。
- Chrome DevTools の [Performance] パネルでは、DOM と CSSOM の構築コストと処理コストをキャプチャして調査できます。
ドキュメント オブジェクト モデル（DOM）
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="style.css" rel="stylesheet" />
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg" /></div>
</body>
</html>
テキストを含むプレーン HTML ページから、できるだけシンプルなケースから始める 1 つの画像ですブラウザが、このページをどのように処理するのか見ていきます。
- 変換: ブラウザがディスクから HTML の未加工バイトを読み取ります。 特定の文字列に基づいて個々の文字に翻訳し、 （例: UTF-8）。
- トークン化: ブラウザは文字列を個別の文字列に変換します
トークン（W3C HTML5 標準で指定）
たとえば、
<html>、<body>、および 使用できます。各トークンには特別な意味と固有のルールセットがあります。 - 字句解析: 発行されたトークンは、プロパティとルールを定義する「オブジェクト」に変換されます。
- DOM の構築: HTML マークアップでは関係が定義されるため、 （一部のタグが他のタグに含まれている場合）は、 作成されたオブジェクトはツリーデータ構造でリンクされ、 元のマークアップで定義されている親子関係、つまり HTML オブジェクトは body オブジェクトの親であり、body はそのオブジェクトの親です。 段落オブジェクトを使用して、ドキュメントの表現全体が構築されるまで、このオブジェクトは更新されません。
このプロセス全体の最終的な結果が、このシンプルなサンプルページのドキュメント オブジェクト モデル（DOM）です。ブラウザでは以降このページを処理する際に、必ずこの DOM を使用します。
ブラウザは HTML マークアップを処理するたびに、バイトを文字に変換し、トークンを識別してトークンをノードに変換し、DOM ツリーを構築するという上記の全ステップを行う必要があります。このプロセスには多少時間がかかります。 処理する HTML が大量にある場合はなおさらです
Chrome DevTools を開いて、ページの読み込み中にタイムラインを記録すると、 このステップの実行にかかった 実際の時間を確認できます HTML の一部を DOM ツリーに変換するのに約 5 ミリ秒かかっています。1 つの このプロセスが大幅に長くなる可能性があります。作成時 スムーズなアニメーションであるため、ブラウザが 大量の HTML を処理できます。
DOM ツリーは、ドキュメント マークアップのプロパティおよび関係性をキャプチャしていますが、各要素がレンダリング時にどのように表示されるのかは示していません。こは CSSOM の範疇です。
CSS オブジェクト モデル（CSSOM）
ブラウザが基本ページの DOM を構築している間、
外部 CSS を参照するドキュメントの <head> 内の <link> 要素
スタイルシート: style.cssブラウザは、ページのレンダリングにはこのリソースが必要であると想定して、このリソースに対するリクエストを即座にディスパッチします。これにより、次のコンテンツが返されます。
body {
font-size: 16px;
}
p {
font-weight: bold;
}
span {
color: red;
}
p span {
display: none;
}
img {
float: right;
}
HTML マークアップ内で（インラインで）スタイルを直接宣言することもできますが、 CSS を HTML から独立させることで、コンテンツとデザインを デザイナーは CSS に取り組むことができ、デベロッパーは HTML に集中できます。 決定できます
HTML と同じく、取得した CSS ルールをブラウザで認識および処理できる状態に変換する必要があります。HTML プロセスを繰り返すことで、 HTML ではなく CSS の場合は次のようになります。
CSS のバイトが文字、トークン、ノードへと変換されていき、最終的に「CSS オブジェクト モデル」（CSSOM）というツリー構造にリンクされます。
CSSOM はなぜツリー構造をしているのでしょうか。ページ上のオブジェクトの最終的なスタイルセットを計算する際、ブラウザはまず、そのノードに適用される最も一般的なルールから開始します（たとえば、body 要素の子要素の場合は、すべての body スタイルが適用されます）。次に、より具体的なルールを適用することで、計算されたスタイルを再帰的に絞り込み、ルールを「下り（カスケード）」させます。
より具体的な例として、前述の CSSOM ツリーを考えてみます。body 要素の内部に配置されている <span> タグに囲まれたテキストは、フォントサイズ 16 ピクセルの赤色のテキストになります。font-size ディレクティブが、body から span にカスケード ダウンされています。ただし、span が
段落（p）タグを追加すると、その内容は表示されません。
また、前述のツリーは完全な CSSOM ツリーではなく、 には、スタイルシートでオーバーライドしたスタイルのみが表示されます。すべてのブラウザ 「ユーザー エージェント スタイル」とも呼ばれるデフォルトのスタイル セットが提供されます。 独自のものがない場合に見つかります。スタイルは、 できます。
CSS 処理にかかる時間を調べるには、DevTools でタイムラインを記録し、[Recalculate Style] イベントを探します。DOM 解析とは異なり、タイムラインには個別の [Parse CSS] エントリはありません。代わりに、この単一イベントの下で、解析、CSSOM ツリー構築、計算済みスタイルの再起計算がキャプチャされます。
トリアージ スタイルによる処理にかかる時間は最大 0.6 ミリ秒で、画面上の 8 つの要素に影響します。 無料ではありませんしかし、 8 元素は何から来たのでしょうか。CSSOM と DOM は、それぞれ独立したデータ構造となっています。 ブラウザが重要なステップを隠していることがわかりました。次に、 レンダリング ツリーが DOM と CSSOM をリンクします