¿Cuál es el impacto en el rendimiento del selector universal?
Estoy tratando de encontrar algunos ajustes simples de rendimiento del lado del cliente en una página que recibe millones de visitas mensuales. 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 a la body, h1 y p elementos, 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 esto tendría exactamente el mismo efecto neto?
¿Realiza el selector universal más trabajo del que yo 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 de la regla del selector universal con otros estilos más adelante en el documento - es decir, usarlo como una hoja de estilo de reinicio rápido y sucio. En realidad estoy tratando de usar el selector universal exactamente como creo que está destinado-para aplicar un conjunto de reglas a todos los elementos del documento, de una vez por todas.
En última instancia, espero determinar si hay algo inherentemente lento en el selector universal, o si simplemente tiene una mala reputación debido al mal uso desenfrenado. Si {[6] } es literalmente equivalente a body, h1, p { margin: 0; }, entonces eso responderá a mi pregunta, y sabré ir con la primera ya que es más conciso. Si no, quiero entender por qué el selector universal funciona más lentamente.
3 answers
En los navegadores modernos el impacto en el rendimiento es insignificante, siempre que no aplique efectos lentos a todos los elementos (por ejemplo. caja-sombra, 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
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-17 15:53:10
Entiendo que los comodines tienen un impacto en el rendimiento, pero en 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 hacer cambios universales rápidamente en los elementos secundarios.
El comodín está ahí por una razón después de todo. Solo tienes que entender al usarlo será más beneficioso que no usarlo. Depende del contexto.
Uso comodines y selectores genéricos cuando hago plantillas CSS. También es una gran manera de ajustar rápidamente una gama de elementos dentro de un tema de WordPress desconocido utilizando estilos personalizados.
Incluso Bootstrap, que es popular y simplificado, usa comodines en las circunstancias correctas.
Referencias:
- http://getbootstrap.com/css/ [15] Gustafson, A. 2015. Diseño Web Adaptativo: Creación de Experiencias Ricas con Mejora Progresiva. Berkeley, (CA): New Riders.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-11 12:03:41
Evitar los selectores genéricos siempre acelerará el renderizado 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 un ID hasta el nivel más bajo que pueda (me doy cuenta de que esto se vuelve casi imposible, especialmente cuando se trata de cosas como los resultados de la base de datos). Pero cuando se utilizan selectores como
.mysuperclass ul li p a
Tiene una clase seguida de cuatro selectores genéricos, lo que significa que para cada elemento .mysuperclass el motor de renderizado tiene que recorrer cada elemento en ese padre buscando estas reglas.
En resumen, mi respuesta es ser lo más específico posible con su CSS, y profundizar en la medida de lo posible en el DOM con sus selectores. Evite comodines y genéricos.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-06-01 17:59:45