☰

¿Cómo sabe el navegador cuánta página se ha cargado?

tag-icon • tag-icon firefox browser progress
¿Cómo sabe el navegador cuánta página se ha cargado?

Al observar la barra de progreso del navegador, que a veces se ralentiza cerca del final durante la carga de una página web, me preguntaba si el navegador muestra progreso según eltamañode elementos presentes en la página o en elNo.de elementos o algo más?

¿Quizás alguien que haya verificado la fuente de Firefox o algún otro navegador sepa esto con un poco más de detalle?

Respuesta1

Quéescargando un sitio web?

Cargando una página webesmás o menos como descargar un archivo. Lo que obtiene del servidor es, en la mayoría de los casos, sólo un archivo HTML transferido a través de HTTP. Primero, realiza una solicitud HTTP a la URL del sitio, como GET http://superuser.com.

Como dijo William Jackson, HTTP usa elContent-Lengthcampo de encabezado para mostrarle el tamaño de ese archivo de antemano. Esto es algo que el navegador puede evaluar para adivinar cuánto progreso ha realizado al descargar todo el sitio.

Sin embargo, esto no cubre todos los recursos que un archivo HTML puede cargar al hacer referencia a ellos. Estos podrían incluir:

  • Imágenes externas
  • Hojas de estilo externas
  • Guiones externos
  • Marcos
  • Cargas AJAX

¿Cómo sabe el navegador cuánto cargar?

Ahora es tarea del navegador encontrar estas referencias y solicitarlas también. Entonces, para cada referencia externa, el navegador consultará su caché o enviará una nueva solicitud HTTP. Para el superusuario, estos serían los siguientes archivos alojados en redes de distribución de contenido para un rendimiento más rápido:

  • GET http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js– el archivo jQuery principal
  • GET http://cdn.sstatic.net/js/stub.js– algunas funciones JS
  • GET http://cdn.sstatic.net/superuser/all.css– la hoja de estilo
  • ...

De hecho, puedes ver esto usando Firebug o el depurador de Chrome, cuando habilitas el seguimiento de la línea de tiempo. Esta es la línea de tiempo de carga del Superusuario, filtrada para que solo se muestren las solicitudes. Click para agrandar:

ingrese la descripción de la imagen aquí

Como podemos ver, el sitio principal de superusuario tardaría más en cargarse, pero en cascada desde él, hay otras cargas de páginas (es decir, solicitudes HTTP o solicitudes de caché) involucradas. Todos ellos también exponen sus archivos Content-Length, por lo que el navegador puede adivinar cuánto tiempo llevará cargar todos estos archivos.

Y como todo esto sucede en muy poco tiempo, no notarás las pequeñas irregularidades en la barra de progreso. A veces verá que la barra de progreso se bloquea en dos tercios; esto puede deberse a que el navegador no puede cargar un recurso externo tan rápido como los demás.

¿Cómo implementan esto los navegadores?

Google Chrome

Revisé las fuentes de Google Chrome (también conocido como Chromium) y encontré esta clase llamadaProgresoTracker.cpp. En realidad, está escrito por Apple, por lo que lo más probable es que surja delkit webmotor de renderizado. Incluye los siguientes campos:

ProgressTracker::ProgressTracker()
    : m_totalPageAndResourceBytesToLoad(0)
    , m_totalBytesReceived(0)

Por lo tanto, como dije, se identificará el número total de bytes de recursos y el progreso cambiará en consecuencia. Hay un comentario interesante que muestra cómo se eleva la importancia real de la primera página cargada:

// Para documentos que utilizan el sistema de diseño de WebCore, trate el primer diseño como el punto medio.

Por lo tanto, si la primera página está cargada (y sus recursos externos aún están por cargar), el progreso será del 50%.

Firefox (complemento Fission)

Ahora, también hay una métrica un poco más sencilla. he investigadoFisión, la extensión de la barra de progreso para Firefox. Si no lo leo de manera incorrecta, hace algo que uno podría pensar fácilmente.

Cada sitio web consta de una serie deElementos DOM. Al analizar el primer sitio HTML, se puede estimar el número total de elementos DOM que se cargarán.

Para cada elemento DOM cargado, aumente el contador y simplemente muestre una barra de progreso de acuerdo con él.

Respuesta2

Cuando un navegador solicita un archivo de un servidor, el servidor tiene la opción de decirle al navegador de antemano qué tamaño tiene el archivo. El servidor hace esto enviando unEncabezado de longitud del contenido.

Hay alguna otra información sobrecómo un navegador puede determinar el tamaño de un archivo que está descargando.

información relacionada