web-dev-qa-db-ja.com

cssリンクタグのasync = true

HTML5スクリプトタグでは、async=true

<script src="index.js" type="text/javascript" async="true"></script>

CSSリソースに相当するものはありますか？何かのようなもの：

<link rel="stylesheet" type="text/css" async="true" href="style.css">

その理由は、後のリクエストのためにブラウザーにcssをロードさせてキャッシュさせることですが、残りのプロセスはブロックしないようにすることです。たとえば、スプラッシュスクリーン。

javascriptcsshtml5dom
27
clyfe

私はそれがうまくいくとは思わない。

しかし、JSを使用してそれを行うことができます。

  var resource = document.createElement('link'); 
  resource.setAttribute("rel", "stylesheet");
  resource.setAttribute("href","path/to/cssfile.css");
  resource.setAttribute("type","text/css");      
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(resource);

私はあなたがやろうとしていることを達成すると思う。

javascriptを見たくない場合： JavaScriptを使用せずにCSSを非同期にロードする方法？

それが役立つことを願っています。

21
Vedant Terkar

今日の最良の方法は、次の投稿で説明されています。
JavaScriptを使用しない「非同期」CSS
すべての読者にお願いします-既知の「ハッキング」と回避策の詳細な調査に従って記事を読んでください。

「このトリックが原因でChrome＆Firefoxが本文をより早く開始し、本文のスタイルシートをブロックしないようにしているようです。 "

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

この記事にはベンチマークも含まれています。

alt text

26
Gal Margalit

レンダリングをブロックせずにCSSをロード

<link rel="preload" media="(min-width:801px)" href="styledesk.css" as="style">
<link rel="stylesheet" media="(min-width:801px)" href="styledesk.css">

詳細はこちら： https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

1
Asim

for 非同期スタイルシートページレンダリングをブロックしないロードで、非常にうまく機能しました（（pageSpeedの洞察を考慮））...

var stylesheet = document.createElement('link');
stylesheet.href = 'fontawesome.min.css';
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
// temporarily set media to something inapplicable to ensure it'll fetch without blocking render
stylesheet.media = 'only x';
// set the media back when the stylesheet loads
stylesheet.onload = function() {stylesheet.media = 'all'}
document.getElementsByTagName('head')[0].appendChild(stylesheet);

fontawesomeアイコンのソースを非同期でロードできました。ページの速度が低下したり、リクエストを待機したりすることはありませんでした。

0
Lenin Zapata

JQueryを使用したソリューションについてどう思いますか？

jQuery('head').append('<link rel="stylesheet" type="text/css" href="path/to/cssfile.css" />');
0
Krzysztof Kubacki