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

[![表紙](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3967621/1a4f9f92-c75b-0c05-887a-8f8e62e63c46.png)](https://leapcell.io/?lc_t=q_cssblock)

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 要素のスタイル情報が必要だからです。

以下の図を参考にしてください：
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3967621/21e3dd37-a080-cd1f-8ef0-79f6dbed0c12.png)

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

1. **スタイル計算の正確性を確保するため**  
   JavaScript が DOM を変更したりスタイルを計算したりしようとする場合、CSS がまだ読み込まれて解析されていないと、JavaScript が取得するスタイル情報が正確でない可能性があります。この問題を回避するため、ブラウザはすべての関連する CSS が読み込まれて解析された後に JavaScript を実行する必要があります。

2. **リフローとリペイントの回避**  
   CSSOM が未完成の状態で JavaScript の実行が許可されると、不完全なスタイル情報に基づいて DOM を変更する可能性があります。その結果、CSSOM が構築完了後にリフロー（reflow）やリペイント（repaint）が必要になり、ページのレンダリング効率が大幅に低下します。

3. **解析順序の依存性**  
   ブラウザが 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 のレンダリングがブロックまたは遅延する可能性があります。

## まとめ

CSS の読み込みは DOM の解析をブロックしませんが、DOM のレンダリングをブロックします。また、CSS の読み込みは後続の JavaScript の実行をブロックします。

---

### [私たちはLeapcell、Node.jsプロジェクトのホスティングの最適解です。](https://leapcell.io/?lc_t=q_cssblock)

[![Leapcell](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3967621/7dc81adf-b2fa-b10e-6a81-771f88e58f66.png)](https://leapcell.io/?lc_t=q_cssblock)

[Leapcell](https://leapcell.io/?lc_t=q_cssblock)は、Webホスティング、非同期タスク、Redis向けの次世代サーバーレスプラットフォームです：

**複数言語サポート**

- Node.js、Python、Go、Rustで開発できます。

**無制限のプロジェクトデプロイ**

- 使用量に応じて料金を支払い、リクエストがなければ料金は発生しません。

**比類のないコスト効率**

- 使用量に応じた支払い、アイドル時間は課金されません。
- 例: $25で6.94Mリクエスト、平均応答時間60ms。

**洗練された開発者体験**

- 直感的なUIで簡単に設定できます。
- 完全自動化されたCI/CDパイプラインとGitOps統合。
- 実行可能なインサイトのためのリアルタイムのメトリクスとログ。

**簡単なスケーラビリティと高パフォーマンス**

- 高い同時実行性を容易に処理するためのオートスケーリング。
- ゼロ運用オーバーヘッド — 構築に集中できます。

[ドキュメントで詳細を確認！](https://docs.leapcell.io/)

[![Try Leapcell](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3967621/72ee2117-a1f1-8e08-6f1b-799cd1407277.png)](https://leapcell.io/?lc_t=q_cssblock)

Xでフォローする：[@LeapcellHQ](https://x.com/LeapcellHQ)

---

[ブログでこの記事を読む](https://leapcell.io/blog/how-css-affects-parsing-and-rendering)