El proceso de renderizado del navegador y el mecanismo de almacenamiento en caché involucrado

Respuesta: análisis dns-》enlace tcp-》Enviar solicitud HTTP-》El servidor procesa la solicitud y devuelve el mensaje-》El navegador analiza y representa la página-》El enlace finaliza

Es un proceso de analizar una URL en una dirección IP.

Primero busque desde el servidor de nombres de dominio local. Si no se puede encontrar, continúe buscando en el servidor de nombres de dominio raíz hasta que haya enlaces en el nombre de dominio de nivel superior en este proceso. Al buscar recursos, primero se buscará en el caché (caché del navegador -> caché del sistema -> caché del enrutador, etc.), y también se realizará el equilibrio de carga de DNS en función de la carga de la máquina y la ubicación del usuario.

A. El cliente envía syn al servidor para solicitar una conexión

B. El servidor envía un acuse de recibo al cliente

C. Después de que el cliente recibe el reconocimiento y lo confirma, envía el reconocimiento al servidor y se establece la conexión.

Una vez establecida la conexión TCP, los recursos se transmiten a través del protocolo HTTP y se determina si se utiliza HTTPS de acuerdo con la situación. HTTP incluye la línea de solicitud, el encabezado de la solicitud y el cuerpo de la solicitud (publicación, colocación). cuando el cliente transmite datos al servidor). Keepalive, etc., se pueden agregar en el encabezado de la solicitud.

(Esto implica el almacenamiento en caché forzado y el almacenamiento en caché negociado. Para explicar claramente el proceso de representación del navegador primero, los coloco al final del artículo).

El servidor recibe la solicitud y comienza a procesar tcp Procese, analice http y encapsúlelo en un objeto de solicitud HTTP de acuerdo con el formato del mensaje. Código de mensaje de respuesta (1xx: Solicitud aceptada, 2XX: Éxito, 3xx: Redireccionamiento, 4xx: Error del cliente, 5xx: Error del servidor)

Analizar y renderizar al mismo tiempo, primero analizar html y crear un árbol dom, luego analiza el CSS y construye cssom.

He pensado durante mucho tiempo en quién debería renderizar primero, HTML o CSS. Según tengo entendido, no necesariamente depende de la ubicación. Si se encuentra el enlace CSS durante el proceso de construcción del dom, el cssom se cargará y compilará primero. Este proceso no es un proceso único. Tanto los archivos css como los js sincronizados bloquean la representación del árbol DOM, pero no bloquean el análisis de DOM hasta que se carga y ejecuta js. Encontrar css bloqueado también retrasará la ejecución de la construcción de js y dom. (Debido a que js puede modificar dom o cssom), de manera similar con css, cuando se compila cssom, js también dejará de bloquearse, esperando a que se complete la compilación de cssom.

diferir y sincronizar

1. Modo normal

lt;script src="script.js"gt;lt;/scriptgt; p> Cuando encuentre una etiqueta js de este tipo, el navegador la cargará y ejecutará inmediatamente sin esperar a que se carguen elementos del documento posteriores.

2. modo asíncrono

lt; script async src="script.js"gt;/scriptgt

Los archivos JS con async serán posteriores El análisis y la representación DOM se ejecutan en paralelo. Cuando se carga js, se ejecuta inmediatamente. En este momento, el análisis html se pausa. Por lo tanto, las etiquetas no se ejecutan en el orden en que se introducen.

3. modo diferido

lt;script defer src="script.js"gt;lt;/scriptgt

Carga de archivos diferidos js, que También se realizará en paralelo con el análisis y construcción del documento. Esto es consistente con async.

La diferencia es que el archivo diferido js no se ejecutará inmediatamente después de la carga. Esperará hasta que se analicen todos los documentos y antes de que se active el evento DOMContentLoaded, por lo que se ejecutará en el orden de introducción.

DOMContentLoaded amp; onload

El evento DOMContentLoaded se activará después de que se analice el DOM (el contenido del DOM de bloqueo se analiza antes de que se analice realmente el DOM). Si se introduce una hoja de estilos CSS después de DOMContentLoaded, es posible que DOMContentLoaded no pueda obtener los estilos en la hoja de estilos. En este momento, el árbol DOM se ha creado, pero el archivo CSS externo no se ha cargado. El archivo se coloca en el encabezado.

onLoad

El evento onLoad se activa después de que se cargan todos los recursos de la página y se activará después de DOMContentLoaded.

Hay dos procesos importantes en este proceso: reflujo y redibujado. Calcule el tamaño y la posición del modelo de caja y analice el color, la fuente y otros atributos. Cuando se determinan, el repintado comienza a sintetizar un árbol de representación DOM y cssom debe existir en el árbol de representación. inicia el diseño y la representación en la pantalla. La primera carga inevitablemente pasará por el proceso de reflujo y rediseño.

Siempre que exista una maquetación de página inicial acompañada de un sorteo. (A menos que quieras que tu página esté en blanco :)) Después de eso, cada cambio en la información utilizada para construir el árbol de renderizado dará como resultado al menos uno de los siguientes comportamientos:

Parte del árbol de renderizado ( o todo el árbol de renderizado) necesita volver a analizarse y los tamaños de los nodos deben recalcularse. A esto se le llama reordenamiento. Tenga en cuenta que habrá al menos un diseño de página de inicialización de reflujo.

Parte del contenido de la pantalla necesita ser actualizado debido a cambios en las propiedades geométricas del nodo o por cambios de estilo, como cambiar el color de fondo de un elemento. Estas actualizaciones se denominan repintados.

Los redibujos y reflujos son costosos, interrumpen la experiencia del usuario y hacen que la interfaz de usuario se muestre muy lenta.

Algunos reflujos pueden ser más caros. Imagine el árbol de renderizado. Si cambia directamente un nodo secundario debajo del cuerpo, es posible que no afecte a otros nodos. Pero cuando animas o cambias el tamaño de un div de nivel superior en la página actual, hará que toda la página cambie, lo que suena muy caro.

Los navegadores han estado trabajando arduamente para reducir estos efectos negativos. El navegador creará una cola de cambios. El navegador puede agregar o cambiar estos cambios a la cola en un momento específico o cuando se alcance un número determinado. Realice un reflujo o redibujado. De esta manera, se integrarán múltiples reflujos o redibujados y, en última instancia, reducirán la cantidad de reflujos o redibujados para ahorrar la sobrecarga de procesamiento del navegador.

Por lo tanto, es una muy mala práctica establecer y obtener estilos al mismo tiempo.

Vi una respuesta y puede que esa sea la razón, pero no estoy seguro.

El entorno de desarrollo empaquetará todo CSS en js, por lo que debe esperar a que se cargue js antes de que aparezca el estilo, por lo que ocurrirá esta situación, pero en el entorno de producción, css se generará; un archivo css e insértelo en lt; estilo /gt;, para que esta situación no ocurra.

Dos puntos de optimización: css se carga primero y js se carga después.

Intente no modificar el árbol dom con js.

Las siguientes son mis notas en OneNote. Cuando las pegue, se convertirán en imágenes. No he encontrado una buena manera.

El almacenamiento en caché forzado y el almacenamiento en caché negociado son el contenido de este paso de la solicitud http.