なぜ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 操作手順

推薦する

アルバムと写真をアルバムに保存するためのWeChatアプレット

私は現在、Xiao Nian Gao に似たビデオおよびツール アプリを開発しています。ユーザーが作...

Vue.jsクラウドストレージで画像アップロード機能を実現

序文ヒント:以下はこの記事の主な内容です。以下のケースを参考にしてください。 1. オブジェクトスト...

crontab スケジュールされたタスクが実行されない理由の分析と解決

序文Linux のスケジュールされたタスクを実装する方法としては、cron、anacron、at な...

JavaScript でドラッグ スライダー パズルの検証機能を実装します (html5、canvas)

導入:スライダー ドラッグ検証は現在、多くの場所で使用されています。週末に 1 つ作成しようと思い、...

Linux IO 多重化 epoll ネットワーク プログラミング

序文この章では、基本的な Linux 関数と epoll 呼び出しを使用して、Linux 上で実行で...

Dockerコンテナのネットワーク管理とネットワーク分離の実装

1. Dockerネットワーク管理1. Dockerコンテナ方式1) Dockerが外部ネットワーク...

CentOS に Redis と MySQL をインストールする

1|0MySQL(MariaDB) 1|11. 説明MariaDB データベース管理システムは My...

JavaScript でプライベート変数を宣言する 2 つの方法

序文JavaScript は、キーワードを使用してプライベート変数を宣言できる他の言語とは異なります...

Linuxの基本コマンドmktempの詳しい説明

mptemp は安全な方法で一時ファイルまたはディレクトリを作成します。このコマンドの適用範囲: R...

MySQL解凍版のインストール手順の詳しい説明

1. 公式サイトにアクセスします: D:\mysql-5.7.21-winx64\bin をダウンロ...

HTMLハイパーリンクタグAのTARGET属性の詳細な説明

ハイパーリンク <a> タグはリンク ポイントを表します。これは英語の単語「anchor...

MYSQL メタデータ ロック (MDL ロック) の理論とロック タイプ テスト

目次MYSQL メタデータ ロック (MDL ロック) 学習理論とロック タイプ テスト1. 予備的...

私が良いと思うクールなデザインサイトをいくつかまとめてみました。

ウェブサイトをデザインするにはインスピレーションが必要です。良いインスピレーションを得るには、より多...

SpringBootはActiviti7実装コードを統合する

Activiti7 の正式リリース以降、SpringBoot2.x との統合開発を全面的にサポートし...

MySQL で不明なフィールド名を回避する方法

序文この記事では、DDCTF の 5 番目の質問、つまり不明なフィールド名をバイパスする手法を紹介し...