async=true für CSS-Link-Tag

Lesezeit: 4 Minuten

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

<script src="https://stackoverflow.com/questions/24020254/index.js" type="text/javascript" async="true"></script>

Gibt es ein Äquivalent für CSS-Ressourcen? etwas wie:

<link rel="stylesheet" type="text/css" async="true" href="https://stackoverflow.com/questions/24020254/style.css">

Der Grund dafür ist, den Browser dazu zu bringen, das CSS zu laden und es für spätere Anfragen zwischenzuspeichern, aber den Rest des Prozesses entsperren zu lassen. Auf, sagen wir, einem Begrüßungsbildschirm.

  • CSS wird angewendet, wenn die Seite geladen wird, wie würde Async überhaupt funktionieren?

    – Serakfalke

    3. Juni 2014 um 16:28 Uhr

  • Ich denke, es würde die Stile anwenden, sobald sie verfügbar sind.

    – Klyfe

    3. Juni 2014 um 18:39 Uhr

  • @serakfalcon ist es nicht. Google Fonts blockiert Renderseite

    – Wassilij Surikow

    4. Februar um 17:33 Uhr

Benutzer-Avatar
Gal Margalit

2021 edit: Ursprünglicher Link verschoben – asynchrones CSS ohne JavaScript
https://codepen.io/tigt/post/async-css-ohne-javascript

„Es scheint, dass dieser Trick dazu führt, dass Chrome und Firefox den Body früher starten, und sie blockieren einfach nicht für Body-Stylesheets.“

<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

  • der Link ist tot

    – a14m

    17. Mai 2021 um 11:36 Uhr

  • Behoben, URL verschoben

    – Gal Margalit

    9. Juni 2021 um 22:33 Uhr

Benutzer-Avatar
Vedant Terkar

Ich glaube nicht, dass das funktionieren wird.

Aber wir können das mit JS tun:

  var resource = document.createElement('link'); 
  resource.setAttribute("rel", "stylesheet");
  resource.setAttribute("href","https://stackoverflow.com/questions/24020254/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 zu tun versuchen.

Wenn Sie nicht wollen javascript schau dir mal an: Wie lade ich CSS asynchron ohne JavaScript zu verwenden?

Hoffe es hilft.

  • Das hat absolut nichts mit der Frage zu tun.

    – Ryan

    3. Juni 2014 um 16:40 Uhr

  • @RPM Wie? laut OP will er laden css async, dh mit dem Rest von html und dieses js script tut auch dasselbe, auch op getaggt javascript fraglich. korrigiert mich wenn ich falsch liege.

    – Vedant Terkar

    3. Juni 2014 um 16:43 Uhr


  • Vielen Dank. Dies ist, was ich am Ende getan habe und es funktioniert für meinen Fall (eifrig, es zwischenzuspeichern).

    – Klyfe

    3. Juni 2014 um 18:40 Uhr

  • Danke vielmals! +1 für die Verwendung von nativem Javascript

    – Gregory

    9. Juli 2015 um 23:18 Uhr

Laden Sie CSS ohne Renderblockierung

<link rel="preload" media="(min-width:801px)" href="https://stackoverflow.com/questions/24020254/styledesk.css" as="style">
<link rel="stylesheet" media="(min-width:801px)" href="https://stackoverflow.com/questions/24020254/styledesk.css">

mehr Infos hier:
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

zum asynchrones Stylesheet Das Laden, das das Rendern der Seite nicht blockiert, hat bei mir sehr gut funktioniert ((unter Berücksichtigung von pageSpeed ​​Insights)) …

var stylesheet = document.createElement('link');
stylesheet.href="https://stackoverflow.com/questions/24020254/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 laden Fontawesome Symbole asynchron, ohne dass die Seite langsamer wird oder auf Anfragen wartet.

Meine zwei Cent:

Alle externen Dateien, die mit heruntergeladen werden sollen src oder href innerhalb des Körpers sind standardmäßig asynchron.

Also, anstatt Ihre zu setzen Link-Tag für Stylesheets (die Sie asynchron herunterladen möchten) in der Kopf-Tag, platzieren Sie sie irgendwo im Körper, vorzugsweise oben. Beispiel:

<body>
    <link rel="stylesheet" href="path/to/your/file">
    <!--body content-->
</body>

Das Gleiche gilt für Skript-Tags. Wenn Sie ein Skript asynchron herunterladen möchten, platzieren Sie das Skript-Tag nicht im Head-Tag, sondern irgendwo im Body. Die Verwendung des async-Attributs in Skript-Tags, die sich innerhalb des Hauptteils befinden, ist überflüssig. Sie können das defer-Tag verwenden, wenn Sie das Skript nach dem Laden des DOM ausführen möchten.

<body>
    <script src="path/to/your/file"></script>
    <!--body content-->
</body>

Eine andere Sache, async- und defer-Attribute haben keinen Wert, wie true oder false, sie werden wie folgt verwendet:

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

All dies wurde auf Chrome 83.0 getestet

Benutzer-Avatar
Krzysztof Kubacki

Was halten Sie von einer Lösung mit jQuery?

jQuery('head').append('<link rel="stylesheet" type="text/css" href="https://stackoverflow.com/questions/24020254/path/to/cssfile.css" />');

1158520cookie-checkasync=true für CSS-Link-Tag

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy