La verdad sobre el rendimiento del selector CSS

La verdad sobre el rendimiento del selector CSS |  consejos CSS

 

Definitivamente dejemos que Patrick Brosset hable sobre el rendimiento de CSS de la manera más accesible y práctica posible. No es que CSS sea siempre lo que aumenta la velocidad, o incluso la fruta más baja cuando se trata de mejorar el rendimiento.

Pero si está buscando ganancias en el lado de CSS, Patrick tiene una buena manera de detectar sus selectores más caros usando Edge DevTools:

  • Abra las herramientas de desarrollo.
  • Dirígete a la pestaña Rendimiento.
  • Asegúrese de que "Habilitar instrumentación de renderizado avanzada" esté habilitado. Me hizo tropezar en el proceso.
  • Guardar una carga de página.
  • Abra la pestaña "De abajo hacia arriba" en el informe.
  • Compruebe el tamaño de sus estilos recalculados.

 

DevTools con la pestaña Rendimiento abierta y un resumen de eventos.

Desde allí, haga clic en cualquiera de los eventos de estilo recalculados en la vista de cascada principal y obtendrá una nueva pestaña "Estadísticas del selector". ¡Mira toda esa bondad pegajosa!

Ahora ve todos los selectores que se han procesado y se pueden ordenar por cuánto tiempo tardaron, cuántas veces coincidieron, cuántas veces coincidieron y algo llamado "número de rechazos rápidos" que aprendí es el número de artículos que eran fáciles y rápidos de soltar del partido.

Muchas ideas aquí si CSS es realmente el cuello de botella que debe investigarse. Pero lea la publicación completa de Patrick en el blog de Microsoft Edge, ya que profundiza mucho más en los porqués y las razones, y recorre un estudio de caso integral.

Si quieres conocer otros artículos parecidos a La verdad sobre el rendimiento del selector CSS puedes visitar la categoría Estilo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas