なぜCSSをヘッドタグに配置する必要があるのか

考えてみてください。なぜcss 、 javascriptのようにbodyタグの末尾ではなく、 headタグに配置する必要があるのでしょうか?

口先だけではダメ、コードを見せてください。

さて、結果を得るためのコードをいくつか書いてみましょう。

chromeコンソールのちょっとしたコツをご紹介します。

ここに画像の説明を挿入

download速度を制限することは、テストに非常に役立ちます。詳細をはっきりと見ることができます。

download速度を 40kb/s に制限してテストを開始しましょう。

cssがbodyタグの最後に導入された場合

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
 <meta http-equiv="X-UA-compatible" content="ie=edge">
 <title>ドキュメント</title>
</head>
<本文>
 <h1>こんにちは世界</h1>
 <link rel="スタイルシート" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
</本文>
</html>

ブラウザで効果を確認してください:

bootstrap.min.cssファイルが読み込まれていない場合、Web ページにはすでに「Hello world」が表示されていますが、スタイルはデフォルトのスタイルであり、Web ページが 1 回レンダリングされていることを示しています。

ここに画像の説明を挿入

bootstrap.min.cssファイルが読み込まれると、Webページ上の「Hello world」のスタイルが変わり、フォントサイズも大きく変わります。そのため、Webページがreflowたと判断できます。

ここに画像の説明を挿入

CSS が head タグに導入される場合:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
 <meta http-equiv="X-UA-compatible" content="ie=edge">
 <title>ドキュメント</title>
 <link rel="スタイルシート" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<本文>
 <h1>こんにちは世界</h1>
</本文>
</html>

ブラウザで開いて効果を確認してください:

bootstrap.min.cssが読み込まれていない場合、Web ページには何も表示されず、現時点では Web ページがレンダリングされていないことが示されます。

ここに画像の説明を挿入

bootstarp.min.cssが読み込まれると、Web ページにbootstrapスタイルの「Hello world」が表示され、Web ページがレンダリングされたことが示されます。

ここに画像の説明を挿入

上記の 2 つの例から、次のことがわかります。

body タグの末尾に css を配置すると、 DOMTreeが構築された後、 RenderTreeが構築され、レイアウトが計算されてレンダリングされます。css を読み込んで解析した後、 CSSOMTreeが構築され、 DOMTreeでRenderTreeが再構築され、レイアウトが再計算されて Web ページがレンダリングされます。
CSS をheadタグに配置すると、まず CSS が読み込まれ、次に CSS が解析されてCSSOMTreeが構築されます。同時に、 DOMTreeが構築されます。CSSOMTree とDOMTreeが構築された後、 RenderTreeが構築され、レイアウトを計算して Web ページをレンダリングしCSSOMTree 。この 2 つを比較すると、 cssはheadタグに配置されており、 bodyタグの末尾に配置されたcssよりも少なくなっています。RenderTree RenderTree構築が 1 つ少なく、レイアウトの計算が 1 つ、Web ページのレンダリングが 1 つ少ないため、パフォーマンスが向上します。また、CSS が body タグの末尾に配置されると、Web ページに「裸の」HTML が短時間表示され、ユーザーエクスペリエンスに悪影響を及ぼします。

もう一つのちょっとしたコツをご紹介します。

ここに画像の説明を挿入

上記の操作により、Web ページの解析とレンダリングのプロセス全体を表示できるため、「CSS ファイルを head に配置する利点は何ですか?」という質問を解決するのにも非常に役立ちます。

CSS を head タグに配置する理由に関するこの記事はこれで終わりです。CSS head タグに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTMLとCSSを使用して、自分だけの暖かい男「Dabai」を作成します

>>: CentOS6 アップグレード glibc 操作手順