¿Cómo probar el rendimiento del selector de CSS?

¿Cómo voy a probar los puntos de referencia de rendimiento de diferentes selectores de CSS? He leído artículos como este . Pero no sé si es aplicable a mi sitio web porque usó una página de prueba con 20000 clases y 60000 elementos DOM.

Debo preocuparme, ¿el rendimiento realmente se degrada tanto en función de la estrategia de CSS que toma?

Por ejemplo, me gusta hacer esto …

.navbar { background:gray; } .navbar > li { display:inline;background:#ffffff; }  

… pero podría hacer esto …

 .navbar { background:gray; } .navbar-item { display:inline;background:#ffffff; }  

Algunos dirían (y podrían estar en lo correcto) que la segunda opción sería más rápida.

Pero si multiplicas el segundo método en todas las páginas, veo las siguientes desventajas:

  1. El tamaño de la página boostá porque todos los elementos tienen clases
  2. El número de clases CSS puede ser bastante grande, lo que requeriría más análisis de clase css

Mis páginas parecen tener ~ 8KB con ~ 1000 elementos DOM.

Entonces, mi verdadera pregunta es ¿cómo puedo crear un banco de pruebas donde pueda probar los deltas basados ​​en la estrategia de tamaños de página web realistas? Específicamente, ¿cómo sé cuánto tiempo tarda una página en mostrarse? javascript? ¿cómo exactamente?

Ayuda y simplemente opiniones son bienvenidas!

Mira la extensión de Page Speed para Firefox. Una vez que lo ejecuta para una página, debajo de “Usar selectores de CSS eficientes” le da una lista de los selectores de CSS ofensivos junto con explicaciones breves.

Además, hay otra extensión para Chrome – Speed ​​Tracer . Entre otras cosas, ofrece información sobre el tiempo invertido en el recálculo del estilo CSS y la coincidencia de selectores. Esto puede ser justo lo que estás buscando.

Al leer el artículo que enumeró, parece que no vale la pena preocuparse por la diferencia entre los dos tipos de selectores. Asegúrese de que el CSS esté lo suficientemente claro como para entenderlo, y solo preocúpese por la velocidad después de que resulte ser el cuello de botella.

realmente no hay necesidad de hacer el Menú 1

puedes tener una barra de navegación de clase css

recuerde también que los archivos css externos pueden ser minimizados y almacenados en caché mientras que html no puede. El rendimiento también es un término relativo: ¿lo visitan con frecuencia? ¿La red es lenta? ¿Son empleados estatales con computadoras antiguas que ejecutan IE6?

No tengo una respuesta directa a su pregunta sobre cómo crear un progtwig de prueba de velocidad de página. Sin embargo, le ofreceré algunas pautas de mejores prácticas a seguir que lo guiarán en la dirección correcta.

El tamaño de la página boostá porque todos los elementos tienen clases

El tamaño de agregar numerosas clases es muy insignificante por dos razones:
1) El tamaño adicional en su hoja de estilo se almacenará en caché (suponiendo que use elementos externos, lo cual debería hacer).
2) El marcado HTML de agregar numerosas clases al DOM es 1kb como máximo. Si es más, entonces necesita aprovechar mejor la herencia.

El número de clases CSS puede ser bastante grande, lo que requeriría más análisis de clase css

Tendrás más clases de CSS, sí … pero las reglas vinculantes para una clase de CSS son en realidad más rápidas que la alternativa de usar selectores descendentes o adyacentes.

Siempre que evite los selectores descendentes / adyacentes tanto como sea razonablemente posible, use hojas de estilo externas y aproveche la herencia para reducir las reglas duplicadas, no debería tener que preocuparse por las pruebas de estrés del rendimiento de CSS.