CSS スタイルシートはドキュメントのどの領域に存在しますか?

CSS スタイル シートは、ドキュメントの「ヘッド」領域に存在します。 CSS が下部に配置されている場合、ページは段階的にレンダリングできますが、CSS がダウンロードされて解析された後、レンダリングされたテキストと画像を新しいスタイルに従って再描画する必要があるため、これは悪いユーザーです。経験。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css スタイル シートは、HTML ドキュメントの上部の head に存在します。

#why?

<link rel="stylesheet" href="home.css">

リンク タグの href (ハイパーテキスト参照) 属性は、ハイパーテキスト参照を表します。CSS が href 参照を使用すると、ブラウザはそれを認識します ドキュメントは CSS であり、並行してダウンロードされます。現在のドキュメントのロードは停止しません。HTML をロードして DOM ツリーを生成するときに、DOM ツリーを同時にレンダリングできます。これにより、ちらつき、白い画面、または混乱を防ぐことができますレイアウト。

最も理想的な状況では、ブラウザがダウンロードした CSS を徐々にレンダリングし、徐々にページをユーザーに表示することが望まれます。ただし、スタイルが変更されたときにページ要素が再レンダリングされるのを避けるために、ブラウザーはコンテンツの段階的なレンダリングをブロックし、すべてのスタイルが読み込まれるのを待ってからページを一度にレンダリングします。

CSS ファイルが一番下に配置されている場合、ブラウザはコンテンツの徐々にレンダリングを妨げます。ブラウザが最後の CSS ファイルがダウンロードされるのを待っている間、「白い画面」が表示されます (新しい接続が開かれ、テキストが最初に表示され、画像が最後に表示され、スタイルが最後に表示されます)。これは非常に深刻です。ネットワーク速度が非常に遅い場合、CSS のダウンロード時間が比較的長くなり、当然のことながらユーザーに長時間「白い画面」が表示され、ユーザー エクスペリエンスが非常に悪くなるからです。

CSS を一番下に置くと、ページは徐々にレンダリングされます。ただし、CSS がダウンロードされて解析された後、レンダリングされたテキストと画像を新しいスタイルに従って再描画する必要があります。悪いユーザーエクスペリエンスです。

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSS スタイルシートはドキュメントのどの領域に存在しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。