Est-ce que !important est mauvais pour les performances ?

Question

Je les déteste, ils défient la nature en cascade des CSS, et si vous ne les utilisez pas avec précaution, vous vous retrouvez dans une boucle où vous ajoutez plus de !important .

Mais je voudrais savoir s'ils sont mauvais pour les performances ?

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

EDIT 2
BoltClock a fait remarquer que s'il y a 2 !important les spécifications indiquent qu'elles choisiront la plus spécifique.

Answer 1

Cela ne devrait pas avoir d'effets perceptibles 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 manipulation écrasement de règles CSS.

Il semble qu'il s'agisse d'une simple vérification de "important".

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

De même, 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 syntaxique descendant écrit manuellement. Dans les deux cas, chaque CSS est analysé en un objet StyleSheet, chaque objet contenant des CSS règles.

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)

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

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

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

Answer 2

Je ne pense pas que !important est intrinsèquement mauvais en termes de rapidité d'exécution des règles par le navigateur (il ne fait pas partie du sélecteur, mais seulement de la déclaration).

Cependant, comme nous l'avons déjà dit, cela réduira la maintenabilité de votre code, et risque donc de le faire grossir inutilement en raison de modifications futures. L'utilisation de !important réduirait aussi probablement les performances des développeurs.

Si vous étiez vraiment pointilleux, on pourrait aussi dire que !important ajoute 11 octets supplémentaires à votre fichier CSS, ce n'est pas vraiment beaucoup, mais je suppose que si vous avez un bon nombre de !important dans votre feuille de style, cela pourrait s'accumuler.

C'est juste mon avis, malheureusement je n'ai pas pu trouver de repères sur comment !important pourrait affecter les performances.

Answer 3

!important a sa place. Faites-moi confiance sur ce point. Elle m'a sauvé de nombreuses fois et est souvent plus utile comme solution à court terme, avant de trouver une méthode plus longue et plus élégante pour résoudre votre problème.

Cependant, comme la plupart des choses, il a été maltraité, mais il n'y a pas lieu de s'inquiéter des "performances". Je parie qu'un petit GIF 1x1 a plus d'impact sur les performances d'une page Web que !important.

Si vous souhaitez optimiser vos pages, il existe de nombreuses autres possibilités. !important les routes à prendre ;) ;)

Answer 4

Ce qui se passe ici en coulisses, c'est qu'au moment où votre CSS est traité, le navigateur le lit, rencontre une !important et le navigateur revient en arrière pour appliquer les styles définis par l'attribut !important . Ce processus supplémentaire peut sembler être une petite étape supplémentaire, mais si vous répondez à de nombreuses demandes, les performances en pâtiront. (Source)

Utiliser !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 réflexion d'un développeur lorsqu'il utilise !important :

1. Mon rocking CSS ne fonctionne pas... grrrr.
2. Que dois-je faire maintenant ?
3. Et puis !important Ouais.... maintenant ça marche bien.

Cependant, ce n'est pas une bonne approche à utiliser !important juste 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 performance - mais cela nous oblige également à utiliser de nombreuses lignes de code supplémentaires puisque nous remplaçons d'autres propriétés par des propriétés de type !important et notre CSS devient encombré de code inutile. Ce que nous devrions faire à la place, c'est d'abord bien gérer le CSS, et ne pas laisser les propriétés se substituer les unes aux autres.

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

Answer 5

Je suis d'accord avec vous pour ne pas l'utiliser car c'est une mauvaise pratique, indépendamment des performances. Rien que pour cette raison, j'éviterais d'utiliser !important dans la mesure du possible.

Mais sur la question de la performance : Non, ça ne devrait pas être perceptible. Il pourrait avoir un certain effet, mais il devrait être si minuscule que vous ne le remarquerez jamais, ni même que vous le remarquerez. devrait vous vous en inquiétez.

Si c'est suffisamment significatif pour être perceptible, alors vous avez probablement des problèmes plus importants dans votre code que la simple !important . La simple utilisation d'un élément syntaxique normal des langages de base que vous utilisez ne posera jamais de problème de performance.

Laissez-moi 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 possède évidemment son propre moteur de rendu, avec ses propres optimisations. La question est donc la suivante : quelles sont les implications en termes de performances dans chaque navigateur ? Peut-être !important fonctionne mal dans un navigateur mais très bien dans un autre ? Et peut-être que dans les prochaines versions, ce sera l'inverse ?

Je pense que ce que je veux dire, c'est qu'en tant que développeurs web, nous ne devrions pas penser (ou avoir besoin de penser) aux implications en termes de performances des constructions syntaxiques individuelles des langages que nous utilisons. Nous devrions utiliser ces constructions syntaxiques parce que c'est le bon moyen de réaliser ce que nous voulons faire, et non pas en fonction de leurs performances.

Les questions relatives aux performances doivent être posées conjointement avec l'utilisation de profileurs afin d'analyser les points de blocage de votre système. Commencez par corriger les éléments qui vous ralentissent vraiment. Il est presque certain qu'il y a des problèmes bien plus importants à résoudre avant de descendre au niveau des constructions CSS individuelles.