javascript - attribute - title css

¿Cómo funciona la secuencia del ciclo de vida de la página del navegador?

Question

¿Desea crear una presentación sobre cómo funciona el navegador? ¿Alguien sabe la secuencia exacta del ciclo de vida que ocurre cada vez que se solicita una URL del navegador?

¿Cuáles son los pasos que ocurren después de que se recibe una respuesta del servidor en términos de:

1. Rendering: aplicación de filtros CSS, webkit, etc.
2. Javascript - Cargando y corriendo
3. Aplicación CSS
4. Construcción DOM / ¿En qué punto está escrito el DOM y cómo?
5. Galletas
6. Otras actividades relacionadas con la red, etc.

- No estoy seguro de si este es el orden correcto ...

¿Es lo mismo en todos los navegadores o diferentes navegadores tienen diferentes ciclos de vida?

Nota: una respuesta bien escrita con detalles que explican cada paso de Ced a continuación. lo que realmente estaba buscando era "Ruta de reproducción crítica" : las etapas generales del proceso están bien explicadas por otras buenas respuestas.

¡Gracias a Dios, y buen trabajo a todos!

Answer 1

1. La respuesta a la mayoría de sus preguntas "¿Qué sucede cuando buscamos en Google?" .
2. El navegador representa HTML en la página siguiendo el estándar de sintaxis html . Recuerde que los navegadores son muy indulgentes y que existe el código HTML no válido.
3. Css se aplica a la página siguiendo la gramática css .
4. Todos los navegadores deben implementar js de acuerdo con los estándares de ECMA Script .

Algunos otros recursos útiles:

1. El plugin de inclinación de Firefox 3D ayuda a visualizar páginas web y cómo están renderizando contenido en diferentes capas.

2. La pestaña de rendimiento de Chrome es una buena visualización de lo que sucede durante la carga de una página y cómo se construye el árbol dom. Ayuda a identificar los cuellos de botella en el proceso de renderizado.

3. Puede ver mucha funcionalidad de back-end de su navegador como el contenido HTML en caché, imágenes en caché, caché dns, puertos abiertos, etc. abriendo chrome: // net-internals /.

Answer 2

De lo que estás hablando es de la ruta de reproducción crítica .

El punto 1., 3. y 4. pueden reanudarse como tales:

1. Construcción del Modelo de Objetos de Documento (DOM)
2. Construcción del modelo de objetos CSS (CSSOM)
3. Construcción de Render Tree
4. Diseño
5. Pintar.

Aquí hay un desglose de lo que sucede detrás de la escena.

1. Construyendo el objeto DOM.

El primer paso es crear el DOM. De hecho, lo que recibe de la red son bytes y el navegador utiliza el denominado árbol DOM. Por lo tanto, necesita convertir esos bytes en el árbol DOM.

1. Usted recibe la página como bytes. Su navegador lo convierte en texto.
2. El texto se convierte en nodos.
3. los nodos se convierten en "objetos"
4. Construcción del árbol, llamado el ÁRBOL DOM.

Puede consultar la herramienta de desarrollador para ver cuánto tiempo lleva.

Aquí podemos ver que tomó 4.938ms.

Cuando este proceso finalice, el navegador tendrá el contenido completo de la página, pero para poder renderizar el navegador tiene que esperar al Modelo de objetos CSS, también conocido como evento CSSOM, que le indicará al navegador cómo deberían verse los elementos. cuando se procesa

2. Manejo del CSS

Para el CSS es el mismo que el anterior, el navegador necesita convertir esos archivos al CSSOM:

El CSS es también una estructura de árbol. De hecho, si coloca un tamaño de fuente en el elemento primario, los hijos lo heredarán.

Eso se llama estilo de recalculación en la herramienta de desarrollador

CSS es uno de los elementos más importantes de la ruta de representación crítica, ya que el navegador bloquea la representación de la página hasta que recibe y procesa todos los archivos css en su página, CSS bloquea la visualización

