css - attribute - ¿Es importante para el rendimiento?
title css (9)
Lo que está sucediendo aquí detrás de la escena es que a medida que se procesa su CSS, el navegador lo lee, encuentra un atributo !important y el navegador vuelve a aplicar los estilos definidos por !important . Este proceso adicional puede parecer un pequeño paso adicional, pero si está atendiendo muchas solicitudes, tendrá un impacto en el rendimiento. (Source)
Usar! Important en tu CSS generalmente significa desarrollador narcisista y egoísta o perezoso. Respeta a los desarrolladores por venir ...
El pensamiento de un desarrollador cuando se usa !important :
- Mi balanceo de CSS no está funcionando ... grrrr.
- ¿¿Qué debería hacer ahora??
- Y luego
!importantsí ... ahora está funcionando bien.
Sin embargo, no es un buen enfoque de uso, ya que no hemos gestionado bien el CSS. Crea muchos problemas de diseño, que son peores que los problemas de rendimiento, pero también nos obliga a usar muchas líneas de código adicionales, ya que estamos anulando otras propiedades con !important y nuestro CSS se llena de código inútil. Lo que deberíamos hacer es, en primer lugar, administrar muy bien el CSS y no dejar que las propiedades se anulen entre sí.
Podemos usar !important Pero úsalo con moderación y solo cuando no haya otra salida.
Los odio, desafía la naturaleza en cascada de CSS, y si no los usas con cuidado, terminas agregando más.
Pero quiero saber si son malos para el rendimiento?
EDITAR
De las respuestas (rápidas) puedo concluir que no tendrá un impacto (significativo) en el rendimiento. Pero es bueno saberlo, incluso si es solo un argumento adicional para desalentar a otros;).
Editar 2
BoltClock señaló que si hay 2 declaraciones !important las especificaciones dicen que elegirá la más específica.
¡No puedo prever !important Impedir el rendimiento !important , no inherentemente de todos modos. Sin embargo, si su CSS está plagado de !important , eso indica que ha superado la selección de los selectores y ha sido demasiado específico y se ha quedado sin padres o calificativos para agregar especificidad. En consecuencia, su CSS se habrá hinchado (lo que impedirá el rendimiento) y será difícil de mantener.
Si desea escribir CSS eficiente, entonces solo debe ser tan específico como necesite y escribir CSS modular . Es recomendable abstenerse de usar ID (con hashes), encadenar selectores o selectores calificados.
Las identificaciones con el prefijo # en CSS son muy específicas, hasta el punto en que 255 clases no anularán una identificación (el violín es: @Faust ). Sin embargo, las identificaciones también tienen un problema de enrutamiento más profundo, tienen que ser únicas, esto significa que no puedes reutilizarlas para estilos duplicados, por lo que terminas escribiendo css lineal con estilos repetidos. La repercusión de hacer esto variará de un proyecto a otro, dependiendo de la escala, pero la capacidad de mantenimiento sufrirá inmensamente y, en los casos extremos, el rendimiento también.
¿Cómo puede agregar especificidad sin !important , encadenamiento, calificación o ID (a saber, # )
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;
}
Bien, entonces, ¿cómo funciona eso?
El primer y segundo ejemplo funcionan de la misma manera, el primero es literalmente una clase y el segundo es el selector de atributos. Las clases y los selectores de atributos tienen una especificidad idéntica. .eg1/2-bar no hereda su color de .eg1/2-foo porque tiene su propia regla.
El tercer ejemplo se parece a los selectores de calificación o de encadenamiento, pero no es ninguno. Encadenamiento es cuando prefieres los selectores con padres, ancestros, etc. esto añade especificidad. La calificación es similar, pero se define el elemento al que se aplica el selector. ul.class : ul.class y encadenamiento: ul .class
No estoy seguro de lo que llamaría esta técnica, pero el comportamiento es intencional y está documentado por el W3C
Se permiten repeticiones del mismo selector simple y aumentan la especificidad.
¿Qué sucede cuando la especificidad entre dos reglas es idéntica?
Como señaló @BoltClock , si hay varias declaraciones importantes, las especificaciones dictan que la más específica debe tener prioridad.
En el ejemplo a continuación, tanto .foo como .bar tienen una especificidad idéntica, por lo que el comportamiento recae en la naturaleza en cascada de CSS, por lo que la última regla declarada en CSS .foo precedencia, es decir, .foo .
HTML
<div>
<p class="foo bar">foobar</p>
</div>
CSS
.bar {
color: blue !important;
}
.foo {
color: red !important;
}
Estoy de acuerdo contigo en no usarlo porque es una mala práctica, independientemente del rendimiento. Solo por esas razones, evitaría usar !important siempre que sea posible.
Pero sobre la cuestión del rendimiento: no, no debería ser perceptible. Podría tener algún efecto, pero debería ser tan pequeño que nunca debería notarlo, ni debería preocuparse por ello.
Si es lo suficientemente significativo como para ser notorio, entonces es probable que tenga problemas más grandes en su código que simplemente !important El uso simple de un elemento de sintaxis normal de los idiomas centrales que está utilizando nunca será un problema de rendimiento.
Permítame responder a su pregunta con una pregunta retórica a cambio; un ángulo que probablemente no consideraste: ¿a qué navegador te refieres?
Obviamente, cada navegador tiene su propio motor de renderización, con sus propias optimizaciones. Entonces la pregunta ahora es: ¿cuáles son las implicaciones de rendimiento en cada navegador? ¿Quizás !important funciona mal en un navegador pero realmente bien en otro? ¿Y quizás en las próximas versiones, será al revés?
Supongo que mi punto aquí es que nosotros, como desarrolladores web, no deberíamos pensar (o debemos pensar en) las implicaciones de rendimiento de las construcciones de sintaxis individuales de los lenguajes que estamos usando. Deberíamos usar esas construcciones de sintaxis porque son la forma correcta de lograr lo que queremos hacer, no debido a su rendimiento.
Las preguntas de rendimiento se deben hacer junto con el uso de perfiladores para analizar dónde se encuentran los puntos de pellizco en su sistema. Arregla las cosas que realmente te están ralentizando primero. Es casi seguro que habrá problemas mucho más grandes que resolver antes de llegar al nivel de las construcciones de CSS individuales.
Habiendo tenido que usarlo varias veces antes, personalmente no he notado ningún impacto de rendimiento demostrable cuando lo uso.
Como nota, vea la respuesta a esta pregunta de pila por una razón que podría querer usar !important .
También mencionaré algo que todos los demás no han mencionado. !important es la única forma de anular el css en línea antes de escribir una función javascript (que afectará su rendimiento aunque sea solo un poco). Por lo tanto, podría ahorrarle algo de tiempo de rendimiento si necesita anular el css en línea.
No afecta notablemente el rendimiento. Sin embargo, reduce la capacidad de mantenimiento de su código y, por lo tanto, es probable que disminuya el rendimiento a largo plazo.
No creo que lo !important sea intrínsecamente malo en términos de la rapidez con la que el navegador coincide con las reglas (no forma parte del selector, solo forma parte de la declaración)
Sin embargo, como ya se ha indicado, reducirá la capacidad de mantenimiento de su código y, por lo tanto, es probable que crezca innecesariamente en tamaño debido a futuros cambios. El uso de !important probablemente también reduciría el rendimiento del desarrollador.
Si estuvieras siendo realmente exigente, también podrías decir que !important agrega 11 bytes adicionales a tu archivo CSS, esto no es realmente mucho, pero supongo que si tienes algunos pocos !important en tu hoja de estilo, podría sumarse.
Solo mis pensamientos, desafortunadamente, no pude encontrar puntos de referencia sobre qué tan !important podría afectar el rendimiento.
No debería tener ningún efecto sobre el rendimiento realmente. Ver el analizador CSS de /source/layout/style/nsCSSDataBlock.cpp#572 en /source/layout/style/nsCSSDataBlock.cpp#572 y creo que es la rutina relevante, el manejo de la sobrescritura de las reglas CSS.
Simplemente parece ser una simple comprobación de "importante".
if (aIsImportant) {
if (!HasImportantBit(aPropID))
changed = PR_TRUE;
SetImportantBit(aPropID);
} else {
// ...
Además, los comentarios en 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.
*
* ...
*/
Firefox usa un analizador de arriba hacia abajo escrito manualmente. En ambos casos, cada archivo CSS se analiza en un objeto StyleSheet, cada objeto contiene reglas CSS.
Firefox luego crea árboles de contexto de estilo que contienen los valores finales (después de aplicar todas las reglas en el orden correcto)
De: http://taligarsiel.com/Projects/howbrowserswork1.htm#CSS_parsing
Ahora, puede ver fácilmente, como en el caso del modelo de objetos descrito anteriormente, el analizador puede marcar fácilmente las reglas afectadas por el !important , sin mucho costo posterior. La degradación del rendimiento no es un buen argumento en contra.
Sin embargo, la capacidad de mantenimiento tiene un impacto (como se mencionó en otras respuestas), que podría ser su único argumento en contra de ellos.
hmm ...! importante o !! importante?
Vayamos a través de este paso a paso:
- El analizador tiene que verificar la importancia de cada propiedad, independientemente de si la usa o no, por lo que la diferencia de rendimiento aquí es 0
- Al sobrescribir una propiedad, el analizador tiene que comprobar si la propiedad que se sobrescribe es importante o no, por lo que la diferencia de rendimiento aquí es 0 nuevamente.
- Si la propiedad que se sobrescribe es importante, tiene que sobrescribir la propiedad - ¡El impacto de rendimiento de -1 para no usarla!
- Si la propiedad que se sobrescribe es importante, se omite la sobrescritura de la propiedad: ¡el aumento de rendimiento de +1 para usar!
- Si la nueva propiedad es importante, el análisis tiene que sobrescribirla independientemente de la propiedad que se sobrescriba es importante o importante: la diferencia de rendimiento 0 nuevamente
Así que supongo que! Important en realidad tiene un mejor rendimiento, ya que puede ayudar al analizador a omitir muchas propiedades que de lo contrario no se omitirá.
y como @ryan menciona a continuación, es la única forma de anular CSS en línea y evitar el uso de Javascript ... así que otra forma de evitar un impacto de rendimiento innecesario
hmm ... resulta que! importante es importante
y también,
- usar! important ahorra mucho tiempo para un desarrollador
- a veces te salva de rediseñar todo el css
- a veces html o el archivo css principal no está bajo su control, por lo que ahorra su vida allí
- Obviamente, evita que elementos importantes se sobrescriban accidentalmente por otros elementos importantes.
- y, a veces, los navegadores simplemente no seleccionan las propiedades correctas, sin ser demasiado específicos en los selectores, por lo que el uso de important es realmente importante y le ahorra escribir toneladas de selectores de CSS específicos en su CSS. así que supongo que incluso si usas más bytes para escribir, importante, podría ahorrar bytes en otros lugares. y todos sabemos, los selectores de CSS pueden ensuciarse.
Así que supongo que usar! Important puede hacer felices a los desarrolladores, y creo que eso es muy importante : D
!important tiene su lugar. Confía en mí en eso. Me ha salvado muchas veces y, a menudo, es más útil como solución a corto plazo, antes de poder encontrar un método más largo y elegante para su problema.
Sin embargo, como la mayoría de las cosas, se ha abusado, pero no hay que preocuparse por el "rendimiento". Apuesto a que un pequeño GIF de 1x1 tiene más de un éxito de rendimiento en una página web que! Important.
Si desea optimizar sus páginas, hay muchas más rutas importantes que tomar;);)