Principio de representación del navegador de recursos front-end

El proceso de representación de la página del navegador.

Proceso de análisis HTML

En circunstancias normales, el servidor devolverá el archivo xx.html al navegador. Analizar el html es en realidad el proceso de construcción del árbol Dom.

Simplemente podemos analizar el proceso de análisis html según la siguiente estructura html

Analizar el árbol de reglas CSS

Durante el proceso de análisis, si se encuentra un elemento de enlace CSS, el navegador será responsable de descargar el archivo CSS correspondiente:

PD: Descargar CSS aquí no afectará el análisis del árbol DOM.

Una vez completada la descarga, se analizará el archivo CSS y se analizará el árbol de reglas correspondiente. El ejemplo es el siguiente:

body{
    
    font-size: 16px}
p{
    
    font-weight: bold}
span{
    
    color: red}
p span{
    
    display:none}
img{
    
    float: right}

Paso de análisis para construir el árbol de renderizado

Una vez que tenga el árbol DOM y el árbol CSSOM, puede combinarlos para construir el árbol de renderizado.

hay que tener en cuenta es:

• El elemento de enlace no bloqueará el proceso de construcción del árbol DOM, pero sí bloqueará el proceso de construcción del árbol de renderizado.
• El árbol de renderizado y el árbol DOM no tienen una correspondencia uno a uno. Por ejemplo, los elementos con visualización configurada en ninguno no aparecerán en el árbol de renderizado en absoluto;

Analizar el diseño y el dibujo de los pasos

• Ejecute Diseño en el árbol de renderizado para calcular la geometría de cada nodo.
  • El árbol de representación indicará qué nodos se muestran y otros estilos, pero no indica el tamaño, la posición y otra información de cada nodo;
  • El diseño determina la información de ancho, alto y posición de todos los nodos en el árbol de renderizado;
• Dibuja cada nodo en la pantalla.
  • En la fase de dibujo, el navegador convierte cada cuadro calculado en la fase de diseño en píxeles reales en la pantalla;
  • Incluyendo dibujar la parte visible del elemento, como texto, color, borde, sombra, elemento de reemplazo (como img)

Puede consultar la siguiente figura para el proceso de renderizado:

Después de completar los cinco pasos anteriores, el archivo xx.html correspondiente se representa correctamente en el navegador.

Refluir y volver a dibujar

reflujo

reflow:

• El tamaño y la posición de los nodos que renderizamos se determinan después del primer renderizado durante el diseño.
• El recálculo posterior del tamaño y la posición del nodo se denomina reflujo.

¿Cuándo ocurre el reflujo?

1. Cambios en la estructura DOM (adición y eliminación)
2. Cambió el código de estilo CSS, es decir, el diseño.
3. Tamaño de ventana modificado
4. O se llaman algunas funciones integradas para obtener información de posición y tamaño.

reimpresión

• La primera vez que renderizamos, en el diagrama de flujo anterior se llamóimpresión
• Se vuelve a dibujar cuando es necesario volver a renderizarlo más adelante.

Cómo se produce el rediseño:

1. Modificar CSS como el estilo de texto en color

Ampliar ideas

1. Siempre que se produzca el reflujo, definitivamente provocará un nuevo dibujo. De hecho, después de ver la explicación anterior, es fácil descubrir que el reflujo también se activa cuando se inicia o cambia el código de estilo.
2. El rendimiento del reflujo no es bueno y es obvio que volver a renderizar todo el DOM es una pérdida de rendimiento.

Resumir

• Modifique el estilo para reducir el número de reflujos tanto como sea posible, es decir, una vez completado el diseño, no cambie el estilo ni la estructura DOM a menos que sea necesario.
• Evite el uso frecuente de JS para manipular DOM
• Minimizar funciones para obtener información de ubicación de almacenamiento

Análisis especial - síntesis compuesta.

Durante el proceso de dibujo, los elementos dispuestos se pueden dibujar en múltiples capas compuestas.

