CSSは解析とレンダリングをブロックするのか？詳しい分析

Posted at 2025-01-28

CSS の読み込み、解析、および適用は、Web パフォーマンス最適化において非常に重要なトピックです。このプロセスを理解することは、ページの読み込み時間やユーザー体験を向上させる上で不可欠です。以下では、CSS が DOM の解析やレンダリングを妨げるかどうか、そのメカニズムについて詳しく説明します。

CSS の読み込みと DOM 解析

DOM 解析

DOM（Document Object Model）の解析とは、ブラウザが受信した HTML バイトストリームを DOM ツリーに変換するプロセスを指します。
HTML ドキュメントの解析中、非ブロッキングリソース（例えば非同期スクリプト）に遭遇すると、解析器はリソースを並行してダウンロードしながら文書の解析を続行します。

CSS は DOM 解析を妨げるか？

CSS 自体は DOM の解析を妨げません。つまり、ブラウザは HTML を引き続き解析して DOM ツリーを構築します。
しかし、CSS は DOM のレンダリングと JavaScript の実行を妨げます。これは、関連する CSS が解析され（つまり、CSSOM ツリーが完成し）ない限り、ブラウザがレンダリング操作を実行しないためです。これは、ページを画面上で正しく表示し、リフロー（reflow）やリペイント（repaint）を回避する必要があるためです。

ブラウザが HTML を解析して DOM ツリーを生成する際、CSS ファイルも並行してダウンロードされ、CSSOM（CSS オブジェクトモデル）の構築が開始されます。DOM と CSSOM の構築は並行して行われるため、CSS のダウンロードや解析が DOM の構築を妨げることはありません。

CSSOM ツリーとレンダリング

CSSOM ツリー：

CSSOM（CSS オブジェクトモデル）は、DOM と並行して構築されるデータ構造で、ページ内のすべての CSS 情報を含みます。ブラウザはこれを利用してレンダリングツリーを構築します。
ブラウザが <link> タグや <style> タグに遭遇すると、レンダリングを一時停止し、CSS の読み込みと解析を優先して CSSOM ツリーを構築します。

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

レンダリングツリーは、DOM ツリーと CSSOM ツリーを組み合わせた結果であり、ブラウザがレンダリングするコンテンツを反映しています。
レンダリングツリーの構築には、CSSOM ツリーの完成を待つ必要があります。なぜなら、レンダリングツリーにはすべての DOM 要素のスタイル情報が必要だからです。

以下の図を参考にしてください：

CSS の読み込みが JavaScript をブロックする理由

スタイル計算の正確性を確保するため
JavaScript が DOM を変更したりスタイルを計算したりしようとする場合、CSS がまだ読み込まれて解析されていないと、JavaScript が取得するスタイル情報が正確でない可能性があります。この問題を回避するため、ブラウザはすべての関連する CSS が読み込まれて解析された後に JavaScript を実行する必要があります。
リフローとリペイントの回避
CSSOM が未完成の状態で JavaScript の実行が許可されると、不完全なスタイル情報に基づいて DOM を変更する可能性があります。その結果、CSSOM が構築完了後にリフロー（reflow）やリペイント（repaint）が必要になり、ページのレンダリング効率が大幅に低下します。
解析順序の依存性
ブラウザが HTML を解析中に <link rel="stylesheet" href="..."> を検出すると、直ちに CSS の読み込みを開始します。一方、<script> タグに遭遇すると（async や defer 属性がない場合）、DOM の解析を一時停止してスクリプトの実行を待ちます。このとき、CSS がまだ読み込み中だと、スクリプトが未確定のスタイル情報に依存する可能性があるため、ブラウザは CSSOM が完成するまでスクリプトの実行を待機します。

JavaScript で CSS を記述した場合、DOM のレンダリングをブロックするか？

JavaScript で CSS を記述した場合に DOM のレンダリングがブロックされるかどうかは、スタイルがどのように適用され、いつ適用されるかに依存します。この問題は、ブラウザのレンダリングフロー、特に JavaScript、CSS、DOM の相互作用に関連しています。いくつかの観点からこの問題を考察できます：

要素スタイルの直接変更：

JavaScript を使用して DOM 要素の style 属性を直接変更する場合（例：element.style.color = 'red';）、この操作は通常 DOM の解析を妨げません。ただし、スタイルを再計算し、リフロー（reflow）やリペイント（repaint）が発生する可能性があるため、レンダリングプロセスがブロックされることがあります。

リフロー（Reflow）： 要素のサイズ、構造、または特定のプロパティが変更されると、ブラウザは要素の位置とサイズを再計算する必要があります。
リペイント（Repaint）： 要素の視覚的な外観（色や境界線など）が変更された場合に発生しますが、サイズや構造は変更されません。

`<style>` または `<link>` タグの動的挿入：

JavaScript を使用して <style> や <link> タグを動的に挿入した場合、レンダリングに影響を与えることがあります：

レンダリングのブロック： ブラウザは、新しく挿入された CSS ルールを解析してからレンダリングを続行します。この操作は、特に CSS リソースが大きい場合やネットワーク条件が悪い場合に、顕著なレンダリングブロックを引き起こす可能性があります。
パフォーマンスへの影響： 頻繁な操作、例えばループ内で複数回 <style> タグを挿入すると、リフローやリペイントが繰り返され、ページパフォーマンスが著しく低下する可能性があります。

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