El proceso desde que el navegador ingresa la URL a la página web completamente renderizada

¿Qué proceso se lleva desde abrir el navegador e ingresar la URL hasta que la página web final se muestra en el navegador? Déjame explicarlos uno por uno a continuación.

El proceso general se divide en los siguientes procesos:

Qué es una URL

Antes de explicar la resolución DNS, introduzcamos brevemente la URL. Para localizar recursos en Internet se utiliza el llamado URL (Localizador uniforme de recursos), nombre chino del Localizador uniforme de recursos. En pocas palabras, es lo que la gente suele llamar la dirección de un sitio web.

Un formato de URL estándar sigue ciertas reglas gramaticales:

esquema: //host.domain.port/path/filename

La parte correspondiente se explica a continuación :

Bueno, cuando ingresamos una URL en el navegador, el navegador realizará una resolución DNS en la URL y obtendrá su dirección IP correspondiente, y esta dirección IP es la dirección real del recurso.

¿Qué es una dirección IP?

Una dirección IP se refiere a una dirección de Protocolo de Internet. A cada host de Internet se le asigna una dirección IP como identificador de su identidad. La dirección IP es un número binario de 32 bits. Por ejemplo, la dirección IP de esta máquina es 127.0.0.1. El nombre de dominio equivale a disfrazar la dirección IP. Porque, en comparación con las direcciones IP puramente numéricas, los nombres de dominio con cierta semántica son más fáciles de entender y recordar. Las computadoras prefieren direcciones IP puramente numéricas, por lo que para satisfacer las necesidades de las dos anteriores, surgieron los servicios DNS.

Qué es la resolución de nombres de dominio

El protocolo DNS es un servicio que busca direcciones IP a través de nombres de dominio o busca nombres de dominio a la inversa a partir de direcciones IP. DNS es un servidor de red. En pocas palabras, almacena los datos de relación entre cada nombre de dominio y su dirección IP.

Por ejemplo: baidu.com 220.114.23.56

Proceso de resolución de nombres de dominio

TCP, un protocolo de control de transmisión, es un protocolo confiable y orientado a la conexión. Protocolo de comunicación de la capa de transporte basado en flujos de bytes.

Modelo de red de siete capas

Capa de aplicación (ftp, http, smtp, pop3) - capa de presentación - capa de sesión - capa de transporte (TCP) - capa de red (IP) - Datos capa de enlace - Capa física

Apretón de enlace de tres vías TCP

Nota: TCP no transporta ningún dato durante el proceso de protocolo de enlace de tres vías, pero solo después de que se completa el protocolo de enlace de tres vías. ser transferido.

¿Por qué se requiere un protocolo de enlace de tres vías?

"Computer Network" afirma que el propósito del "apretón de enlace de tres vías" es "evitar que el mensaje de solicitud de conexión fallida se transmita repentinamente al servidor, provocando así un error".

Se puede entender que el cliente inició una solicitud de conexión, pero por alguna razón la solicitud no se entregó al servidor a tiempo. El cliente piensa que la solicitud de conexión local falló porque no puede recibir el mensaje del servidor durante mucho tiempo y luego hace otras cosas. Después de un tiempo, la solicitud anterior llega al servidor. El servidor recibe la solicitud y realiza una serie de operaciones antes de devolverla al cliente y esperar la respuesta del cliente. En este momento, el cliente ya ha hecho otras cosas y no responderá a esta respuesta en absoluto, y el servidor sigue esperando, esperando, esperando, etc. Esto provoca un desperdicio de recursos en el lado del servidor, por lo que necesitamos tres. veces en lugar de dos. De esta forma, si el servidor no recibe respuesta del cliente en un determinado periodo de tiempo, dejará de esperar y se pondrá a hacer otras cosas.

Entonces ¿por qué no cuatro veces sino tres veces?

Debido a que los paquetes ACK y SYN del servidor se pueden enviar juntos y no tendrán ningún efecto negativo, ¿por qué no?

Una vez completado el protocolo de enlace de tres vías TCP, el cliente puede enviar un mensaje de solicitud http al servidor.

El mensaje de solicitud contiene tres partes: línea de solicitud, encabezado de solicitud y cuerpo de solicitud.

Después de recibir la solicitud, el servidor procesa la solicitud y devuelve los datos del mensaje de respuesta.

El mensaje de respuesta contiene tres partes: línea de respuesta, encabezado de respuesta y asunto de respuesta.

Después de recibir el archivo HTML devuelto por el servidor, el navegador realizará un análisis HTML en él.

El análisis HTML es el analizador HTML del navegador que analiza HTML en DOM TREE. Durante el proceso de análisis, el navegador analizará el HTML de arriba a abajo de acuerdo con la estructura del archivo HTML. Los elementos HTML se analizan primero en profundidad y las etiquetas como script, enlace y estilo bloquearán el proceso de análisis. Las situaciones de bloqueo incluyen:

Reflujo: cuando la información de tamaño o posición de un elemento cambia, se activará el reflujo para recalcular el tamaño y la posición del elemento.

Redibujar: El redibujado se activa cuando el color de fondo, el color del texto u otras propiedades de un elemento que no afectan el diseño interno o circundante cambian.

Nota: El redibujo siempre incluirá el redibujado, pero el redibujado no necesariamente incluirá el redibujo.

(insertar piso)

En situaciones reales, el costo de las operaciones DOM es muy alto y el cuello de botella de la representación de páginas también está integrado en las operaciones DOM. Entre ellos, el reflujo y el redibujado tienen el mayor impacto en el rendimiento durante las operaciones DOM. Por lo tanto, debemos evitar operaciones innecesarias de reflujo y redibujado tanto como sea posible.

Operaciones DOM que activan el reflujo y el redibujado:

Por lo tanto, para la optimización DOM, puede seguir los siguientes métodos prácticos:

(2) Establecer DOM El elemento el estilo de visualización es ninguno para ocultar el elemento

Este método logra el efecto de eliminar el elemento de la página ocultando el elemento DOM de la página y restaura el estilo de visualización original después de una gran cantidad de operaciones DOM. El redistribución y el redibujado solo se activarán cuando se oculten al principio y se muestren al final.

(3) Clonar el elemento DOM en la memoria

Este método clona una copia del elemento DOM en la página en la memoria y luego opera en el objeto en la memoria para complete Luego reemplace los elementos en la página. Esto solo afecta a la página en el último paso.

Una vez completada la transmisión de datos, es necesario desconectar la conexión TCP. En este momento, TCP iniciará cuatro ondas.