it-swarm.com.de

async = true für das css-Link-Tag

In HTML5 können Skript-Tags asynchron über async=true geladen werden.

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

Gibt es eine Entsprechung für CSS-Ressourcen? so etwas wie:

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

Der Grund ist, dass der Browser die CSS für spätere Anforderungen lädt und zwischenspeichert, den Rest des Prozesses jedoch aufhebt. Auf einem Splash-Bildschirm.

25
clyfe

Ich glaube nicht, dass das funktionieren wird.

Aber wir können das mit JS machen:

  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);

Ich denke, dass es das erreichen wird, was Sie versuchen.

Wenn Sie nicht wollen, dass javascript einen Blick darauf werfen möchte: Wie kann ich CSS asynchron ohne Verwendung von JavaScript laden?

Ich hoffe es hilft.

18
Vedant Terkar

Die beste Methode für heute wird im folgenden Beitrag beschrieben:
"Async" CSS ohne JavaScript
Ich fordere alle Leser auf, den Artikel zu lesen, da er eingehende Untersuchungen bekannter "Hacks" und Workarounds durchführt.

"Es scheint, dass dieser Trick dazu führt, dass Chrome & Firefox den Körper früher startet....

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

Der Artikel enthält auch Benchmarks:

 alt text

24
Gal Margalit

laden Sie CSS ohne Render Blocking

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

weitere Informationen finden Sie hier: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

1
Asim

für asynchrones Stylesheet loading, das das Seiten-Rendering nicht blockiert, das für mich sehr gut funktioniert hat ((unter Berücksichtigung von pageSpeed-Erkenntnissen).

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);

Ich konnte die Quelle von fontawesome - Icons asynchron laden, ohne dass die Seite langsamer wird oder auf Anfragen wartet.

0
Lenin Zapata

Was halten Sie von einer Lösung mit jQuery?

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