Optimización del rendimiento de front-end: optimización del rendimiento de CSS

Este artículo presenta algunos esquemas de optimización del rendimiento de CSS.

Uno, CSS clave en línea de la primera pantalla

El proceso aproximado de renderizado:

• Cargar recursos HTML
• Analizar HTML
• Cargue recursos CSS y cree un árbol DOM al mismo tiempo
• Analizar CSS y renderizar el árbol DOM al mismo tiempo

Cuando el archivo CSS es demasiado grande, permanecerá en el paso 3. Cuando la velocidad de Internet es lenta, a menudo no hay estilo al abrir el sitio web.

Por lo tanto, primero debemos cargar parte del CSS (el CSS utilizado para la primera pantalla), y otros CSS con una prioridad más baja se cargarán de forma asincrónica.

Incluir el CSS clave necesario para representar el contenido de la mitad superior de la página en el HTML permite que el CSS se descargue más rápidamente. Se puede renderizar después de que se complete la descarga de HTML y se avance el tiempo de renderizado de la página, acortando así el tiempo de renderizado de la primera pantalla; el
CSS restante usa archivos CSS externos y los descarga después de que se descarga el documento HTML. Esto habilita los cachés, pero además de cargarlos de forma asincrónica.

Desventajas : CSS después de la inserción no se almacenará en caché y se volverá a descargar cada vez.

En segundo lugar, cargue CSS de forma asincrónica

CSS bloqueará el procesamiento. El navegador no procesará ningún contenido procesado hasta que se completen la solicitud, la descarga y el análisis del archivo CSS. A veces, este bloqueo es necesario porque no queremos que el navegador comience a representar la página antes de que se cargue el CSS requerido. Luego, después de que el CSS clave de la primera pantalla esté en línea, no es necesario el bloqueo de la representación del contenido CSS restante, y el CSS externo se puede usar y cargar de forma asincrónica.

Varias formas de cargar de forma asincrónica

1.js crea dinámicamente el elemento de enlace de la hoja de estilo y lo inserta en el DOM.

// 创建link标签
const myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
// 插入到header的最后位置
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );

2. Establecer el atributo de medios

Establezca el atributo de medios del elemento de enlace en un tipo de medio (o consulta de medios) que no coincida con el navegador del usuario, como media = "print", o incluso un tipo de media = "noexist" completamente inexistente. Para el navegador, si la hoja de estilo no es adecuada para el tipo de medio actual, se reducirá su prioridad y se descargará sin bloquear la presentación de la página.

<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">

Por supuesto, esto es solo para implementar la carga asincrónica de CSS. No olvide establecer el valor de los medios en pantalla o todo después de que se cargue el archivo, para que el navegador pueda comenzar a analizar el CSS.

3. Establezca el atributo rel

Marcar el elemento de enlace como una hoja de estilo alternativa a través del atributo rel también puede lograr una carga asincrónica por parte del navegador. Además, no olvide volver a cambiar el rel después de que se complete la carga.

<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">

4. rel = "precarga"

<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">

Tenga en cuenta que como se requiere. Ignorar el atributo as o el atributo incorrecto como hará que la precarga sea igual a una solicitud XHR. El navegador no sabe qué contenido está cargado, por lo que la prioridad de carga de dichos recursos será muy baja.

Tres, compresión de archivos

El tamaño del archivo afectará directamente la velocidad de carga del navegador. Las versiones actuales de webpack, gulp / grunt, rollup, etc. también admiten la compresión CSS. El archivo comprimido se puede reducir significativamente, lo que puede reducir en gran medida el tiempo de carga del navegador.

Tales como: extract-text-webpack-plugin

Cuarto, elimine CSS inútil

Aunque la compresión de archivos puede reducir el tamaño del archivo, la compresión de archivos css generalmente solo elimina los espacios inútiles, lo que limita la relación de compresión de los archivos css. Si el archivo comprimido aún excede el tamaño esperado, puede intentar buscar y eliminar el CSS inútil en el código.
En circunstancias normales, habrá dos tipos de códigos CSS inútiles:

