web-dev-qa-db-fra.com

Est-ce important pour la performance?

Je les déteste, cela défie la nature en cascade de CSS, et si vous ne les utilisez pas avec précaution, vous vous retrouvez dans une boucle pour ajouter plus de !important.

Mais je veux savoir sont-ils mauvais pour la performance?

MODIFIER
D'après les réponses (rapides), je peux conclure que cela n'aura pas d'impact (significatif) sur les performances. Mais c'est agréable à savoir, même si c'est juste un argument supplémentaire pour décourager les autres;).

MODIFIER 2
BoltClock a souligné que s'il y a 2 !important déclarations les spécifications indiquent qu'il choisira la plus spécifique.

cssperformance
191
janw

Cela ne devrait pas vraiment avoir d'effet sur les performances. Voir l'analyseur CSS de Firefox à /source/layout/style/nsCSSDataBlock.cpp#572 et je pense que c'est la routine pertinente, la gestion l'écrasement des règles CSS.

il semble que ce soit simplement une vérification de "important".

  if (aIsImportant) {
    if (!HasImportantBit(aPropID))
      changed = PR_TRUE;
    SetImportantBit(aPropID);
  } else {
    // ...

En outre, les commentaires à source/layout/style/nsCSSDataBlock.h#219

    /**
     * Transfer the state for |aPropID| (which may be a shorthand)
     * from |aFromBlock| to this block.  The property being transferred
     * is !important if |aIsImportant| is true, and should replace an
     * existing !important property regardless of its own importance
     * if |aOverrideImportant| is true.
     * 
     * ...
     */

  1. Firefox utilise un analyseur descendant écrit manuellement. Dans les deux cas, chaque fichier CSS est analysé dans un objet StyleSheet, chaque objet contient des règles CSS.

  2. Firefox crée ensuite des arbres de contexte de style qui contiennent les valeurs finales (après avoir appliqué toutes les règles dans le bon ordre)

CSS Parser Firefox

De: http://taligarsiel.com/Projects/howbrowserswork1.htm#CSS_parsing

Maintenant, vous pouvez facilement voir, dans un cas comme avec le modèle d'objet décrit ci-dessus, l'analyseur peut marquer les règles affectées par le !important facilement, sans coût supplémentaire. La dégradation des performances n'est pas un bon argument contre !important.

Cependant, la maintenabilité prend un coup (comme d'autres réponses mentionnées), ce qui pourrait être votre seul argument contre eux.

267
Anirudh Ramanathan

Je ne pense pas que !important est intrinsèquement mauvais en termes de rapidité avec laquelle le navigateur correspond aux règles (il ne fait pas partie du sélecteur, seulement une partie de la déclaration)

Cependant, comme cela a déjà été indiqué, cela réduira la maintenabilité de votre code et entraînera donc probablement une croissance inutile de sa taille en raison de modifications futures. L'utilisation de !important réduirait également probablement les performances des développeurs.

Si vous étiez vraiment difficile, vous pourriez également dire que !important ajoute 11 octets supplémentaires à votre fichier CSS, ce n'est pas vraiment grand-chose, mais je suppose que si vous en avez pas mal !importants dans votre feuille de style, cela pourrait s'additionner.

Juste mes pensées, malheureusement je n'ai pas pu trouver de repères sur la façon dont !important pourrait affecter les performances.

113
Sean

!important a sa place. Faites-moi confiance sur celui-là. Cela m'a sauvé plusieurs fois et est souvent plus utile comme solution à court terme, avant qu'une méthode plus longue et plus élégante à votre problème puisse être trouvée.

Cependant, comme la plupart des choses, il a été abusé, mais il n'y a pas lieu de s'inquiéter de la "performance". Je parie qu'un petit GIF 1x1 a plus de performances sur une page Web que ce qui est important.

Si vous souhaitez optimiser vos pages, il y a beaucoup plus ! Important itinéraires à prendre;);)

58
Michael Giovanni Pumo

Ce qui se passe ici dans les coulisses, c'est que pendant que votre CSS est en cours de traitement, le navigateur le lit, rencontre un !important, et le navigateur revient pour appliquer les styles définis par !important. Ce processus supplémentaire peut sembler être une petite étape supplémentaire, mais si vous traitez de nombreuses demandes, vous obtiendrez un coup dans les performances. (Source)

L'utilisation de! Important dans votre CSS signifie généralement que le développeur est narcissique et égoïste ou paresseux. Respectez les développeurs à venir ...

La pensée d'un développeur lors de l'utilisation de !important:

  1. Mon CSS à bascule ne fonctionne pas ... grrrr.
  2. Qu'est-ce que je devrais faire maintenant??
  3. Et alors !important ouais .... maintenant ça marche bien.

Cependant, ce n'est pas une bonne approche pour utiliser !important simplement parce que nous n'avons pas bien géré le CSS. Cela crée de nombreux problèmes de conception - qui sont pires que les problèmes de performances - mais il nous oblige également à utiliser de nombreuses lignes de code supplémentaires car nous remplaçons d'autres propriétés par !important et notre CSS devient encombré de code inutile. Ce que nous devrions faire à la place, c'est d'abord gérer très bien le CSS, et ne pas laisser les propriétés se remplacer les unes les autres.

Nous pouvons utiliser !important. Mais utilisez-le avec parcimonie et uniquement lorsqu'il n'y a pas d'autre issue.

enter image description here

31
NullPoiиteя

Je suis d'accord avec vous pour ne pas l'utiliser car c'est une mauvaise pratique, quelle que soit la performance. Rien que pour ces raisons, j'éviterais d'utiliser !important la mesure du possible.

Mais sur la question des performances: non, cela ne devrait pas être perceptible. Cela pourrait avoir un certain effet, mais il devrait être si petit que vous ne devriez jamais le remarquer, ni devrait vous en inquiéter.

S'il est suffisamment important pour être visible, vous avez probablement de plus gros problèmes dans votre code que simplement !important. La simple utilisation d'un élément de syntaxe normal des langages principaux que vous utilisez ne sera jamais un problème de performances.

Permettez-moi de répondre à votre question par une question rétorique en retour; un angle que vous n'avez probablement pas considéré: De quel navigateur parlez-vous?

Chaque navigateur a évidemment son propre moteur de rendu, avec ses propres optimisations. La question devient donc maintenant: quelles sont les implications en termes de performances dans chaque navigateur? Peut-être !important fonctionne mal dans un navigateur mais vraiment bien dans un autre? Et peut-être que dans les prochaines versions, ce sera l'inverse?

Je suppose que mon point ici est que nous, en tant que développeurs Web, ne devrions pas penser (ou avoir besoin de réfléchir) aux implications de performances des constructions de syntaxe individuelles des langages que nous utilisons. Nous devons utiliser ces constructions de syntaxe car elles sont la bonne façon de réaliser ce que nous ne voulons pas en raison de leur performance.

Les questions sur les performances doivent être posées conjointement avec l'utilisation de profileurs pour analyser l'emplacement des points de pincement dans votre système. Réparez les choses qui vous ralentissent vraiment en premier. Il est presque certain que vous devrez résoudre des problèmes beaucoup plus importants avant de passer au niveau des constructions CSS individuelles.

13
SDC

Ayant dû utiliser !important plusieurs fois auparavant, je n'ai personnellement remarqué aucune performance démontrable atteinte lors de son utilisation.

Comme une note voir la réponse à cette question de pile pour une raison que vous voudrez peut-être utiliser !important.

Je mentionnerai également quelque chose que tout le monde n'a pas mentionné. !important est le seul moyen de remplacer le CSS en ligne avant d'écrire une fonction javascript (ce qui affectera vos performances même si ce n'est qu'un petit peu). Ainsi, il pourrait en fait enregistrer vous un certain temps de performance si vous avez besoin de remplacer css en ligne.

7
Ryan

Il n'affecte pas sensiblement les performances. Cela réduit cependant la maintenabilité de votre code et risque donc de dégrader les performances à long terme.

7
Henrik

hmm ...! important ou !! important?

Passons en revue cette étape par étape:

  1. L'analyseur doit vérifier! Important pour chaque propriété, que vous l'utilisiez ou non - la différence de performances est donc de 0
  2. Lors de l'écrasement d'une propriété, l'analyseur doit vérifier si la propriété en cours d'écrasement est! Importante ou non - donc la différence de performances est de nouveau 0
  3. Si la propriété en cours d'écrasement est !! importante, elle doit écraser la propriété - performance hit -1 pour ne pas utiliser! Important
  4. Si la propriété en cours de réécriture est! Importante, elle ignore l'écrasement de la propriété - augmentation des performances de +1 pour l'utilisation de! Important
  5. Si la nouvelle propriété est! Importante, l'analyse doit l'écraser indépendamment de la propriété qui est remplacée est! Importante ou !! importante - différence de performance 0 à nouveau

Donc je suppose! Important a en fait de meilleures performances car il peut aider l'analyseur à ignorer de nombreuses propriétés qu'il ne sautera pas autrement.

et comme @ryan le mentionne ci-dessous, le seul moyen de remplacer les CSS en ligne et d'éviter d'utiliser javascript ... donc une autre façon d'éviter un impact inutile sur les performances

hmm ... il s'avère que! important est important

