Hable sobre el CRP de optimización del rendimiento de front-end

¿Qué es CRP?

CRPTambién conocida como ruta de renderización crítica, para citar MDNsu explicación:

❝
La ruta de representación crítica se refiere a la secuencia de pasos en los que el navegador convierte HTML, CSS y JavaScript en píxeles en la pantalla. La optimización de la ruta de representación crítica puede mejorar el rendimiento de la representación. La ruta de representación crítica incluye el modelo de objetos de documento (DOM), el modelo de objetos CSS (CSSOM), el árbol de representación y el diseño.
❞

La optimización de la ruta de renderización crítica puede mejorar el tiempo de renderización de la primera pantalla. Comprender y optimizar la ruta de renderización crítica es esencial para garantizar que el reflujo y el redibujado se puedan realizar a 60 fotogramas por segundo, para garantizar una interacción del usuario de alto rendimiento y evitar una renderización sin sentido.

¿Cómo combinar la `CRP`optimización del rendimiento?

Creo que todo el mundo no es ajeno a la optimización del rendimiento, ya sea un trabajo normal o una entrevista, es un tema común.

Si solo hablamos de algunos puntos en general, creo que no es muy riguroso.

Hoy combinamos una pregunta de entrevista muy clásica: 从输入URL到页面展示，这中间发生了什么？hablemos en profundidad desde algunos de los enlaces 前端性能优化 CRP.

Desde ingresar la URL hasta mostrar la página, ¿qué sucedió?

No necesito decir más sobre el nivel clásico de esta pregunta. Aquí utilizo una imagen para ordenar su proceso general: este proceso se puede describir a grandes rasgos de la siguiente manera:

1, análisis URI

2. Resolución DNS (servidor DNS)

3. Protocolo de enlace de tres vías TCP (establezca un canal de conexión entre el cliente y el servidor)

4. Enviar solicitud HTTP

5. Procesamiento y respuesta del servidor

6. TCP saludó cuatro veces (cierre la conexión entre el cliente y el servidor)

7. Análisis y renderización del navegador

8. La página está cargada.

En este artículo, explicaré la optimización del rendimiento del proceso de renderizado del navegador, el almacenamiento en caché y la optimización de DNS.

Proceso de renderizado del navegador

Construye el árbol DOM

DOMEl proceso general de construcción de un árbol se resume en la siguiente figura:

Tomamos el siguiente fragmento de código como ejemplo para el análisis:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>构建DOM树</title>
  </head>
  <body>
    <p>森林</p>
    <div>之晨</div>
  </body>
</html>

Primero, el navegador lee HTMLbytes sin procesar del disco o de la red y los codifica de acuerdo con el archivo especificado para convertirlos en caracteres.

Word luego se convertirá en el flujo de bytes Tokenen Token(es decir, token) generado al mismo tiempo, otro proceso también consumirá el token y se convertirá en HTML headel objeto de nodo, indicará el inicio y el final del token entre nodos relación.

Cuando se consumen todos los tokens, se convierte a DOM(Modelo de objeto de documento).

La DOMestructura final es la siguiente:

Construye el árbol CSSOM

DOMEl árbol está construido y el siguiente paso es CSSOMconstruir el árbol.

De manera similar a HTMLla conversión, el navegador identificará los CSStokens correctos y luego convertirá estos tokens en CSSnodos.

❝
El nodo hijo heredará las reglas de estilo del nodo padre, que corresponde a las reglas en cascada y las hojas de estilo en cascada.
❞

DOMEl proceso general de construcción de un árbol se puede resumir en la siguiente figura:

Usamos lo anterior como HTMLejemplo aquí , asumiendo que tiene el siguiente CSS:

body {
  font-size: 16px;
}
p {
  font-weight: bold;
}
div {
  color: orange;
}

Entonces, el CSSOMárbol finalmente construido es el siguiente:

Con DOMy CSSOM, puede sintetizar el árbol de diseño (Render Tree).

Construye el árbol de renderizado

Y así sucesivamente DOMy CSSOMluego tienes que construir un buen motor de renderizado de diseño que se construirá en árbol. La estructura del árbol de diseño es una estructura de árbol sustancialmente replicada DOM, excepto que los DOMárboles no muestran que los elementos estén filtrados, como los display:noneatributos de los elementos, las headetiquetas, las scriptetiquetas y similares.

Después de copiar una buena estructura de árbol de diseño básico, el motor de renderizado para el correspondiente DOMselecciona la información de estilo correspondiente a los elementos, este proceso es el cálculo de estilo.

