Proceso de carga del navegador
Desde el momento en que ingresamos la URL hasta la carga de la página, el proceso que experimenta el navegador es el siguiente:
1. El navegador analiza la dirección URL que ingresamos
2. DNS resuelve el nombre de dominio en un número de IP
3. El navegador obtiene el número de puerto
4. Según la dirección IP, a través de TCP Protocolo de enlace de tres vías para establecer la conexión entre el servidor y el navegador
5. Enviar solicitud HTTP
6. El servidor procesa la solicitud y devuelve el resultado de la respuesta 7. Desconecte la conexión agitando cuatro veces
a través de TCP
8. El navegador carga, analiza y representa
análisis del navegador
El motor de renderizado del navegador ejecuta el código de arriba a abajo y el navegador analiza tres cosas.
1.analizando HTML, analiza HTML en un árbol DOM.
2.analizando CSS: Analizar CSS en CSSOM. Después de recibir el CSS, el motor de renderizado del navegador analiza el CSS en hojas de estilo que el navegador puede entender. Hay tres formas de introducir estilos CSS (1) CSS externo importado a través de un enlace o importación (2
)
interno CSS incrustado
(3) El orden de análisis de CSS en el estilo CSS en línea agregado en la etiqueta de atributo
: estilo del navegador -> estilo definido por el usuario -> CSS externo introducido por enlace o importación -> estilo en línea de la etiqueta de estilo
3.Análisis JavaScript. Una vez cargado el script JavaScript, opere el árbol DOM y el árbol de reglas CSS a través del árbol DOM y CSSOM.
Nota :
(1) CSS no bloqueará el análisis DOM, pero bloqueará la representación de la página
(2) JS bloquea el análisis DOM, los navegadores encuentranguionpestaña, activa la representación de la página
El mecanismo de renderizado del navegador.
1. El navegador analiza etiquetas HTML y construye un árbol DOM
2. El navegador analiza CSS para generar un árbol CSSOM
3. El navegador combina el árbol DOM y el árbol CSSOM para generar un árbol de representación
4. El navegador calcula la posición de cada nodo, según el árbol de renderizado al diseño
5. Dibuje los nodos después del diseño en la pantalla