• Código duplicado en diferentes elementos u otras situaciones,
• No hay un código CSS efectivo en toda la página.

Uso inteligente del mecanismo de herencia css, si el nodo padre está definido, no es necesario definir el nodo hijo.

Cinco, use selectores selectivamente

El emparejamiento de los selectores CSS se realiza de derecha a izquierda, esta estrategia da lugar a diferencias de rendimiento entre los diferentes tipos de selectores.

Más selectores en CSS no coincidirán, por lo que al considerar los problemas de rendimiento, lo que debe tenerse en cuenta es cómo mejorar la eficiencia cuando los selectores no coinciden. Hacer coincidir de derecha a izquierda es para este propósito.

Comparado con #abc, obviamente cuando se usa #a .bc, el navegador tarda más en generar el árbol de renderizado. Porque este último necesita encontrar todos los elementos c en el DOM, y luego filtrar los elementos ancestros que no son .b, y finalmente filtrar los ancestros de .b que no son #a. Cuantos más niveles de anidación, más tiempo llevará.

1. No utilice selectores demasiado anidados o demasiado complejos.
2. Los comodines y los selectores de atributos son los menos eficientes y deben coincidir con la mayor cantidad de elementos, así que evite usarlos tanto como sea posible.
3. No utilice selectores de clase y selectores de ID para decorar etiquetas de elementos, como h3 # markdown-content
   (la ID es originalmente única y tiene un gran valor de permiso. Anidar es una pérdida de rendimiento).

En sexto lugar, reduzca el uso de atributos costosos.

Cuando el navegador dibuja la pantalla, todas las propiedades que deben ser manipuladas o calculadas por el navegador son relativamente caras. Cuando se vuelve a dibujar la página, reducirán el rendimiento de representación del navegador. Minimice el uso de atributos costosos, como box-shadow / border-radius / filter / transparencia /: nth-child, etc.

7. Optimizar la reordenación y volver a dibujar

1. Reducir el reordenamiento

La reorganización hará que el navegador recalcule todo el documento y reconstruya el árbol de renderizado, lo que reducirá la velocidad de renderizado del navegador.

Operaciones que provocarán reordenamiento:

• Agregar o eliminar elementos DOM visibles
• Cambio de posición del elemento
• Cambio de tamaño de elemento
• El contenido del elemento cambia (por ejemplo: un texto es reemplazado por otra imagen de diferente tamaño)
• Inicialización de la representación de la página (esto no se puede evitar)
• El tamaño de la ventana del navegador cambió
• Activación de pseudoclase CSS

Elementos de reordenamiento comunes:

1. Ancho, alto, relleno, margen, ancho del borde, borde, altura mínima relacionados con el tamaño
2. Visualización relacionada con el diseño, arriba, posición, flotante, izquierda, derecha, abajo
3. Tamaño de fuente relacionado con la fuente, alineación de texto, peso de fuente, familia de fuente, altura de línea, espacio en blanco, alineación vertical
4. Ocultar desbordamiento relacionado, desbordamiento-x, desbordamiento-y

Utilice los siguientes pasos para evitar la mayoría de los reflujos en la página:

• Utilice posiciones absolutas para colocar los elementos animados en la página y sacarlos del flujo del documento.
• Deja que los elementos se muevan. Cuando se expanda, cubrirá temporalmente parte de la página. Pero este es solo el proceso de rediseño de un área pequeña de la página, y no reorganizará ni redibujará la mayor parte del contenido de la página.
• Cuando finaliza la animación, se restaura el posicionamiento, de modo que los otros elementos del documento solo se moverán hacia abajo una vez
• Cuando se usa Flex, la reorganización es más rápida que cuando se usa el bloque en línea y la flotación, por lo que se puede dar prioridad a Flex en el diseño.

2. Evite volver a dibujar innecesariamente