Cálculo de estilo

El cálculo del estilo del objeto consiste en calcular el DOMestilo específico del nodo de cada elemento, esta etapa se puede dividir en tres pasos para completar.

Convierta CSS en una estructura que el navegador pueda entender

Y los HTMLarchivos, el navegador no entiende directamente el CSSestilo de texto sin formato , por lo que cuando el motor de renderizado recibe un CSStexto, realiza una operación de conversión, el CSSnavegador de estructura de conversión de texto es comprensible - styleSheets.

Convierta los valores de los atributos en la hoja de estilo para estandarizar

Ahora que hemos convertido el texto CSS existente en una estructura que el navegador pueda entender, el siguiente paso es estandarizar los valores de sus atributos.

¿Qué es la estandarización del valor de atributo? Veamos este párrafo CSS:

body {
  font-size: 2em;
}
div {
  font-weight: bold;
}
div {
  color: red;
}

Puede ver el CSStexto anterior , hay muchos valores de propiedad, como 2em, negrita, rojo, los valores de estos tipos no son fácilmente entendidos por el motor de renderizado, es necesario convertir todos los valores para que sean fácilmente entendidos por el motor de renderizado, se calcula el valor normalizado, el proceso es Estandarización de valores de atributos.

¿Cómo se ve el valor del atributo normalizado?

Como puede ver en la figura, se 2emanalizó 32px, boldanalizó 700y redanalizó en rgb(255,0,0)...

Calcule el estilo específico de cada nodo en el árbol DOM

La propiedad de estilo Now se ha estandarizado, entonces necesita calcular el DOMárbol en los atributos de estilo de cada nodo, y ¿cómo calcularlo?

Esto involucra dos puntos: la 继承规则suma de CSS 层叠规则.

Dado que este no es el enfoque de este artículo, explicaré brevemente:

CSSLa herencia es que cada DOMnodo contiene un estilo padre
Está laminado CSSa una característica básica, es un valor de propiedad que define cómo fusionar algoritmos de múltiples fuentes. Es CSSel núcleo, CSSel nombre completo "Hojas de estilo en cascada" precisamente para enfatizar este punto.

Una vez completado el cálculo de estilo, el motor de renderizado también necesita calcular la posición geométrica de cada elemento en el árbol de diseño. Este proceso es para calcular el diseño.

Diseño de cálculo

Ahora, tenemos DOMárboles y DOMelementos de estilo en el árbol, pero no lo suficiente para mostrar la página, porque no conocemos DOMla posición geométrica del elemento de información. Entonces necesitas calcular la DOMposición geométrica de los elementos visibles del árbol, ponemos este cálculo se llama 布局.

dibujar

La construcción del árbol de diseño final se completa mediante el cálculo de estilo y el cálculo de diseño. Después de eso, es el momento de las operaciones de dibujo posteriores.

En este punto, el proceso de renderizado del navegador básicamente ha terminado, resuelto a través de la siguiente imagen:

En este punto, hemos resuelto el proceso completo de análisis y renderizado del navegador, entonces, ¿dónde podemos optimizar el rendimiento?

Puntos de optimización que se pueden realizar desde el proceso de renderización del navegador

Por lo general, una página tiene tres etapas: etapa de carga, etapa interactiva y etapa de cierre.

Fase de carga, es a partir de la solicitud para renderizar una página completa del proceso, los principales factores que afectan esta etapa es que existe una red y JavaScriptscripts.
Etapa interactiva, destacando la finalización del proceso de integración desde la página para cargar la interacción del usuario, el principal factor que incide en esta etapa es el JavaScriptguión.
En la fase de cierre, son principalmente las operaciones de limpieza realizadas por la página después de que el usuario emite una instrucción de cierre.

Aquí debemos enfocarnos 加载阶段y 交互阶段, debido a que los factores que afectan nuestra experiencia se encuentran principalmente en estas dos etapas, analicemos en detalle uno por uno.

Fase de carga

Primero analicemos cómo optimizar sistemáticamente la página en la fase de carga y observemos una canalización de renderizado típica, como se muestra en la siguiente figura:

Al analizar el proceso de representación del navegador en la cara de nuestro conocimiento JavaScript, la primera solicitud del HTMLarchivo de recursos, CSSel archivo que se bloquea por primera vez se procesará, porque el DOMproceso de construcción requiere HTMLy los JavaScriptdocumentos, durante la construcción del árbol de representación necesitan utilizar el CSSarchivo.

