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

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

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

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

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

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

ここに画像の説明を挿入

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

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

cssbodyタグの最後に導入された場合

<!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が構築され、 DOMTreeRenderTreeが再構築され、レイアウトが再計算されて Web ページがレンダリングされます。
CSS をheadタグに配置すると、まず CSS が読み込まれ、次に CSS が解析されてCSSOMTreeが構築されます。同時に、 DOMTreeが構築されます。CSSOMTree とDOMTreeが構築された後、 RenderTreeが構築され、レイアウトを計算して Web ページをレンダリングしCSSOMTree 。この 2 つを比較すると、 cssheadタグに配置されており、 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 操作手順

推薦する

jsを使ってシンプルなディスククロックを実現する

この記事では、参考までに、シンプルなディスククロックを実装するためのjsの具体的なコードを紹介します...

vue backtop コンポーネントを実装するための完全なコード

効果: コード: <テンプレート> <div class="back-t...

Oracle と MySQL の高可用性ソリューションの比較分析

Oracle と MySQL の高可用性ソリューションについては、以前からまとめたいと思っていたので...

Linux で SSH 経由でリモート ファイルシステムをマウントする方法の詳細な説明

SSHFS の機能: FUSE(Linux向けの最高のユーザー空間ファイルシステムフレームワーク)を...

CSS3はキングをマッチングさせるときにパーティクルアニメーション効果を実現します

コーディングをしていると、多くのことが同じ結末を迎えることに気づくでしょう。問題を解決する方法は何千...

VMware 構成 VMnet8 ネットワーク方法の手順

目次1. はじめに2. 設定手順1. はじめに1. NAT モード (VMnet8) は、仮想マシン...

SpringBoot アプリケーションの Docker デプロイメントの実装手順

目次序文DockerファイルDockerfile とは何ですか? Dockerfile 構文Spri...

ReactのuseEffectクロージャの落とし穴についての簡単な説明

問題コードuseEffectによって発生したクロージャの問題コードを見てみましょう 定数 btn =...

使用場所によって混乱しやすいXHTMLタグ

<br />jb51.net では、常に記事のセマンティクスを重視してきましたが、HTM...

CentOS 7 はネットワークカードを変更した後、インターネットにアクセスできません

不明なドメイン名 www.baidu.com を Ping するホストのIPアドレスを変更する右クリ...

Windows 10 での Tomcat のインストールと展開に関する詳細なチュートリアル

目次1 Java環境の設定2 tomcatのインストールと展開Tomcat をインストールして展開す...

HTMLページ埋め込み動画とJSコントロール切り替え動画例の詳しい説明

まず、ページにビデオを埋め込むための HTML コードは次のとおりです。コードをコピーコードは次のと...

JavaScript Promise の徹底解説

目次1. Promise とは何ですか? 2. なぜ Promise が存在するのでしょうか? 3つ...

MySQL <> および <=> 演算子の紹介

<> 演算子機能: 等しくないことを示します。注: 「!=」演算子と同じ機能を持ちますが...

CSS疑似クラス名を数字で始めないでください

初心者が div+css を開発する場合、.ggg、#ccc などの形式の CSS 疑似クラス名を付...