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 ファイルの読み込みによってブロックされないことを意味します。
タグを
タグ内に配置し、
rel の
preload## を使用することで実行できます。
属性 # 達成する値。
したがって、Web ページのパフォーマンスを最適化する場合は、主要な CSS コードを HTML にインライン化することを検討できます。これにより、CSS の読み込みによるページのレンダリングのブロックを回避できます。重要ではない CSS を非同期的にロードして、ページのレンダリング速度を向上させることができます。
以上がCSS の読み込みはページの読み込み速度に影響しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。