¡Hola a todos! Hay muchos consejos y trucos sobre el estilo CSS. Pero no en este artículo. ¡Hoy quiero hablar sobre cómo usar CSS de manera más eficiente y hacer que su plataforma sea más rápida! 1. Selectores simples CSS tiene una variedad amplia y flexible de opciones de codificación que puede usar para orientar los elementos HTML para el estilo. A lo largo de los años, los expertos han aconsejado a los desarrolladores que escriban selectores simples para reducir la carga en el navegador y mantener el código limpio y simple. Incluso los selectores de CSS más complejos tardan milisegundos en analizarse, pero reducir la complejidad reducirá el tamaño de los archivos y facilitará el análisis del navegador. No haga: main > div.blog-section + article > * { /* Code here */ } HACER: .hero-image { /* Code here */ } 2. CSS crítico en línea Puede incorporar reglas CSS críticas. Esto mejora el rendimiento al: Identificar los estilos esenciales utilizados por los elementos de la mitad superior de la página (aquellos visibles cuando se carga la página) Incorporando ese CSS crítico en una etiqueta en su <style> <head> Cargar el CSS restante de forma asincrónica para evitar el bloqueo de procesamiento. Esto se puede lograr cargando la hoja de estilo en un estilo de "impresión" al que el navegador le da una prioridad más baja. JavaScript luego lo cambia a un estilo de medios "todos" una vez que la página se ha cargado. <style> /* critical styles */ body { font-family: sans-serif; color: #111; } </style> <!-- load remaining styles --> <link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'"> <noscript> <link rel="stylesheet" href="/css/main.css"> </noscript> 3. Evite @import La regla at permite incluir cualquier archivo CSS dentro de otro. Esta parece una forma razonable de cargar fuentes y componentes más pequeños. Pero no lo es. @import Las reglas se pueden anidar, por lo que el navegador debe cargar y analizar cada archivo en serie. @import Múltiples etiquetas dentro del HTML cargarán archivos CSS en paralelo, lo que es considerablemente más eficiente, especialmente cuando se usa HTTP/2. <link> No haga: /* main.css */ @import url("style1.css"); @import url("style2.css"); @import url("style3.css"); HACER: <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="carousel.css"> 4. Precargar archivos CSS La etiqueta proporciona un atributo de precarga opcional que puede iniciar una descarga inmediatamente en lugar de esperar la referencia real en el HTML. <link> <!-- preload styles --> <link rel="preload" href="/css/main.css" as="style" /> <!-- some code --> <!-- load preloaded styles --> <link rel="stylesheet" href="/css/main.css" /> 5. Representación progresiva En lugar de usar un solo archivo CSS para todo el sitio, es una técnica que define hojas de estilo individuales para componentes separados. Cada uno se carga inmediatamente antes de que se haga referencia a un componente en el HTML. la representación progresiva Cada sigue bloqueando la representación, pero durante menos tiempo, porque el archivo es más pequeño. La página se puede usar antes, porque cada componente se procesa en secuencia; la parte superior de la página se puede ver mientras se carga el contenido restante. <link> <head> <!-- core styles used across components --> <link rel='stylesheet' href='base.css' /> </head> <body> <!-- header component --> <link rel='stylesheet' href='header.css' /> <header>...</header> <!-- primary content --> <link rel='stylesheet' href='content.css' /> <main> <!-- form styling --> <link rel='stylesheet' href='form.css' /> <form>...</form> </main> <!-- header component --> <link rel='stylesheet' href='footer.css' /> <footer>...</footer> </body> 6. Utilice la representación de consulta de medios Un solo concatenado y minimizado beneficiará a la mayoría de los sitios, pero los sitios que requieren una cantidad significativa de estilos de pantalla más grandes podrían dividir los archivos CSS y cargarlos mediante una consulta de medios. <!-- core styles loaded on all devices --> <link rel="stylesheet" href="core.css"> <!-- served to screens at least 40em wide --> <link rel="stylesheet" media="(min-width: 40em)" href="40em.css"> <!-- served to screens at least 80em wide --> <link rel="stylesheet" media="(min-width: 80em)" href="80em.css"> 7. Adopta imágenes SVG Los gráficos vectoriales escalables (SVG) se utilizan normalmente para logotipos, gráficos, iconos y diagramas más simples. En lugar de definir el color de cada píxel como los mapas de bits JPG y PNG, un SVG define formas como líneas, rectángulos y círculos en XML. Los SVG más simples son más pequeños que los mapas de bits equivalentes y pueden escalarse infinitamente sin perder definición. Un SVG se puede insertar directamente en el código CSS como imagen de fondo. Esto puede ser ideal para iconos reutilizables más pequeños y evita solicitudes HTTP adicionales. Ejemplo de SVG: <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /> <svg> Ejemplo de uso de SVG: .mysvgbackground { background: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"><circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /></svg>') center center no-repeat; } 8. Dale estilo a los SVG con CSS Los SVG se pueden incrustar directamente en un documento HTML. Esto agrega los nodos SVG directamente al DOM. Por lo tanto, todos los atributos de estilo SVG se pueden aplicar mediante CSS. SVG en DOM: <body> <svg class="mysvg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle cx="400" cy="300" r="50" /> <svg> </body> Estilos SVG: circle { stroke-width: 1em; } .mysvg { stroke-width: 5px; stroke: #f00; fill: #ff0; } El volumen de código SVG incrustado se reduce y los estilos CSS se pueden reutilizar o animar según sea necesario. Tenga en cuenta que el uso de un SVG dentro de una etiqueta o como una imagen de fondo CSS significa que están separados del DOM, y el estilo CSS no tendrá ningún efecto. <img> 9. Evite la codificación Base64 Puede codificar imágenes en cadenas base64, que puede usar como URI de datos en etiquetas HTML y fondos CSS. <img> Esto reduce la cantidad de solicitudes HTTP, pero perjudica el rendimiento de CSS: Las cadenas base64 pueden ser un 30 % más grandes que su equivalente binario. los navegadores deben decodificar la cadena antes de que se pueda usar una imagen, y alterar un píxel de la imagen invalida todo el archivo CSS. Solo considere la codificación base64 si está utilizando imágenes muy pequeñas que cambian con poca frecuencia donde la cadena resultante no es significativamente más larga que una URL. No haga: .background { background-image: url('data:image/jpg;base64,ABC123...'); } HACER: .svgbackground { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><circle cx="300" cy="300" r="150" stroke-width="3" stroke="#f00" fill="#ff0" /></svg>'); } 10. Consejos breves Reemplazar imágenes con efectos CSS: definir una "imagen" usando el código CSS usa considerablemente menos ancho de banda y es más fácil de modificar o animar más adelante. Use técnicas modernas de diseño: y . Flexbox Grid Use animaciones CSS: y las siempre serán más rápidas que JavaScript. las transiciones animaciones Evite las propiedades costosas: algunos CSS requieren más procesamiento que otros. border-radius box-shadow text-shadow opacity transform filter position: fixed backdrop-filter background-blend-mode PD ¡Gracias por leer! Más artículos sobre desarrollo frontend: Los 9 mejores consejos para mejorar el rendimiento de React Algunos pequeños secretos de HTML y CSS en un artículo Principales consejos y prácticas recomendadas de HTML 5 y CSS 3 menos conocidos Los 12 mejores consejos menos conocidos para las mejores prácticas de JavaScript
