¿Cómo usar CSS para mejorar el rendimiento de la página?

¡Continúe creando, acelere el crecimiento! Este es el 4to día de mi participación en el "Nuggets Daily New Plan · October Update Challenge", haz clic para ver los detalles del evento

Hola, mi nombre es CoderBin

I. Introducción

Cada página web es inseparable css, pero muchas personas piensan que se cssutiliza principalmente para completar el diseño de la página, como algunos detalles u optimización, por lo que no hay necesidad de pensar en ello. De hecho, este tipo de pensamiento es incorrecto.

Como parte importante de la representación de la página y la visualización del contenido, cssafecta la primera experiencia del usuario en todo el sitio web.

Por lo tanto, en todo el proceso de desarrollo del producto, cssla optimización del rendimiento también debe estar presente en todo el proceso.

2. Método de implementación

Hay muchas formas de implementar, las principales son las siguientes:

CSS crítico en línea en la mitad superior de la página
Cargar CSS de forma asíncrona
compresión de recursos
Usa los selectores sabiamente
Reducir el uso de propiedades costosas
no uses @import

2.1 Clave en línea CSS arriba del pliegue

Al abrir una página, el momento en que el contenido principal de la página aparece en la pantalla afecta la experiencia del usuario y, al insertar el csscódigo clave, el navegador puede mostrarlo inmediatamente htmldespués de . Si se encuentra el código de referencia externo cssen el proceso de análisis de la estructura, el archivo externo se descargará y luego se procesará. Por lo tanto, el uso en línea hace que el tiempo de renderizado avancehtmlcsscssCSS

Nota: Pero cssel código más grande no es adecuado para la inserción (ventana de congestión inicial, sin caché), mientras que el resto del código se referencia externamente

2.2 Cargar CSS de forma asíncrona

La representación está bloqueada hasta que se completen la CSSsolicitud, la descarga y el análisis del archivo, CSSy el navegador no procesará ningún contenido procesado. Después de cargar el código en línea en el frente, cssno es necesario bloquear la representación del navegador después de la referencia externa. En este momento, se puede adoptar el esquema de carga asíncrono, principalmente de la siguiente manera:

Inserte la etiqueta de enlace al final de la etiqueta principal usando javascript

// 创建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 );
复制代码

设置link标签media属性为noexis，浏览器会认为当前样式表不适用当前类型，会在不阻塞页面渲染的情况下再进行下载。加载完成后，将media的值设为screen或all，从而让浏览器开始解析CSS
```
<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">
复制代码
```
通过rel属性将link元素标记为alternate可选样式表，也能实现浏览器异步加载。同样别忘了加载完成之后，将rel设回stylesheet
```
<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">
复制代码
```

2.3 资源压缩

利用webpack、gulp/grunt、rollup等模块化工具，将css代码进行压缩，使文件变小，大大降低了浏览器的加载时间

2.4 合理使用选择器

css匹配的规则是从右往左开始匹配，例如#markdown .content h3匹配规则如下：

先找到h3标签元素
然后去除祖先不是.content的元素
最后去除祖先不是#markdown的元素

如果嵌套的层级更多，页面中的元素更多，那么匹配所要花费的时间代价自然更高

所以我们在编写选择器的时候，可以遵循以下规则：

不要嵌套使用过多复杂选择器，最好不要三层以上
使用id选择器就没必要再进行嵌套
通配符和属性选择器效率最低，避免使用

2.5 减少使用昂贵的属性

在页面发生重绘的时候，昂贵属性如box-shadow/border-radius/filter/透明度/:nth-child等，会降低浏览器的渲染性能

2.6 不要使用@import

css样式文件有两种引入方式，一种是link元素，另一种是@import

@import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时

而且多个@import可能会导致下载顺序紊乱

比如一个css文件index.css包含了以下内容：@import url("reset.css")

那么浏览器就必须先把index.css下载、解析和执行后，才下载、解析和执行第二个文件reset.css

2.7 Otros

Reduzca las operaciones de reflujo y los repintados innecesarios
Conoce qué propiedades se pueden heredar y evita reescribirlas
cssSprite, sintetiza todas las imágenes de íconos, muestra la imagen de ícono que queremos con la imagen de fondo de ancho y alto más la posición de fondo, reduciendo las solicitudes de http
Convierta imágenes de iconos pequeños a codificación base64
Animación o transición CSS3 intente usar transformación y opacidad para lograr la animación, no use propiedades izquierda y superior

3. Resumen

cssLa forma de lograr el rendimiento se puede considerar a partir de los tres aspectos del anidamiento del selector, las características de los atributos y la reducción http, y también prestar atención cssal orden de carga del código.

Cada oración: una persona sabia no es necesariamente inteligente por naturaleza, sino más bien a través de los esfuerzos de toda la vida. Ahora bien, entre los que estamos estudiando, muchos de ellos piensan que son inherentemente insuficientes y que no pueden aprender bien, por lo que son pesimistas y desanimados y sin ganas de aprender. De hecho, esto no es necesario, mientras trabajes duro, la esperanza está frente a ti.

Este es el final de este intercambio. Si el contenido de este capítulo es útil para usted, haga clic en Me gusta + favorito . Si hay algún problema con el artículo, indíquelo, y si tiene alguna pregunta, puede dejar un mensaje en el área de comentarios. Espero que todos puedan ganar algo, ¡discutamos y progresemos juntos!