et aussi,

  • l'utilisation de! important fait gagner beaucoup de temps au développeur
  • vous évite parfois de repenser l'ensemble du CSS
  • parfois html ou le fichier css parent n'est pas sous votre contrôle, donc il vous sauve la vie
  • évite évidemment que des éléments importants soient accidentellement remplacés par d'autres éléments importants!
  • et parfois les navigateurs ne choisissent tout simplement pas les bonnes propriétés, sans être trop spécifiques dans les sélecteurs, donc l'utilisation de! important devient vraiment importante et vous évite d'écrire des tonnes de sélecteurs css spécifiques dans votre css. donc je suppose que même si vous utilisez plus d'octets pour l'écriture! important, cela pourrait vous faire économiser des octets dans d'autres endroits. et nous le savons tous, les sélecteurs css peuvent devenir désordonnés.

Donc je suppose que l'utilisation de! Important peut rendre les développeurs heureux, et je pense que c'est très important: D

6
xtrahelp.com

Je ne peux pas prévoir !important entravant les performances, pas intrinsèquement de toute façon. Si, cependant, votre CSS est criblé de !important, qui indique que vous avez dépassé les sélecteurs de qualification et que vous êtes trop précis et que vous n'avez plus de parents ou de qualificatifs pour ajouter de la spécificité. Par conséquent, votre CSS sera gonflé (ce qui le sera gênera les performances) et difficile à maintenir.

Important CSS rule meme

Si vous voulez écrire du CSS efficace, alors vous voulez être seulement aussi spécifique que vous devez l'être et écrire CSS modulaire . Il est conseillé de s'abstenir d'utiliser des identifiants (avec des hachages), de chaîner des sélecteurs ou des sélecteurs éligibles.

ID précédés de # en CSS sont vicieusement spécifiques, au point où 255 classes ne remplaceront pas un identifiant (jouer avec: @ Faust ). Les identifiants ont également un problème de routage plus profond, ils doivent être uniques, cela signifie que vous ne pouvez pas les réutiliser pour les styles en double, vous finissez donc par écrire des CSS linéaires avec des styles répétitifs. La répercussion de cette opération variera d'un projet à l'autre, selon l'échelle, mais la maintenabilité en souffrira énormément et dans les cas Edge, les performances aussi.

Comment pouvez-vous ajouter de la spécificité sans !important, chaînage, qualification ou ID (à savoir #)

[~ # ~] html [~ # ~] 

<div class="eg1-foo">
    <p class="eg1-bar">foobar</p>
</div>
<div id="eg2-foo">
    <p id="eg2-bar">foobar</p>
</div>
<div class="eg3-foo">
    <p class="eg3-foo">foobar</p>
</div>

[~ # ~] css [~ # ~] 

.eg1-foo {
    color: blue;
}
.eg1-bar {
    color: red;
}
[id='eg2-foo'] {
    color: blue;
}
[id='eg2-bar'] {
    color: red;
}
.eg3-foo {
    color: blue;
}
.eg3-foo.eg3-foo {
    color: red;
}

JSFiddle

D'accord, alors comment ça marche?

Les premier et deuxième exemples fonctionnent de la même manière, le premier est littéralement une classe et le second est le sélecteur d'attributs. Les sélecteurs de classes et d'attributs ont une spécificité identique. .eg1/2-bar n'hérite pas de sa couleur de .eg1/2-foo car il a sa propre règle.

Le troisième exemple ressemble à des sélecteurs de qualification ou de chaînage, mais ce n'est ni l'un ni l'autre. Le chaînage consiste à préfixer des sélecteurs avec des parents, des ancêtres, etc. cela ajoute de la spécificité. La qualification est similaire, mais vous définissez l'élément auquel le sélecteur s'applique. qualification: ul.class et chaînage: ul .class

Je ne sais pas ce que vous appelleriez cette technique, mais le comportement est intentionnel et est documenté par W3C

Les occurrences répétées du même sélecteur simple sont autorisées et augmentent la spécificité.

Que se passe-t-il lorsque la spécificité entre deux règles est identique?

Comme @ BoltClock l'a souligné , s'il y a plusieurs déclarations! Importantes, alors la spécification impose que la la plus spécifique celle-ci ait priorité.

Dans l'exemple ci-dessous, les deux .foo et .bar ont une spécificité identique, donc le comportement revient à la nature en cascade de CSS, où la dernière règle déclarée dans CSS revendique la priorité, c'est-à-dire .foo.

[~ # ~] html [~ # ~] 

<div>
    <p class="foo bar">foobar</p>
</div>

[~ # ~] css [~ # ~] 

.bar {
    color: blue !important;
}
.foo {
    color: red !important;
}

JSFiddle

4
Jack Tuck