3. Renderizar árbol

CSSOM Y DOM se combinan para mostrar.

4. Diseño

Todo tiene que calcularse en píxeles. Entonces, cuando dices que un elemento tiene un ancho del 50%, el navegador detrás de la escena lo transforma en píxeles:

Cada vez que se realiza una actualización del árbol de renderizado o cambia el tamaño de la ventana gráfica, el navegador debe ejecutar el diseño nuevamente.

5. Pinta

El paso consiste en convertir todo esto en píxeles en la pantalla. Este es el paso de pintura.

Javascript

Para el ciclo de vida de JavaScript, puede encontrar información here .

La esencia de esto es que el evento que más te interesa es DOMContentLoaded . Esto es cuando el DOM está listo.

Cuando el navegador carga inicialmente HTML y se encuentra con un <script>...</script> en el texto, no puede seguir creando DOM. Debe ejecutar el script en este momento. Así que DOM Content Loaded solo puede suceder después de que se ejecuten todos los scripts.

Las secuencias de comandos externas (con src) también ponen el edificio DOM en pausa mientras la secuencia de comandos se está cargando y ejecutándose. Así que DOM Content Loaded también espera los scripts externos.

La única excepción son los scripts externos con atributos async y defer. Le dicen al navegador que continúe procesando sin esperar los scripts. Entonces, el usuario puede ver la página antes de que los scripts terminen de cargarse, lo que es bueno para el rendimiento.

Además de eso, ¿dónde está JavaScript en todo esto?

Bueno, se está ejecutando entre los repintados. Sin embargo, está bloqueando. El navegador esperará a que se haga JavaScript antes de volver a pintar la página. Eso significa que si quieres que tu página tenga una buena respuesta (muchos fps), entonces el JS tiene que ser relativamente económico.

Galletas

Al recibir una solicitud HTTP, un servidor puede enviar un encabezado Set-Cookie con la respuesta. La cookie generalmente es almacenada por el navegador y, luego, el valor de la cookie se envía junto con cada solicitud hecha al mismo servidor como el contenido de un encabezado HTTP de Cookie. Además, se puede especificar un retraso de caducidad, así como restricciones a un dominio y ruta específicos, lo que limita el tiempo y el sitio al que se envía la cookie.

Para las cosas de redes, esto está más allá del alcance del ciclo de vida del navegador, de lo que se trata su pregunta. Esto también es algo en lo que no estoy muy familiarizado, pero puedes leer sobre TCP here . Lo que podría interesarle es el handshake .

Fuentes:

• Ruta de representación crítica

• ruta de representación crítica

• Cookies

• Cookies

• here

• http

Answer 3

Me gustaría sugerir lo siguiente para cualquiera que quiera ver qué sucede, es una respuesta barata, pero podría ser útil explicar cómo el navegador recupera su cascada de archivos para construir el contenido de una URL (en este caso, un html). )

1. Busque la página que desea usar para mostrar en Chrome (o use esta página para obtener un ejemplo bastante complejo)
2. Abra la consola (Ctrl + Shift + i)
3. Seleccione "Red" de las opciones
4. Hit F5

Juega con la configuración. También debe mirar la línea de tiempo creada en la pestaña Rendimiento

5. Seleccione "Rendimiento" de las opciones
6. Hit F5

Puede ser útil aquí para reducir el rendimiento, para que pueda verlo en tiempo real (lento) si eso es algo que desea demostrar.

Lo importante es (utilizando una página HTML como ejemplo), el orden de renderizado / aplicación de css / ejecutar javascript, depende de dónde aparezca en el DOM. Es posible ejecutar un script en cualquier momento después de que se cargue, sujeto a la disponibilidad de los recursos necesarios. Css podría ser parte del documento HTML (en línea) o podría provenir de un servidor muy ocupado y tardar de 10 a 20 segundos en aplicarse. Espero que esto sea de alguna ayuda -R