Durante el uso del sitio web, es inevitable volver a dibujar. Sin embargo, el navegador ha optimizado esto, combinará múltiples operaciones de reflujo y redibujo en una sola ejecución. Sin embargo, todavía debemos evitar el redibujo innecesario, como el evento de desplazamiento que se activa cuando se desplaza la página, y el evento de desplazamiento se puede desactivar al desplazarse, para que la página sea más suave al desplazarse.

Cuando cambia la apariencia de un elemento (como el color, el fondo, la visibilidad, etc.), se activará un nuevo dibujo.

8.Hacer que los elementos y su contenido sean lo más independientes posible del resto del árbol del documento.

El atributo contener nos permite especificar un elemento DOM específico y sus elementos secundarios para que puedan ser independientes de toda la estructura del árbol DOM. El propósito es permitir que el navegador tenga la capacidad de volver a dibujar y reorganizar solo una parte de los elementos sin tener que orientar la página completa cada vez. Es decir, permitir que el navegador vuelva a calcular el diseño, el estilo, la pintura, el tamaño o cualquier combinación de ellos para un área limitada del DOM en lugar de para toda la página.

En el uso real, podemos especificar cómo el elemento es independiente del árbol del documento estableciendo uno de los siguientes cinco valores para contener:

• diseño: este valor significa que el diseño interno del elemento no se ve afectado por ninguna influencia externa, y el elemento y su contenido no afectarán el nivel superior; los descendientes del contenedor no deben causar que el diseño del elemento fuera del contenedor cambiar, y viceversa
• paint: este valor indica que los hijos del elemento no se pueden mostrar fuera del alcance del elemento, y el elemento no tendrá ningún desbordamiento de contenido (o incluso si se desborda, no se mostrará); el contenido del contenedor nunca se dibuje más allá del tamaño del contenedor, si el contenedor está borroso, entonces el contenido no se dibujará en absoluto
• size: Este valor indica que el tamaño de la caja del elemento es independiente de su contenido, es decir, sus elementos secundarios serán ignorados al calcular el tamaño de la caja del elemento; cuando cambia su contenido, el contenedor no debe causar la posición en la página para mover
• contenido: este valor es una abreviatura de contener: pintura de diseño
• estricto: este valor es una abreviatura de contener: tamaño de pintura de diseño

Nueve, evita usar @import

El uso de @import para introducir css afectará la descarga paralela del navegador. El archivo css al que hace referencia @import se descarga solo cuando se descarga el archivo css que se refiere a él. Después de analizar, el navegador sabrá que hay otro css para descargar, luego lo descargará y luego comenzará a analizar después de la descarga, construyendo el árbol de renderizado , etc. Una serie de operaciones, que hace que los navegadores no puedan descargar en paralelo, el uso de @import en archivos CSS externos provocará retrasos adicionales cuando se cargue la página.
Es mejor usar la etiqueta de enlace.

Diez, activa la animación de renderizado de GPU

El navegador está optimizado para manejar animaciones CSS y propiedades de animación que no activan bien el reflujo (y por lo tanto causan dibujo).

Para mejorar el rendimiento, el nodo animado se puede mover del hilo principal a la GPU. Las propiedades que causarán la composición incluyen transformaciones 3D (transform: translateZ (), rotate3d (), etc.), animación, transform y opacity, position: fixed, will-change y filter. Algunos elementos, por ejemplo, y, también se encuentran en sus respectivas capas. Al promover elementos a capas (también llamado composición), las propiedades de transición de la animación se realizarán en la GPU, mejorando así el rendimiento, especialmente en dispositivos móviles.

Once, fusionar archivos css

Si la página carga 10 archivos css, cada archivo es de 1k, entonces será más lento que simplemente cargar un archivo css de 100k.

Referencia: https://blog.csdn.net/weixin_38015898/article/details/107215259

Para obtener más soluciones de optimización, consulte: https://juejin.cn/post/6942661408181977118

Enlace a este artículo: https://blog.csdn.net/qq_39903567/article/details/115262201