web-dev-qa-db-ja.com

JavaScriptを使用せずにCSSを非同期に読み込む方法

私がウェブサイトを持っていると仮定します http://somethingsomething.com

そして、私は3つのCSSファイルを持っています

  • common.css
  • homepage.css
  • inner-pages.css

homepage.cssはホームページに必要で、common.cssはサイト全体に必要ですが、inner-pages.cssは他のページにのみ必要であり、大きなファイルです。ホームページデータのダウンロード後にinner-pages.cssをロードすることは可能ですか？同じ方法で、asyncタグにscript属性を使用します。私が知る限り、async属性はCSSではなくJS専用です

私の友人は、このためにrequirejsを使用することを提案しました http://requirejs.org/docs/faq-advanced.html#css JSの方法では、これだけのためにrequire.jsを使用しません。そのため、CSSだけでは不可能な場合。これを行う簡単なJS方法は何ですか？

cssperformance
16
Jitendra Vyas

Media = "bogus"と<link>を足元に持つ非同期CSSは、次のようなHTML構造を持っているとします。

<head>
    <!-- unimportant nonsense -->
    <link rel="stylesheet" href="style.css" media="bogus">
</head>
<body>
    <!-- other unimportant nonsense, such as content -->
    <link rel="stylesheet" href="style.css">
</body>

詳細は http://codepen.io/Tigt/post/async-css-without-javascript

9
Abhishek Gupta

CSSを提供するダミーページを指すページにiframeを配置し、CSSファイルを非同期で提供する必要があります。

<iframe src="loadcss.html"></iframe>

かなり些細なことのように注意してください。これにより、ページごとに最低2 cssファイル転送、子ページごとに3 cssファイル転送が行われます（キャッシュされていない場合）。 cssを縮小する場合、1回の転送しかありません。

1
David Nguyen

試してみる

$.ajax({
    url:'/css.css',
    type:'get',
    success:function(css){
        $('html').append('<style>'+css+'</style>');
    }
});

または

function getCss(url){
    $('<link>',{rel:'stylesheet',type:'text/css','href':url}).appendTo('head');
}

getCss('/css.css');

申し訳ありませんが、JavaScriptを使用したくないとは思わなかった

css @importを使用してはどうですか：

<style>
@import url('/style1.css');
@import url('/style2.css');
</style>
1
user2678106

提案されているように、CSSアセットの読み込みにはRequireは必要ありません。 JavaScriptに依存せずに大きなペイロードを非同期で取得する場合は、HTTP/2サーバープッシュを活用して重要でないスタイルのアセットを配信することを検討する必要があります。そして、ここに あなたが役に立つかもしれないパフォーマンス技術 があります。これは、今日でもうまく機能する、ブラウザに重要なCSSペイロードを配信するためのものです。

最後に、パフォーマンスのためにページを最適化していて、Require I've an alternative minimal asset loader のような重いツールや複雑なツールを使用したくない場合は、必要に応じて使用できます。

0
Josh Habdas

<body>の代わりに<head>にCSSを含めます... "このトリックは、Chrome＆Firefoxがより早く本体を開始するように思われますが、単にボディスタイルシートのブロック。」とIEの条件を追加します。

head

<head>
  <!--[if IE]>
    <link rel="stylesheet" href="style.css"> <!-- blocking, but what else can ya do? -->
  <![endif]-->
</head>

body

<body>
    <!--[if !IE]> -->
        <link rel="stylesheet" href="style.css" lazyload>
  <!-- <![endif]-->
</body>

テイラーハント @ codepen.io

0
Yatko