Answer 4

Me temo que te refieres cuando el usuario solicita la URL del navegador, porque mencionas la otra actividad, que puede ser una gran cantidad de cosas.

Después de recuperar el documento inicial que puede contener contenido del usuario, marcado, incluso imágenes:

• los recursos vinculados e incrustados (CSS, imágenes) se solicitan a través de solicitudes HTTP adicionales.
• JS podría desencadenar solicitudes (a) síncronas adicionales para recuperar o almacenar activos, datos, etc. ( XML , JSON , ...)
• Se pueden abrir sockets adicionales para transferir todo tipo de datos (binarios) hacia adelante y hacia atrás.
• El almacenamiento local (cookies, indexedDB , caché del navegador, ...) puede usarse para reutilizar datos para solicitudes posteriores
• A través de muchas API , la página puede usar el hardware del cliente (cámara, GPS, micrófono, parlantes, joystick, sistema de archivos, etc.)
• Se pueden invocar todos los tipos de complementos del lado del cliente: lector de PDF, Flash / Silverlight, conexiones Citrix, cliente de correo electrónico
• La página puede comunicarse bilateralmente con otras instancias de la misma página

Hay muchos diagramas de flujo para autenticación similar, SSL, CORS , etc. Mientras que la respuesta de Ced es muy detallada (+1), es solo la punta del iceberg. Tal vez debería KISS por el público de la presentación, su elección.

Answer 5

Puede encontrar muchas explicaciones sobre este tema, pero creo que seguir es la explicación más fácil para comprender cómo los navegadores representan una página web.

1. Escribe una URL en la barra de direcciones en su navegador preferido.
2. El navegador analiza la URL para encontrar el protocolo, el host, el puerto y la ruta, y forma una solicitud HTTP (probablemente el protocolo).
3. Para llegar al host, primero debe traducir el host legible por humanos en un número de IP, y lo hace haciendo una búsqueda de DNS en el host
4. Luego se debe abrir un socket desde la computadora del usuario a ese número de IP, en el puerto especificado (más a menudo en el puerto 80)
5. Cuando se abre una conexión, la solicitud HTTP se envía al host
6. El host reenvía la solicitud al software del servidor (la mayoría de las veces Apache) configurado para escuchar en el puerto especificado
7. El servidor inspecciona la solicitud (la mayoría de las veces, solo la ruta) y lanza el complemento del servidor necesario para manejar la solicitud (correspondiente al idioma del servidor que utiliza, PHP, Java, .NET, Python).
8. El complemento obtiene acceso a la solicitud completa y comienza a preparar una respuesta HTTP.
9. Para construir la respuesta, se accede (muy probablemente) a una base de datos. Se realiza una búsqueda en la base de datos, basada en parámetros en la ruta (o datos) de la solicitud
10. Los datos de la base de datos, junto con otra información que el complemento decide agregar, se combinan en una larga cadena de texto (probablemente HTML).
11. El complemento combina esos datos con algunos metadatos (en forma de encabezados HTTP) y envía la respuesta HTTP de vuelta al navegador.
12. El navegador recibe la respuesta y analiza el HTML (que con un 95% de probabilidad está roto) en la respuesta.
13. Un árbol DOM se crea a partir del HTML roto y se realizan nuevas solicitudes al servidor por cada recurso nuevo que se encuentre en el código HTML (generalmente imágenes, hojas de estilo y archivos JavaScript). Regrese al paso 3 y repita para cada recurso.
14. Las hojas de estilo se analizan y la información de representación en cada una de ellas se adjunta al nodo coincidente en el árbol DOM.
15. Javascript se analiza y se ejecuta, y los nodos DOM se mueven y la información de estilo se actualiza en consecuencia.
16. El navegador representa la página en la pantalla de acuerdo con el árbol DOM y la información de estilo para cada nodo y usted ve la página en la pantalla.

Fuente