Estos recursos que pueden bloquear la primera representación de una página web se denominan 关键资源. Basándonos en los recursos clave, podemos continuar refinando tres factores centrales que afectan la primera representación de la página:

关键资源个数. Cuantos más recursos clave, mayor será el tiempo de carga de la primera página.
关键资源大小. En circunstancias normales, cuanto menor sea el contenido de todos los recursos clave, menor será el tiempo de descarga de todo el recurso y menor el tiempo de bloqueo de procesamiento.
请求关键资源需要多少个RTT（Round Trip Time）. RTTEs un indicador de rendimiento importante en la red. Representa el retardo de tiempo total experimentado desde el final del envío de datos hasta el final de recepción de la confirmación del extremo receptor.

Después de comprender varios factores centrales que afectan el proceso de carga, podemos considerar sistemáticamente el plan de optimización. El principio general es la optimización 减少关键资源个数, 降低关键资源大小, 降低关键资源的 RTT 次数:

¿Cómo reducir la cantidad de recursos clave? Una forma es JavaScripty se CSSforma en línea, como el mapa JavaScripty CSS, si se cambia el modo en línea, el número reducido de recursos críticos de tres a uno. De otra forma, si el JavaScriptcódigo no es DOMu CSSOMoperaciones, se puede cambiar synco deferpropiedades
¿Cómo reducir el tamaño de los recursos críticos? Puede comprimir CSSy JavaScriptrecursos, eliminar HTML, CSS, JavaScriptel contenido del archivo en algunos de los comentarios
¿Cómo reducir los recursos clave RTTel número? Esto se puede lograr reduciendo la cantidad de recursos clave y reduciendo el tamaño de los recursos clave. Además, también se puede utilizar CDNpara reducir la RTTduración.

Fase interactiva

A continuación, hablemos de la fase interactiva después de que se cargue la página y cómo optimizarla.

Primero echemos un vistazo a la canalización de renderizado en la fase interactiva: de hecho, hay aproximadamente los siguientes puntos que se pueden optimizar:

避免DOM的回流. Es decir, trate de evitarlo 重排y 重绘operarlo.
减少 JavaScript 脚本执行时间. A veces, JavaScriptel tiempo de ejecución de una función puede ser de varios cientos de milisegundos, lo que ocupa seriamente el tiempo del hilo principal para realizar otras tareas de renderizado. Ante esta situación, podemos adoptar las siguientes dos estrategias:
- Una es descomponer la función ejecutada una vez en múltiples tareas, de modo que cada tiempo de ejecución no sea demasiado largo.
- El otro es adoptar Web Workers.
DOM操作相关的优化. Navegadores 渲染引擎y, por JS引擎lo tanto, cuando se usa la JSoperación DOM, los dos motores entre sí a través de una interfaz de "comunicación" y, por lo tanto, cada operación DOM(incluidas las únicas DOMpropiedades de acceso ), debe resolverse entre la sobrecarga del motor a menudo se dice que se reduce Manipulación DOM. En resumen, los siguientes puntos:
- Almacene en caché algunas propiedades calculadas, como let left = el.offsetLeft.
- Por DOMel classcentralizar cambiar el estilo, en lugar de stylemodificar un bar.
- Operaciones de lectura y escritura separadas. Los navegadores modernos tienen un mecanismo de cola de renderizado.
- DOMLa era del abandono de las operaciones tradicionales , basada vue/reacten virtual domel marco adoptado por otros
合理利用 CSS 合成动画. La animación sintética se realiza directamente en el hilo sintético, este diseño y operación, como el dibujo ejecutado en el hilo principal diferente, si el hilo principal JavaScripto alguna ocupación de tareas de diseño, la CSSanimación aún podía continuar. Así que trate de hacer un buen uso de CSSla animación sintética, si hacemos CSSla animación, en la medida de lo posible para que CSSfuncione.
CSS选择器优化. Sabemos que la CSS引擎búsqueda coincide de derecha a izquierda. Entonces, en base a esto, existen las siguientes soluciones de optimización:
- Trate de no usar comodines
- Utilice los selectores de etiquetas con moderación
- Utilice la herencia de atributos tanto como sea posible
CSS属性优化. Cuando el navegador representar imágenes, CSSel coste se calcula propiedades, algunas propiedades requieren una gran cantidad de cálculo de navegador, que pertenece a las propiedades caras ( box-shadows, border-radius, transforms, filters, opcity, :nth-child, etc.), estos atributos a menudo se utilizan en el desarrollo de todos los días, por lo que no quiere decir No use estos atributos, pero en desarrollo, si hay otras soluciones simples y factibles, puede dar preferencia a soluciones sin atributos costosos.
避免频繁的垃圾回收. Sabemos que al JavaScriptusar la recolección automática de basura, si crea un objeto temporal en alguna función con frecuencia, el recolector de basura acudirá a la política de recolección de basura con frecuencia. De esta forma, cuando se produzca la operación de recolección de basura, ocupará el hilo principal, lo que afectará la ejecución de otras tareas, y en casos graves, hará que el usuario sienta que el marco se cae y no es suave.

