¿Qué sucede cuando el navegador presiona Enter?
"Establecer se basa en estudiar primero, y estudiar se basa en estudiar"
01 Prefacio
Este artículo trata en realidad sobre el principio de representación del navegador. Aunque los usuarios comunes operan el navegador solo para prestar atención a si la página se puede mostrar, como programador front-end, es necesario prestar atención a cómo solucionar problemas si se muestra la excepción.
De hecho, cuando estudias en profundidad, encontrarás que el proceso intermedio es más complicado de lo que pensábamos. Incluye una serie de procesos, como la resolución de la dirección IP, la consulta del servidor DNS y la respuesta del servidor. A continuación, analizaré cómo funciona el navegador.
02 Proceso de respuesta
De mi propio resumen, se puede dividir en los siguientes procesos:
- Búsqueda de dirección IP
- Establecer conexión TCP
- Procesamiento del servidor
- Respuesta de vuelta
- Representación de página
Búsqueda de dirección IP
Supongamos que ingresamos a www.baidu.com en la página, entonces, ¿cómo obtenemos la dirección IP de Baidu? Permítanme insertar primero un pequeño episodio. De hecho, hay varias direcciones IP de los servidores de Baidu. Para los motores de búsqueda, hay una gran cantidad de visitas todos los días, y debe haber un proceso de equilibrio de carga, de lo contrario se bloqueará y colgará.
La consulta de la dirección IP se obtiene en unos pocos pasos.
- Primero, el navegador consulta su propio caché DNS
- Si no, iré al sistema operativo para encontrarlo, y también averiguaré si el host de esta máquina tiene un caché
- Si no, iré al enrutador para encontrar
- Si no tiene uno, vaya al servidor de nombres de dominio local, generalmente un operador de servicio local, como China Telecom
- El sistema operativo obtendrá la dirección IP y la almacenará en caché
- El navegador obtiene la dirección IP devuelta por el sistema operativo, que también se almacena en caché
Una vez aquí, el navegador obtendrá la dirección IP de www.baidu.com, y luego se accederá y se conectará a la dirección.
Establecer conexión TCP
Lo más importante para establecer una conexión TCP es realizar tres apretones de manos
Antes de enviar datos, los encapsulará a través de las capas del protocolo de red, a través de la capa de aplicación, la capa de transporte, la capa de red, la capa de enlace. Cuando el servidor recibe los datos, los descomprimirá y finalmente obtendrá los datos HTTP. Sabemos que el modelo de capas TCP / IP generalmente se divide en las siguientes capas (Figura), y cada capa tiene un protocolo diferente correspondiente, lo que garantiza la transmisión de datos.
Entonces, ¿a qué protocolos corresponde cada capa?
Capa de aplicación : determina las actividades de comunicación al proporcionar servicios de aplicación a los usuarios. Como FTP (Protocolo de transferencia de archivos), DNS (Sistema de nombres de dominio), HTTP (Protocolo de transferencia de hipertexto), Telnet (Protocolo de acceso remoto de red), etc.
Capa de transporte : la capa de transporte proporciona transmisión de datos entre dos computadoras en una conexión de red a la capa de aplicación superior. Proporcione TCP (Protocolo de control de transmisión) y UDP (Protocolo de datagramas de usuario) dos protocolos, principalmente para formateo de datos, confirmación de datos y retransmisión de pérdida de datos.
Capa de red : se usa para procesar paquetes de datos que fluyen en la red. Un paquete de datos es la unidad de datos más pequeña transmitida a través de la red. Establece cómo llegar a la computadora de la otra parte y transferirle datos. La capa de red transmite el paquete de datos a la otra parte a través del protocolo IP. La dirección IP indica la dirección a la que está asignado el nodo, y la dirección MAC se refiere a la dirección a la que pertenece la tarjeta de red (generalmente no se cambiará). En la capa IP, la dirección MAC correspondiente se obtendrá a través de ARP (Protocolo de resolución de direcciones).
Capa de enlace : maneja la parte de hardware conectada a la red, incluida la parte física visible del sistema operativo de control, controladores de dispositivos de hardware, tarjetas de red y fibras ópticas. La parte del hardware depende de la dirección MAC.
Procesamiento del servidor
Cuando los datos lleguen al servidor, se analizarán. El resultado del procesamiento devolverá un código de estado. Los códigos de estado comunes son los siguientes:
- 200 OK: la solicitud del cliente fue exitosa
- 400 Solicitud incorrecta: la solicitud del cliente tiene un error de sintaxis que el servidor no puede entender
- 401 No autorizado: la solicitud no está autorizada. Este código de estado debe usarse con el campo de encabezado WWW-Authenticate
- 403 Prohibido: el servidor recibe la solicitud, pero se niega a proporcionar el servicio
- 404 no encontrado: el recurso solicitado no existe
- 500 Error interno del servidor: se produjo un error inesperado en el servidor
- 503 Servidor no disponible: el servidor actualmente no puede procesar la solicitud del cliente y puede volver a la normalidad después de un período de tiempo
Respuesta de vuelta
Cuando el navegador recibe los datos devueltos por el servidor, procesará previamente los datos y realizará un procesamiento diferente de acuerdo con el código de estado. Por ejemplo, el código de estado 403 permitirá al navegador usar el caché sin volver a solicitarlo. Si es un código de estado 200, puede ser una nueva solicitud y el navegador puede descomprimir el recurso y almacenarlo en caché. El último paso es analizar los recursos y renderizar la página.
Representación de página
Cuando el navegador recibe los datos, realizará los siguientes pasos:
- Analizar archivos HTML y convertir a árbol DOM
- Analizar archivos CSS y convertir a árbol CSSOM
- Árbol de producción
- Enviar información a GPU, renderizado compuesto
Sabemos que la transmisión de la computadora se transmite con datos 0101, por lo que los datos que recibimos también están en este formato, debemos analizarlos. Primero convierta los datos de bytes en una cadena, que es nuestro código. Luego, el análisis léxico de la cadena se convierte en un token, y este proceso es tokenización. El siguiente paso es convertir las etiquetas a Node, y finalmente construir un árbol DOM basado en diferentes conexiones.
El principio de analizar CSS es el mismo, el análisis de los dos árboles es paralelo.
La última es la operación de fusionar los dos árboles. Tenga en cuenta que el árbol de representación ignorará los nodos que no es necesario mostrar. Por ejemplo, el estilo del nodo se establece en: display: none;
03 Redibujar y refluir
Redibujar y refluir afecta el proceso de análisis de los dos árboles, entonces, ¿qué es redibujar y refluir?
- Redibujar
Cuando modificamos algunos estilos del DOM, como cambiar el color del texto o el color de fondo, estos navegadores no necesitan recalcular las propiedades geométricas y dibujar nuevos estilos directamente.
- Reflujo
Cuando modificamos las propiedades geométricas del DOM, generalmente se modifican el ancho y la altura del elemento, el navegador recalculará la posición y luego la redibujará.
Entonces, ¿cómo lo evitamos?
- Reduzca el uso del posicionamiento absoluto y use la transformación en su lugar
- Reduzca el uso de la pantalla, use la visibilidad en su lugar
- estilo CSS para evitar demasiado anidamiento de nodos, la regla de coincidencia es de derecha a izquierda
04 bloqueo de renderizado
Debido a que la operación JS es de un solo subproceso, cuando analizamos el código HTML y el código JS, habrá un conflicto. Nuestra expectativa es representar primero la página y luego ejecutar el código JS. Por lo tanto, debemos prestar atención a las siguientes cosas:
- Ponga la etiqueta <script> en la parte inferior
- Coloque el archivo de estilo en la parte superior para evitar que la página se "raye"
El análisis DOM y el análisis CSS son dos procesos paralelos, la carga CSS no bloqueará el análisis DOM
Dado que el árbol de representación depende del árbol DOM y del árbol CSSOM, debe esperar hasta que se complete la construcción del árbol CSSOM, es decir, la carga del recurso CSS se complete (o la carga del recurso CSS falla) antes de que pueda comenzar la representación. Por lo tanto, la carga de CSS bloqueará la representación del DOM.
05 Resumen
Para esta parte del principio de representación del navegador, a menudo también se toman entrevistas, el front end debe estar muy familiarizado con este. Esta pieza es muy profunda. Para la optimización del proyecto, puede consultar el proceso anterior. Solo cuando cada proceso alcanza el estado óptimo, el rendimiento es el mejor.
De hecho, todavía hay muchos puntos de conocimiento que no se han explicado. Los lectores pueden buscarlos según sus necesidades. La dirección general es el proceso anterior.
