La verdad sobre el rendimiento del selector CSS | trucos CSS

Dios, déjalo ir Patrick Brossett hablará sobre el rendimiento de CSS de la forma más accesible y práctica posible. No es que CSS siempre lo sea lo que aumenta la velocidado incluso la fruta al alcance de la mano cuando se trata de mejorar la productividad.

Pero si Buscando ganancias en el lado CSS de las cosas, Patrick tiene una buena manera de olfatear sus selectores más caros usando Edge DevTools:

• Abra las herramientas de desarrollo.
• Dirígete a la pestaña Rendimiento.
• Asegúrese de habilitar la opción "Habilitar el kit de herramientas de renderizado avanzado". Esto me hizo tropezar en el proceso.
• Carga de página de registro.
• Abra la pestaña De abajo hacia arriba del informe.
• Comprueba tu talla en tus estilos recalculados.

Desde aquí, haga clic en uno de los eventos de estilo recalculados en la vista de cascada principal y obtendrá una nueva pestaña "Estadísticas de selección". ¡Mira toda esa bondad pegajosa!

Ahora ve todos los selectores que se han procesado y se pueden ordenar por cuánto tiempo tomó, cuántas veces se emparejaron, la cantidad de intentos de coincidencia y algo llamado "recuento de rechazo rápido" que he aprendido es la cantidad de elementos que fueron fáciles y rápidos de eliminar de una partida.

Aquí hay mucha información sobre si CSS es realmente el cuello de botella que debe explorarse. Pero lea la publicación completa de Patrick en el blog de Microsoft Edge porque profundiza mucho más en los porqués y los cómos y repasa un estudio de caso completo.

Enlace directo →