Différence de performances CSS externe vs style en ligne?

88

Un de mes amis a déclaré que l'utilisation <div style=""></div>au lieu d'un fichier css compressé placé comme link hrefdans la section principale donne une certaine amélioration des performances. Est-ce vrai?

css performance inline-styles George
la source
1
Autant que je sache, ils sont (à peu près) les mêmes, mais je ne peux pas le vérifier.
Nightfirecat
3
Cela pourrait faire la lumière: mathiasbynens.be/notes/inline-vs-separate-file
Sudhir Bastakoti
1
Il faudrait une augmentation significative des performances pour faire face aux cauchemars de maintenance qui sont des styles en ligne. Jusqu'à présent, je n'ai vu aucune preuve de cela.
steveax
1
Pour les anciennes versions d'IE, l'augmentation des performances est TRÈS significative. J'ai vu des tableaux HTML se comporter comme de la colle avec un style CSS.
Jonathan

Réponses:

90

L'amélioration des performances mentionnée par votre ami est probablement trop insignifiante par rapport à l'augmentation des performances (via d'autres facteurs) à l'aide d'un fichier CSS.

En utilisant l'attribut style, le navigateur peint uniquement la règle pour cet élément particulier, qui dans ce cas est l' <div>élément. Cela réduit le temps de recherche du moteur CSS pour trouver les éléments qui correspondent au sélecteur CSS (par exemple a.hoverou #someContainer li).

Cependant, mettre le style au niveau de l'élément signifierait que vous ne pouvez pas mettre en cache les règles de style CSS séparément. Habituellement, mettre des styles dans des fichiers CSS permettrait d'effectuer la mise en cache, réduisant ainsi la charge du serveur à chaque fois que vous chargez une page.

Mettre des règles de style au niveau de l'élément vous fera également perdre de vue quels éléments sont stylés de quelle manière. Cela peut également se retourner contre l'amélioration des performances de la peinture d'un élément particulier où vous pouvez repeindre plusieurs éléments ensemble. L'utilisation de fichiers CSS sépare le CSS du HTML et vous permet ainsi de vous assurer que vos styles sont corrects et qu'il est plus facile de les modifier ultérieurement.

Par conséquent, si vous regardez la comparaison, vous verrez que l'utilisation d'un fichier CSS a beaucoup plus d'avantages que le style au niveau de l'élément.

Ne pas oublier lorsque vous avez un fichier de feuille de style CSS externe, votre navigateur peut mettre en cache le fichier ce qui augmente l'efficacité de votre application!

Mauris
la source
4
Pouvez-vous fournir des statistiques avec le profileur de chrome? Le processeur et le GPU sont coûteux sur mobile et tablette, où la consommation de la batterie est un coût énorme. Je pense qu'il y a un compromis. Et quel est l'avantage de Cache? Le navigateur devra calculer le style de l'élément actuel et la résolution des styles sera plus coûteuse s'il existe de nombreuses règles.
Akash Kava
28
A noter que tous les inconvénients liés à la maintenance disparaissent quand il y a un moteur qui aligne les styles avant l'envoi aux clients
Moshe Shaham
6
Les inconvénients liés à la maintenance disparaissent également lors de l'utilisation de React + Radium.
AjaxLeung
1
@AjaxLeung, ce que vous et Shaham avez dit est sans aucun doute vrai. Cette réponse a été écrite en 2011, lorsque la plupart des outils modernes n'étaient pas encore disponibles.
mauris
2
Oui. J'ajoutais simplement le commentaire pour ceux qui voient cette réponse aujourd'hui et au-delà.
AjaxLeung
6

La page se chargera plus rapidement si vous utilisez des styles en ligne par rapport aux feuilles de style. Dans certains cas, il faut plus rapide.

Lorsque vous utilisez une feuille de style utilisant href, cela nécessite une autre requête au serveur, puis l'analyse du fichier après réponse. Avec les styles en ligne, il n'y a rien de tout cela, juste une analyse directe.

Si un client a une connexion Internet lente, cette seule demande peut être très lente, laissant la page sans style jusqu'à ce que la feuille de style soit livrée. Encore une fois, s'il était en ligne, il n'y aurait aucun retard.

La seule raison pour laquelle nous utilisons des feuilles de style est d'être organisé. Il y a des moments où ils ne sont pas nécessaires, donc les styles en ligne ou les feuilles de style dans le document suffisent.

sebjwallace
la source
9
Cette réponse ignore complètement la mise en cache du navigateur. Les feuilles de style permettent de ne demander les styles qu'une seule fois et de les mettre en cache, ce qui réduit la quantité de contenu envoyé sur le fil.
GeekOnCoffee
2
Cette réponse ignore également le fait que les styles en ligne agrandissent le fichier HTML. Potentiellement, en particulier lors de l'utilisation de styles en ligne répétés, un nombre de fois plus grand que le fichier CSS. En passant, les navigateurs peuvent charger plusieurs fichiers en parallèle (et les mettre en cache comme mentionné ci-dessus).
Jan Van der Haegen
5

Ce n'est pas une question facile à répondre, car la performance dans ce cas dépend de nombreux facteurs (complexité des sélecteurs CSS, taille du document, etc.). Cependant, si nous prenons un cas isolé, alors nous pouvons voir que la classe CSS est en général plus rapide que le style en ligne:
style Inline vs classe CSS

s.ermakovich
la source
5
À peu près sûr que cela teste la vitesse à laquelle la classe de nœud ou l'attribut de style est modifié plutôt que la vitesse à laquelle le style est appliqué, ce que la question se pose
Sam
@Sam Qu'entendez-vous par "vitesse à laquelle le style est appliqué"? Pouvez-vous fournir un test qui mesure cette vitesse? Si vous regardez le code de test, vous verrez que la redistribution de la page se produit à chaque itération, ce qui signifie que le test couvre non seulement la modification de classe / attribut, mais aussi l'impact réel sur la page.
s.ermakovich
Cela inclut peut-être le temps d'ajouter le style, mais cela ajoute également du temps. Et si le document avait déjà le test de classe ou un style en ligne sans que JS ait besoin de l'ajouter. J'arrive à la vitesse pour que le CSS soit résolu dans les deux cas et (je me trompe peut-être) mais je ne pense pas que ce test fasse juste cela, je pense qu'il fait un travail supplémentaire.
Sam
@Sam Ce test ignore l'empreinte possible du chargement du CSS par le navigateur et de son traitement. J'ai mentionné dans ma réponse qu'il s'agit d'un cas isolé. Il mesure simplement les performances de l'application des styles de différentes manières (en ligne ou externe). C'est ce que font les applications Web classiques aujourd'hui: changer le document HTML de JavaScript sans recharger la page.
s.ermakovich
Ah OK, je faisais référence à des styles ajoutés non dynamiquement
Sam
3

Eh bien, c'est possible, mais la raison de la feuille de style liée ou externe est qu'elle peut être mise en cache dans le navigateur, en particulier lorsque vous utilisez le même div dans plusieurs pages pour le site. Cela signifie que le navigateur n'a qu'à charger la feuille de style une seule fois au lieu d'avoir à recharger le code à chaque fois que le navigateur recharge la page. Cela permet également un code plus propre qui facilite les modifications ou le débogage.

eciusr
la source
3
C'est l'essence du mécanisme de mise en cache. Il n'a pas besoin de preuves.
stroncium
5
Il peut être «encaissé» ne veut pas dire «encaissé»; et les "essences" ne sont pas des faits.
Ivan Castellanos
6
Les gars, ce n'est plus l'ère du duc nukem, on n'encaisse pas les gens. Cache d'autre part ...
Sebas
3
L'argument de mise en cache ne tient pas pour les applications à page unique, qui chargent généralement tout une fois à l'avance et génèrent des pages à la volée.
MindJuice
1

LA VÉRITÉ EST «OUI»

Il ya une énorme différence. Surtout lorsque vous automatisez l'interface utilisateur. Essayez le code suivant. J'utilise IE10 et le bloc-notes pour développer. J'apprends au fur et à mesure et je fais des tests. C'est un test de version raccourci. (il y a peut-être des erreurs car j'ai réduit le code pour afficher votre réponse)

Cliquez sur l'image que vous référencez et lisez les messages d'alerte. ASTUCE: enregistrez ce fichier et enregistrez-le à nouveau en tant que modification avant de le modifier (test).

Meilleurs voeux, Don

<!DOCTYPE html>
  <head>
    <style>
      div.grid
        {
        width:180px;
        height:42px;
        border:none;
        }
      img
        {
        width:50px;
        height:50px;
        margin:2px;
        float:left;
        border: 1px solid red;
        }
    </style>
    <script>
      function handleSelect(xId)
        {
        //
        // TESTPOINT
        alert("TESTPOINT\r>Grid: " + xId);
        //
        // GET BORDER COLOR
        // NOTE: An empty or blank value when you can see a border means the tag itself does not
        //            have 'border properties' (style="border: 2px{width} solid{style} green{color}").
        //            although there can be a border detailed via css local or external or via code (script).
        //            If the 'border properties' are returned then they were setup at the tag as
        //            above or the 'border properties' were updated by script code not css code.
        //            If the 'border properties' are NOT returned then they were setup via css.
        //            Thus, since everything seems to be heading toward edit on the fly (live) then css is NOT the way to go (learning).
        // HINT: Margin property is also not readable if set via css. Most likely all the properties values are the same way.
        //           Thus, setting the property values of a tag should be set at the tag control.
        // (works) cBorder=document.getElementById(xId).style.borderWidth;
        // (works) cBorder=document.getElementById(xId).style.borderStyle;
        // (works) cBorder=document.getElementById(xId).style.borderColor;
        // (works) cBorder=document.getElementById(xId).style.border;
        //cBorder=document.getElementById(xId).style.border;
        cBorder=document.getElementById(xId).style.margin;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder);
        //
        // SELECT IMAGE
        document.getElementById(xId).style.margin="1px";
        document.getElementById(xId).style.border="2px solid gold";
        document.getElementById(xId).innerHTML=xId;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]");
        //
        // GET BORDER COLOR
        //var cBorder=document.getElementById(xId).style.border-Color;  //Error
        //var cBorder=document.getElementById(xId).style.border-color;  //Error
        //var cBorder=document.getElementById(xId).style.borderColor;   //Error
        //var cBorder=document.getElementById(xId).style.bordercolor;   //Undefined
        cBorder=document.getElementById(xId).style.border;      //Empty
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]" + "\r>Border: " + cBorder);
        }
    </script>
  </head>

  <body>
    <div class="grid">
      <img style="border: 2px solid green" id="R0C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid blue" id="R0C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid purple" id="R0C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R1C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R2C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
  </body>
</html>
Don
la source
28
J'utilise IE10 et le bloc-notes pour développer. ?
xanderiel
1

Il n'y a pas de réponse fixe à mon avis.

Un inline CSSse chargera plus rapidement si la taille du contenu CSS se télécharge plus rapidement que votre serveur ne répondrait à une external CSS filedemande (compte tenu du temps DNS, de la latence du serveur, etc.).

Pour les CSS de taille normale, je les intégrerais dans la page, pour quelque chose de plus de 15-20 Ko, je le mettrais probablement dans un fichier externe et je m'assurerais qu'il peut être mis en cache.

Je suis sûr qu'il y a beaucoup d'autres considérations qui me manquent maintenant, mais il n'y a pas de réponse fixe pour en ligne ou externe.

adrianTNT
la source
-1

L'utilisation de feuilles de style externes est certainement une meilleure option car elle vous aidera à vous souvenir du style que vous avez appliqué sur les div (s). Cela réduit le temps de chargement de la page car plus le code HTML est petit, plus il se charge rapidement.

Mais dans certains cas, vous devrez peut-être modifier une propriété d'un div particulier, le style en ligne est la meilleure option. Et à vrai dire, un ou deux styles en ligne n'apporteront aucun changement au moment du chargement de la page.

Il existe une autre option de feuille de style interne, mais elle n'est utilisée que lorsque vous avez un site Web d'une seule page, comme si vous créez un modèle. C'est parce que vous devez écrire du CSS dans chaque page HTML

Vicky
la source
-3

Je préfère utiliser le CSS en ligne plutôt que le CSS externe où il y a plusieurs petits fichiers CSS pour chaque autre élément ou image. Inutile de télécharger plusieurs fichiers CSS avec seulement 5 à 10 lignes de code dans chacun. Si votre élément contient des propriétés telles que survol, actif, coché, etc., vous êtes alors censé utiliser un fichier CSS externe car cela évitera de compliquer votre processus de développement.

atuls1396
la source
Cela rend le maintien extrêmement difficile. Les fichiers CSS, JS doivent être mis en cache sur le navigateur de votre utilisateur par défaut.
dave2118