Cache

Se puede decir que el almacenamiento en caché es un método de optimización simple y eficiente en la optimización del rendimiento. Una excelente estrategia de almacenamiento en caché puede acortar la distancia de los recursos de solicitud de la página web, reducir la latencia y, dado que los archivos almacenados en caché se pueden reutilizar, también puede reducir el ancho de banda y la carga de la red. La siguiente figura es el diagrama de flujo de búsqueda de la caché del navegador : todavía hay muchos puntos de conocimiento relacionados con la caché del navegador. Aquí he compilado una imagen: Para una introducción detallada a la caché del navegador, puede consultar mi artículo anterior , aquí No entraré en detalles.

Optimización relacionada con DNS

DNSNombre completo Domain Name System. Es la "libreta de direcciones" de Internet, que registra el ipmapeo entre los nombres de dominio y las direcciones reales . Cada vez que visitamos un sitio web, debemos DNSconsultar el servidor del sitio web a través de servidores en todos los niveles ip, y luego podemos acceder al servidor.

DNSLa optimización relacionada generalmente implica dos puntos: el DNSalmacenamiento en caché del navegador y DNSel análisis previo.

`DNS`Cache

Una imagen vale mas que mil palabras:

El navegador primero verificará la caché del navegador (la caché del navegador tiene un límite de tamaño y tiempo). Si el tiempo es demasiado largo, puede hacer que la IPdirección cambie y no resuelva la IPdirección correcta . Si es demasiado corto, el navegador resolverá repetidamente el nombre de dominio, generalmente en unos minutos.
Si el caché del navegador no tiene un nombre de dominio correspondiente, buscará en el caché del sistema operativo.
Si no se ha encontrado, el nombre de dominio se enviará al servidor de nombres de dominio en la región (generalmente proporcionado por proveedores de Internet, como China Telecom, China Unicom), y generalmente se puede encontrar en el servidor de nombres de dominio en la región.
Por supuesto, es posible que tampoco se encuentre el servidor de nombres de dominio local, y el servidor de nombres de dominio local iniciará la búsqueda recursiva.

En términos generales, los navegadores DNSrequieren análisis 20-120ms, por lo que hay DNSpocas optimizaciones para el análisis. Sin embargo, hay un escenario en el que hay muchas imágenes en el sitio web con diferentes nombres de dominio. Si el nombre de dominio que se puede usar después de la página de inicio de sesión se resuelve con anticipación, el resultado de la resolución se almacenará en caché, lo que acorta el DNStiempo de resolución y mejora el acceso general al sitio web. Acelera, eso es todo DNS预解析.

`DNS`Preanálisis

Eche un vistazo a DNS预解析la definición de MDN :

❝
X-DNS-Prefetch-ControlEl cabezal controla la DNSfunción de lectura previa del navegador . DNSLa lectura previa es una iniciativa para hacer que el navegador realice la función de resolución de nombres de dominio, y su alcance incluye todo el documento vinculado, ya sean imágenes, CSSy JavaScriptotros usuarios pueden hacer clic URL.
❞

Debido a que la lectura previa se realizará en segundo plano, por DNSlo que es posible que se haya resuelto antes de que el enlace correspondiente aparezca completo. Esto puede reducir la demora cuando los usuarios hacen clic en el enlace.

Veamos brevemente cómo hacerlo aquí DNS预解析:

Agregue el encabezado de la página para que el navegador analice previamente toda la página

<meta http-equiv="x-dns-prefetch-control" content="on">

Agregue manualmente el nombre de dominio que se resolverá a través de la etiqueta del enlace, por ejemplo:

<link rel="dns-prefetch" href="//img10.360buyimg.com"/>

referencia

Li Bing "Principio de funcionamiento y práctica del navegador"

"Ver y reenviar" es el mayor apoyo