ページが読み込まれた後に大きな CSS ファイルを読み込むにはどうすればよいでしょうか?

CSS 配信の最適化: CSS 読み込みの遅延手法を理解する

Web サイトのパフォーマンスを向上させるために、開発者は多くの場合 CSS 配信を最適化します。 Google Developers ドキュメントで言及されている戦略の 1 つは、 に重要な CSS をインライン化することです。ページが読み込まれるまで元の CSS ファイルの読み込みを延期しながら、セクションを実行します。このアプローチでは、最初に重要なスタイルの表示を優先することでレンダリングを最適化します。

ただし、ページの読み込み後に大きな CSS ファイルをどのように読み込むことができるかという疑問が残ります。

解決策: 大きな CSS ファイルの読み込みを延期する

大きな CSS ファイルの読み込みを延期するには、次の単純な jQuery コード スニペットを利用できます。

    function loadStyleSheet(src) {
    if (document.createStyleSheet){
        document.createStyleSheet(src);
    }
    else {
        $("head").append($("<link rel='stylesheet' href='"+src+" />"));
    }
};

これを呼び出すことで、 $(document).ready() 関数または window.onload 関数内の関数を使用すると、ページの読み込みが完了した後に CSS ファイルを動的に読み込むことができます。

メソッドの検証

この方法が機能することを確認するには、ブラウザの JavaScript を無効にしてページを再読み込みしてください。スタイルシートが適用された状態でページが引き続き正しく読み込まれる場合は、CSS 読み込みの延期が成功したことを示しています。

代替方法

CSS 読み込みを延期するには、次のような代替方法があります。

以上がページが読み込まれた後に大きな CSS ファイルを読み込むにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。