Propiedades que formarán una nueva capa de composición:

• transformaciones 3D
• vídeo, lienzo, iframe
• conversión de animación de opacidad
• posición: fija
• cambiará
• la animación o transición tiene opacidad y conjunto de transformación

PD: De hecho, la creación de capas puede mejorar el rendimiento, pero se produce a expensas de la gestión de la memoria, por lo que no se utiliza como estrategia de optimización del rendimiento.

La relación entre los elementos del script y el análisis de páginas.

¿Qué paso da JS en nuestro proceso de renderizado?

1. Al renderizar html, js no tiene la capacidad de continuar construyendo el DOM.
2. Si se necesitan las piezas requeridas, primero se detendrá la construcción, descargará js y ejecutará el script.
3. Después de construir lo que se necesita construir, continúe construyendo el DOM.

¿Cuáles son los beneficios de hacer esto?

1. JS tiene la función de manipular y modificar DOM.
2. ¿Por qué ejecutar primero el script js? Como se mencionó anteriormente, el reflujo requiere mucho rendimiento, por lo que es mejor hacerlo todo a la vez para reducir el reflujo innecesario.

Ejemplos de código

index.html

<script src="./js/test.js"></script>

<body>
    <div class="box"></div>
</body>
<script>
    var boxel = document.getElementsByClassName("box")
    console.log(boxel);
</script>

test.js

debugger
console.log("hello")

Nueva pregunta:

• En el modelo de desarrollo actual, la mayoría de ellos utilizan vue y React como marco de desarrollo, la proporción de JS suele ser grande y el procesamiento de eventos también llevará más tiempo.
• Esto también provoca que si el análisis está bloqueado, es posible que la interfaz no muestre nada hasta que se complete el análisis del script.

Aquí js nos proporciona dos atributos para resolver este problema.

diferir atributo

El atributo defer le dice al navegador que no espere a que se descargue el script, sino que continúe analizando HTML y construyendo el árbol DOM. Si el script se descarga con anticipación, espere a que se cargue. Cuando se complete el DOM, ejecute el código en diferido. antes de activar DOMContentLoaded.

PD: el aplazamiento se ejecuta en el orden predeterminado sin afectar el orden y puede operar el DOM

<script>
    window.addEventListener("DOMContentLoaded", () => {
    
    
        console.log("DOMContentLoaded");
    })
</script>
<script>
    var boxel = document.getElementsByClassName("box")
    console.log(boxel);
</script>
<script defer>
    console.log("defer-demo")
</script>
<script>
    debugger
    console.log("hello")
</script>

sugerencia:

• Ponerse defer en la cabeza y utilizar las características de este atributo al final es poner el carro delante del caballo.
• aplazar sólo tiene un efecto en scripts externos

atributo asíncrono

La función asíncrona es algo similar a aplazar y también permite que los scripts no bloqueen la página.

Sus características:

• El navegador no bloqueará los scripts asíncronos (similar a aplazar);
• Los scripts asíncronos no pueden garantizar el orden. Se descargan y ejecutan de forma independiente y no esperan a otros scripts.
• No se garantiza que async se ejecute antes o después de DOMContentLoaded

<script>
    window.addEventListener("DOMContentLoaded", () => {
    
    
        console.log("DOMContentLoaded");
    })
</script>
<script async>
    console.log("defer-demo")
</script>

Resumir

• aplazar se usa generalmente para el análisis de documentos y código JS que opera DOM y tiene requisitos de pedido.
• async se usa generalmente para scripts independientes, que pueden entenderse como scripts que no tienen dependencias. Si hay dependencias, no hay garantía de que se carguen por adelantado.

Resumir

1. En primer lugar, comprenda y comprenda algunos núcleos del navegador.
2. Comprender el flujo desde la carga del servidor hasta la página renderizada
3. Detallar el contenido general de cada paso
4. Encontré problemas y exploré algunas soluciones.