CSS の読み込みはページの読み込み速度に影響しますか?

CSS の読み込みによってページのレンダリングがブロックされるかどうかは、よくある質問です。この記事では、CSS 読み込みがページ レンダリングに及ぼす影響を詳しく調査し、デモンストレーション用の具体的なコード例を示します。

まず、CSS の読み込みがページのレンダリングにどのような影響を与えるかを知る必要があります。ブラウザーが HTML を解析するときに外部 CSS ファイルが見つかった場合、ブラウザーは HTML の解析を一時停止し、CSS ファイルのダウンロードを開始します。 CSS ファイルがダウンロードされ、ブラウザによって解析された後でのみ、ブラウザは HTML の解析を続けます。これは、CSS の読み込みによってページのレンダリングがブロックされることを意味します。

これを実証するために、外部 CSS ファイルとプレースホルダー要素を含む単純な HTML ファイルを作成できます。 CSS ファイルで背景色を定義し、このスタイルを HTML のプレースホルダー要素に適用します。次に、開発者ツールを使用して、ページのレンダリング プロセスを表示します。

HTML コードは次のとおりです:

CSS コード (styles.css として保存) は次のとおりです:

.placeholder { width: 200px; height: 200px; background-color: red; }

その HTML ファイルを開いて表示すると、コンソール出力では、ToThis is a placeholder element.は、CSS ファイルがロードされた後にのみ出力されることがわかります。これは、CSS の読み込みによってページのレンダリングがブロックされていることを示しています。

ただし、CSS の読み込みによってページのレンダリングがブロックされない状況もあります。 CSS ファイルを HTML のタグに配置し、タグのrel属性値をにすると、 preloadを使用すると、CSS ファイルはページのレンダリングをブロックすることなく非同期的に読み込まれます。変更された HTML コードの例を次に示します。

この例では、CSS ファイルへのリンクをタグに配置し、< ## を使用しました。 ;link>タグの #rel属性を使用して CSS ファイルを非同期に読み込みます。 HTML ファイルを再度開いてコンソール出力を見ると、CSS ファイルが読み込まれる前にThis is a placeholder element.が出力されることがわかります。これは、ページのレンダリングが CSS ファイルの読み込みによってブロックされないことを意味します。

タグを

以上がCSS の読み込みはページの読み込み速度に影響しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。