ホームページ  >  記事  >  ウェブフロントエンド  >  CSS スタイル ファイルはどこに配置する必要がありますか?

CSS スタイル ファイルはどこに配置する必要がありますか?

青灯夜游
青灯夜游オリジナル
2021-07-22 15:48:074033ブラウズ

css スタイル ファイルは、HTML の上部の head に配置する必要があります。これにより、ページのパフォーマンスが向上します。 CSS ファイルをヘッダーに配置し、HTML を読み込んで DOM ツリーを生成するときに、同時に DOM ツリーを描画できるため、ちらつきや白画面、レイアウトの混乱を防ぐことができます。

CSS スタイル ファイルはどこに配置する必要がありますか?

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

css スタイル ファイルは、HTML の先頭の head に配置する必要があります。

head に CSS を入れると、ページのパフォーマンスが向上する可能性があります。

CSSはヘッダーに配置されており、HTMLを読み込んでDOMツリーを生成する際に、同時にDOMツリーを描画することができます。これにより、ちらつき、白い画面、またはレイアウトの混乱を防ぎます。

より良いユーザー エクスペリエンスを提供するために、ブラウザのレンダリング エンジンは、できるだけ早く画面にコンテンツを表示しようとします。DOM ツリーを構築してレイアウトする前に、すべての HTMl 要素が解析されるまで待機しません。 , そのため、コンテンツの一部が解析されて表示されます。言い換えれば、ブラウザは不完全な DOM ツリーと CSSOM をレンダリングして、白画面の時間をできるだけ早く短縮できます。

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

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

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

以上がCSS スタイル ファイルはどこに配置する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。