Proceso de carga de la página web
Ingrese la dirección del recurso (entrada en la barra de direcciones, salto de página, carga de página) para iniciar una solicitud
==> el navegador encuentra si hay una caché local disponible (busque su propia caché de DNS-busque la caché de DNS del sistema operativo-lea el archivo HOST local)
==> El navegador inicia una solicitud de resolución al servidor DNS
==> El servidor de resolución de nombres de dominio consulta la dirección IP (primero verifique la caché, la caché no envía iterativamente la consulta de solicitud al operador, y el resultado de la consulta se almacena en caché localmente y luego el resultado se devuelve capa por capa)
= => Después de que el navegador obtiene la dirección IP, inicia una solicitud TCP para completar el protocolo de enlace de tres vías
==> El navegador envía una solicitud HTTP para preguntar para el puerto de creación de la página web
==> El servidor escucha la solicitud y devuelve el estado y el contenido correspondientes
==> El navegador lo recupera Parse HTML en el árbol DOM después del contenido; estructura de árbol de representación; árbol de representación de diseño, árbol de representación de dibujo
Una vez que el navegador obtiene el contenido devuelto, el proceso detallado de análisis de la página web
==> El navegador recibe el archivo de plantilla HTML y comienza a analizar el HTML de arriba a abajo y de izquierda a derecha;
==> Si encuentra un archivo css, en este momento el navegador deja de analizar el HTML y luego va para solicitar el archivo CSS; lado del servidor Volviendo al archivo CSS, el navegador comienza a analizar el CSS. Después de que el navegador analiza el CSS, continuará analizándolo
==> Si el navegador encuentra una imagen, envía una solicitud a el servidor. En este momento, el navegador no esperará hasta que se descargue la imagen, pero continuará procesando el código detrás;
==> El servidor devuelve el archivo de imagen. Dado que la imagen ocupa un área determinada y afecta el diseño de la página, el navegador necesita para volver y volver a renderizar esta Parte del código;
==> Si encuentra un archivo de script, detenga toda la carga y el análisis en este momento, solicite el archivo de script y ejecute el script;
==> Después de cargar todo el HTML , CSS y JS, la página aparece en la pantalla
Nota: Los diferentes navegadores manejan CSS y HTML de manera diferente. Algunos navegadores esperan que el CSS se cargue antes de renderizar y mostrar elementos HTML (se producirán problemas de pantalla blanca). Algunos son para mostrar los elementos HTML primero, y luego esperar a que se cargue el CSS y luego modificar el estilo nuevamente (el contenido sin estilo de FOUC aparecerá parpadeando)