CSS がダウンロードされる前に domcontentloaded (青線) が完了するのはなぜですか?
认证0级讲师
1. ブラウザはターゲット HTML ファイルの解析を開始し、実行フローの順序はトップダウンです。 2. HTML パーサーは HTML 構造を基本的な DOM (ドキュメント オブジェクト モデル) に変換します。DOM ツリーが構築された後、DomContendLoaded イベントがトリガーされます。 3. CSS パーサーは、CSS を CSSOM (Cascading Style Sheet Object Model)、スタイル情報のみを含むツリーに解析します。 4. CSSOM と DOM が結合されてレンダリング ツリーが形成され始め、各ノードに特定のスタイル情報が含まれ始めます。 5. レイアウト段階であるレンダリングツリー内の各ノードの位置情報を計算します。 6. レイアウトされたレンダリングツリーをインターフェースに表示します。
domcontentloaded 自体は HTML タグの読み込みと解析が完了した時点であり、スタイルシートを待つ必要はありません。
domcontentloaded
リンクメソッドはWebページの読み込みと同時にCSSを読み込みます
DOMContentLoaded イベントは、スタイルシート、画像、サブフレームが完全にロードされるのを待たずに、最初の HTML ドキュメントのロードと解析が完了したときに発生します。 参考: https://developer.mozilla.org...
まず第一にcss下载不会阻塞网页渲染，一个网页由html和资源资源组成，其他资源的下载不会影响到htmlファイル自体は同時にダウンロードされます。
css
html
DOM と CSSOM は独立したデータ構造です参考: https://developers.google.com...
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
1. ブラウザはターゲット HTML ファイルの解析を開始し、実行フローの順序はトップダウンです。
2. HTML パーサーは HTML 構造を基本的な DOM (ドキュメント オブジェクト モデル) に変換します。DOM ツリーが構築された後、DomContendLoaded イベントがトリガーされます。
3. CSS パーサーは、CSS を CSSOM (Cascading Style Sheet Object Model)、スタイル情報のみを含むツリーに解析します。
4. CSSOM と DOM が結合されてレンダリング ツリーが形成され始め、各ノードに特定のスタイル情報が含まれ始めます。
5. レイアウト段階であるレンダリングツリー内の各ノードの位置情報を計算します。
6. レイアウトされたレンダリングツリーをインターフェースに表示します。
domcontentloaded自体は HTML タグの読み込みと解析が完了した時点であり、スタイルシートを待つ必要はありません。リンクメソッドはWebページの読み込みと同時にCSSを読み込みます
DOMContentLoaded イベントは、スタイルシート、画像、サブフレームが完全にロードされるのを待たずに、最初の HTML ドキュメントのロードと解析が完了したときに発生します。
参考: https://developer.mozilla.org...
まず第一に
css下载不会阻塞网页渲染，一个网页由html和资源资源组成，其他资源的下载不会影响到htmlファイル自体は同時にダウンロードされます。DOM と CSSOM は独立したデータ構造です
参考: https://developers.google.com...