html - selectores - ¿Cuál es el impacto en el rendimiento del selector universal?
selector padre css (3)
Estoy tratando de encontrar algunos ajustes simples en el rendimiento del lado del cliente en una página que recibe millones de visitas mensuales a la página. Una preocupación que tengo es el uso del selector universal CSS ( * ).
Como ejemplo, considere un documento HTML muy simple como el siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Example</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
El selector universal aplicará la declaración anterior al body , elementos h1 p , ya que esos son los únicos en el documento.
En general, ¿vería un mejor rendimiento de una regla como:
body, h1, p {
margin: 0;
padding: 0;
}
¿O tendría esto exactamente el mismo efecto neto?
¿El selector universal realiza más trabajos de los que quizás no tenga conocimiento?
Me doy cuenta de que el impacto en el rendimiento en este ejemplo puede ser muy pequeño, pero espero aprender algo que pueda conducir a mejoras de rendimiento más significativas en situaciones del mundo real.
No pretendo anular los estilos en la regla del selector universal con otros estilos más adelante en el documento, es decir, usarlo como una hoja de estilo de restablecimiento rápido y sucio. En realidad, estoy tratando de usar el selector universal exactamente como creo que fue intencionado: aplicar un conjunto de reglas a todos los elementos del documento de una vez por todas.
En última instancia, espero determinar si hay algo intrínsecamente lento en el selector universal, o si solo tiene una mala reputación debido al uso indebido desenfrenado. Si * { margin: 0; } * { margin: 0; } es literalmente equivalente a body, h1, p { margin: 0; } body, h1, p { margin: 0; } , entonces eso responderá a mi pregunta, y sabré ir con el anterior ya que es más conciso. De lo contrario, quiero entender por qué el selector universal funciona más lentamente.
En los navegadores modernos, el impacto en el rendimiento es insignificante, siempre que no se apliquen efectos lentos a cada elemento (por ejemplo, la sombra de cuadro, la rotación del eje z). El mito de que el selector universal es lento es una resaca de hace diez años cuando era lento.
Referencia: http://www.kendoui.com/blogs/teamblog/posts/12-09-28/css_tip_star_selector_not_that_bad.aspx
Entiendo que los comodines tienen un impacto en el rendimiento, pero en los sitios más pequeños el impacto es insignificante. Los comodines son herramientas muy útiles para construir un sitio basado en la mejora progresiva. Obviamente, usar algo como HTML * realmente afecta el rendimiento en sitios más grandes, pero hacerlo más específico, como #element_id * , ayuda a realizar rápidamente cambios universales en los elementos secundarios.
El comodín está ahí por una razón después de todo. Solo debes entender que usarlo será más beneficioso que no usarlo. Depende del contexto.
Utilizo comodines y selectores genéricos cuando hago plantillas CSS. También es una excelente manera de ajustar rápidamente una variedad de elementos dentro de un tema de WordPress desconocido usando estilos personalizados.
Incluso Bootstrap, que es popular y simplificado, usa comodines en las circunstancias correctas.
Referencias
- http://getbootstrap.com/css/
- Gustafson, A. 2015. Diseño web adaptativo: creación de experiencias enriquecedoras con mejora progresiva. Berkeley, (CA): Nuevos Jinetes.
Evitar los selectores genéricos siempre acelerará la representación de tu página. El comodín * es lento, especialmente cuando tus páginas se convierten en nidos complejos y tus elementos se disparan.
Siempre debe especificar una ID al nivel más bajo que pueda (me doy cuenta de que esto se vuelve casi imposible, especialmente cuando se trata de cosas como resultados de la base de datos). Pero cuando usas selectores como
.mysuperclass ul li p a
Tiene una clase seguida de cuatro selectores genéricos, lo que significa que para cada elemento de .mysuperclass, el motor de representación debe recorrer cada elemento de ese elemento primario que busca estas reglas.
En resumen, mi respuesta es ser lo más específico posible con su CSS, y profundizar lo más que pueda en el DOM con sus selectores. Evite los comodines y los genéricos.