CSS は Web ページのレンダリングをブロックしますか?

Question

CSS がダウンロードされる前に domcontentloaded (青線) が完了するのはなぜですか?

Answer 1

1. ブラウザはターゲット HTML ファイルの解析を開始し、実行フローの順序はトップダウンです。
2. HTML パーサーは HTML 構造を基本的な DOM (ドキュメント オブジェクト モデル) に変換します。DOM ツリーが構築された後、DomContendLoaded イベントがトリガーされます。
3. CSS パーサーは、CSS を CSSOM (Cascading Style Sheet Object Model)、スタイル情報のみを含むツリーに解析します。
4. CSSOM と DOM が結合されてレンダリング ツリーが形成され始め、各ノードに特定のスタイル情報が含まれ始めます。
5. レイアウト段階であるレンダリングツリー内の各ノードの位置情報を計算します。
6. レイアウトされたレンダリングツリーをインターフェースに表示します。

Answer 2

domcontentloaded 自体は HTML タグの読み込みと解析が完了した時点であり、スタイルシートを待つ必要はありません。

Answer 3

リンクメソッドはWebページの読み込みと同時にCSSを読み込みます

Answer 4

DOMContentLoaded イベントは、スタイルシート、画像、サブフレームが完全にロードされるのを待たずに、最初の HTML ドキュメントのロードと解析が完了したときに発生します。
参考: https://developer.mozilla.org...

Answer 5

まず第一にcss下载不会阻塞网页渲染，一个网页由html和资源资源组成，其他资源的下载不会影响到htmlファイル自体は同時にダウンロードされます。

Answer 6

DOM と CSSOM は独立したデータ構造です
参考: https://developers.google.com...