web-dev-qa-db-fra.com

async = true pour la balise css

En HTML5, les balises de script peuvent être chargées async via async=true

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

Existe-t-il un équivalent pour les ressources CSS? quelque chose comme:

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

La raison en est de faire en sorte que le navigateur charge le fichier css et le mette en cache pour les demandes ultérieures, tout en laissant le reste du processus débloquer.

javascriptcsshtml5dom
25
clyfe

Je ne pense pas que ça va marcher.

Mais nous pouvons le faire en utilisant 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);

Je pense Que cela va réaliser ce que vous essayez de faire.

Si vous ne voulez pas javascript, consultez: Comment charger des CSS de manière asynchrone sans utiliser JavaScript?

J'espère que ça va aider.

18
Vedant Terkar

La meilleure méthode à ce jour est décrite dans le post suivant:
CSS "Async" sans JavaScript
Je demande à tous les lecteurs - lisez cet article, qui suit des recherches approfondies sur des "hacks" et des solutions de contournement connus.

"Il semble que cette astuce force Chrome et Firefox à démarrer le corps plus tôt, Et ils ne bloquent tout simplement pas les feuilles de style du corps."

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

L'article contient également des points de repère:

 alt text

24
Gal Margalit

for feuille de style asynchrone loading qui ne bloque pas le rendu de la page qui a très bien fonctionné pour moi ((compte tenu de pageSpeed ​​insights)) ...

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

J'ai pu charger la source de fontawesome icons de manière asynchrone sans ralentir la page ni attendre les requêtes.

0
Lenin Zapata