すべてのブラウザは、少なくとも 1 つの埋め込みタグまたは少なくとも 1 つの外部 CSS ファイルがダウンロードされるとすぐにレンダリングを開始し<style>ますか? それとも、ページにリンクされているすべての外部 CSS ファイルがダウンロードされるまで待機しますか?
2 に答える
2
外部スクリプトまたはスタイルシートへのすべての明示的な参照は、リソースがダウンロードされて実行されるまで、後続のすべてのページ レンダリングをブロックします。
この記事「ブラウザーのしくみ」ではより詳細に説明されており、参考文献の 1 つは公式のCSS 2.1 処理モデルです。これは、特に6つのステップから構成されています
- ...
- ...
- ターゲット メディア タイプに指定されているドキュメントに関連付けられているすべてのスタイル シートを取得します。
- ...
- ...
- フォーマット構造をターゲットメディアに転送する
于 2013-02-22T19:50:58.327 に答える
0
HTML の場合、レンダリング エンジンはできるだけ早くコンテンツを画面に表示します。レンダリング ツリーの構築とレイアウトを開始する前に、すべての HTML が解析されるまで待機しません。一方、スタイル シートには別のモデルがあります。概念的には、スタイル シートは DOM ツリーを変更しないため、スタイル シートを待ってドキュメントの解析を停止する理由はないように思われます。ただし、ドキュメントの解析段階でスクリプトがスタイル情報を要求するという問題があります。スタイルがまだ読み込まれて解析されていない場合、スクリプトは間違った応答を取得し、明らかにこれが多くの問題を引き起こしました。エッジケースのようですが、非常に一般的です。
ブラウザは、リソースのダウンロードのために多くのスレッドを同時に実行します。スタイルシート、html、スクリプトはすべて別のスレッドで実行されます。html の場合、ブラウザーはすべてのコンテンツの作成DOM treeを開始するのを待たず、スタイル データが利用可能になるとすぐにサイド バイ サイドrender treeも構築されます。つまり、ブラウザーはスタイル ルール用にメモリ内にマップ ツリーを作成しますが、すべての css がダウンロードされない限り、それを描画しません。
Firebug で、すべての css が非同期的にダウンロードされ、スクリプトが css を変更し、レンダー フレームが再作成されたため、DOM が何度も変更されたことに気付いたかもしれません。
参考までに: Firefox は、ロードおよび解析中のスタイル シートがある場合、すべてのスクリプトをブロックします。Webkit は、アンロードされたスタイル シートによって影響を受ける可能性のある特定のスタイル プロパティにアクセスしようとした場合にのみ、スクリプトをブロックします。
于 2013-02-22T20:00:04.853 に答える