ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS の読み込みはページの読み込み速度に影響しますか?
CSS の読み込みはページの読み込み速度に影響しますか?
- 王林オリジナル
- 2024-02-18 21:52:061132ブラウズ
CSS の読み込みによってページのレンダリングがブロックされるかどうかは、よくある質問です。この記事では、CSS 読み込みがページ レンダリングに及ぼす影響を詳しく調査し、デモンストレーション用の具体的なコード例を示します。
まず、CSS の読み込みがページのレンダリングにどのような影響を与えるかを知る必要があります。ブラウザーが HTML を解析するときに外部 CSS ファイルが見つかった場合、ブラウザーは HTML の解析を一時停止し、CSS ファイルのダウンロードを開始します。 CSS ファイルがダウンロードされ、ブラウザによって解析された後でのみ、ブラウザは HTML の解析を続けます。これは、CSS の読み込みによってページのレンダリングがブロックされることを意味します。
これを実証するために、外部 CSS ファイルとプレースホルダー要素を含む単純な HTML ファイルを作成できます。 CSS ファイルで背景色を定義し、このスタイルを HTML のプレースホルダー要素に適用します。次に、開発者ツールを使用して、ページのレンダリング プロセスを表示します。
HTML コードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="placeholder"></div>
<script>
console.log("This is a placeholder element.");
</script>
</body>
</html>CSS コード (styles.css として保存) は次のとおりです:
.placeholder {
width: 200px;
height: 200px;
background-color: red;
}その HTML ファイルを開いて表示すると、コンソール出力では、To This is a placeholder element. は、CSS ファイルがロードされた後にのみ出力されることがわかります。これは、CSS の読み込みによってページのレンダリングがブロックされていることを示しています。
ただし、CSS の読み込みによってページのレンダリングがブロックされない状況もあります。 CSS ファイルを HTML の タグに配置し、<link> タグの rel 属性値を にすると、 preload を使用すると、CSS ファイルはページのレンダリングをブロックすることなく非同期的に読み込まれます。変更された HTML コードの例を次に示します。
<!DOCTYPE html>
<html>
<body>
<div class="placeholder"></div>
<link rel="preload" href="styles.css" as="style">
<link rel="stylesheet" href="styles.css">
<script>
console.log("This is a placeholder element.");
</script>
</body>
</html> この例では、CSS ファイルへのリンクを タグに配置し、< ## を使用しました。 ;link> タグの #rel 属性を使用して CSS ファイルを非同期に読み込みます。 HTML ファイルを再度開いてコンソール出力を見ると、CSS ファイルが読み込まれる前に This is a placeholder element. が出力されることがわかります。これは、ページのレンダリングが CSS ファイルの読み込みによってブロックされないことを意味します。
<link> タグを
タグ内に配置し、rel の preload## を使用することで実行できます。 属性 # 達成する値。 以上がCSS の読み込みはページの読み込み速度に影響しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。