CSSの読み込みがDOMの解析とレンダリングに与える影響

CSSの読み込み、解析、適用：ウェブパフォーマンス最適化における重要なトピック

CSSの読み込み、解析、適用は、ウェブパフォーマンス最適化において重要なトピックです。このプロセスを理解することは、ページロード時間を最適化し、ユーザーエクスペリエンスを向上させるために不可欠です。以下では、CSSがDOMの解析とレンダリングをブロックするかどうか、そしてその背後にあるメカニズムについて詳しく探ります。

CSSの読み込みとDOMの解析

DOMの解析

DOM（Document Object Model）の解析とは、ブラウザが受信したHTMLバイトストリームをDOMツリーに変換するプロセスのことです。
HTMLドキュメントの解析中、パーサーが非ブロッキングリソース（非同期スクリプトなど）を検出すると、ドキュメントの解析を続行しながら、リソースを並行してダウンロードしようとします。

CSSはDOMの解析をブロックするか？

CSS自体はDOMの解析をブロックしません。つまり、ブラウザはHTMLの解析を継続し、DOMツリーを構築します。
ただし、CSSはDOMのレンダリングとJavaScriptの実行をブロックします。これは、DOMツリーは構築できますが、ブラウザは関連するCSSが解析されるまで（つまり、CSSOMツリーが構築されるまで）レンダリング操作を実行しないことを意味します。これは、ページが画面に正しく表示されるようにするため、リフローとリペイントの問題を回避するためです。

ブラウザがHTMLを解析してDOMツリーを生成する際、CSSファイルを並行してダウンロードし、CSSOM（CSS Object Model）の構築を開始します。DOMとCSSOMの構築は同時に行われるため、CSSのダウンロードと解析はDOMの構築をブロックしません。

CSSOMツリーとレンダリング

CSSOMツリー

CSSOM（CSS Object Model）は、DOMと並行するデータ構造であり、ページに必要なすべてのCSS情報が含まれています。ブラウザはこれを使用してレンダリングツリーを構築します。
ブラウザが<link>タグまたは<style>タグを検出すると、レンダリングを一時停止し、CSSの読み込みと解析を優先し、CSSOMツリーを構築します。

レンダリングツリーの構築

レンダリングツリーは、DOMツリーとCSSOMツリーを組み合わせた結果であり、ブラウザがレンダリングするコンテンツを表します。
レンダリングツリーは、すべてのDOM要素のスタイル情報が必要なため、CSSOMツリーが完成するまで構築できません。

このプロセスを図で視覚化できます。

なぜCSSの読み込みはJavaScriptをブロックするのか？

正確なスタイルの計算の保証：CSSが完全に読み込まれ解析されていない状態でJavaScriptがDOMを変更したり、スタイルを計算しようとすると、JavaScriptによって取得されるスタイル情報が不正確になる可能性があります。これを防ぐため、ブラウザはJavaScriptを実行する前に、関連するすべてのCSSが読み込まれ解析されることを保証し、スクリプトがDOM要素の最終的なスタイルを取得するようにします。
リフローとリペイントの回避：CSSOMが不完全な状態でJavaScriptの実行が許可された場合、不完全なスタイル情報に基づいてDOMを変更する可能性があります。CSSOMが構築されると、ブラウザは既にレンダリングされた要素をリフローおよびリペイントする必要がある場合があり、レンダリング効率が大幅に低下します。
解析順序への依存：HTMLの解析中、ブラウザが<link rel="stylesheet" href="...">タグを検出すると、すぐにCSSの読み込みを開始します。<script>タグ（asyncまたはdefer属性なし）を検出すると、DOMの解析を一時停止してスクリプトを実行します。CSSが完全に読み込まれていない場合、スクリプトの実行は不完全なスタイル情報に依存する可能性があります。したがって、ブラウザはスクリプトを実行する前にCSSOMの準備が完了するのを待ちます。

JavaScriptでCSSを記述するとDOMのレンダリングがブロックされるか？

JavaScriptでCSSスタイルを記述することがDOMレンダリングをブロックするかどうかは、スタイルがどのように、いつ適用されるかによって異なります。これには、ブラウザのレンダリングプロセス、特にJavaScript、CSS、およびDOMの関係が関与します。詳細に見ていきましょう。

要素のスタイルを直接変更する

CSSスタイルがJavaScriptでDOM要素のstyleプロパティを直接変更することによって適用される場合（例：element.style.color = 'red';）、通常、そのようなアクションはDOMの解析をブロックしません。ただし、ブラウザがスタイルを再計算し、リフローとリペイントをトリガーする必要があるため、レンダリングプロセスをブロックする可能性があります。

リフロー：要素のサイズ、構造、または特定のプロパティが変更された場合に発生し、ブラウザはそれらの位置とサイズを再計算する必要があります。
リペイント：要素の視覚的な外観（色や枠線など）が、そのサイズや構造に影響を与えずに変更された場合に発生し、ブラウザに要素の再描画を促します。

`<style>`または`<link>`タグを動的に挿入する

JavaScriptが<style>または<link>タグを<head>に動的に追加する場合、レンダリングに影響を与える可能性があります。

レンダリングのブロック：ブラウザは、レンダリングを続行する前に、新しく挿入されたCSSルールを解析するために一時停止する必要があります。これは、CSSファイルが大きい場合、またはネットワークの状態が悪い場合に、重大なレンダリングの遅延を引き起こす可能性があります。
パフォーマンスへの影響：ループ内で<style>タグを挿入するなど、繰り返しの操作は、繰り返しのリフローとリペイントを引き起こし、ページパフォーマンスに grave な影響を与える可能性があります。

JavaScriptでのCSSの不適切な処理は、特にスタイルが動的に生成され適用される場合、DOMレンダリングを実際にブロックまたは遅延させる可能性があります。