Presentamos NoState Prefetch

Katie Hempenius
Katie Hempenius

Publicado el 20 de julio de 2018

Introducción

La recuperación previa sin estado es un nuevo mecanismo de Chrome que es una alternativa al proceso de renderización previa obsoleto, que se usa para potenciar funciones como <link rel="prerender">. Al igual que el procesamiento previo, recupera recursos por adelantado, pero, a diferencia de este, no ejecuta JavaScript ni renderiza ninguna parte de la página por adelantado. El objetivo de NoState Prefetch es usar menos memoria que la renderización previa y, al mismo tiempo, reducir los tiempos de carga de la página.

NoState Prefetch no es una API, sino un mecanismo que usa Chrome para implementar varias APIs y funciones. La API de Resource Hints, así como la recuperación previa de páginas por parte de la barra de direcciones de Chrome, se implementan con la recuperación previa sin estado. Si usas Chrome 63 o versiones posteriores, tu navegador ya usa la función NoState Prefetch para funciones como <link rel="prerender">.

En este artículo, se explica cómo funciona NoStatePrefetch, los motivos por los que se introdujo y las instrucciones para usar los histogramas de Chrome y ver estadísticas sobre su uso.

Motivación

Existen dos motivaciones principales para la introducción de la recuperación previa sin estado:

Reduce el uso de memoria

La recuperación previa sin estado solo usa alrededor de 45 MiB de memoria. El mantenimiento del verificador de carga previa es el principal gasto de memoria para la carga previa sin estado, y este costo se mantiene relativamente constante en los diferentes casos de uso. Aumentar el tamaño o la cantidad de recuperaciones no tiene un efecto significativo en la cantidad de memoria que consume la carga previa sin estado.

En cambio, el procesamiento previo suele consumir 100 MiB de memoria, y el consumo de memoria se limita a 150 MiB. Este alto consumo de memoria lo hace inadecuado para dispositivos de gama baja (es decir, con menos de 512 MB de RAM). Como resultado, Chrome no realiza el procesamiento previo en dispositivos de gama baja y, en su lugar, establecerá una conexión previa.

Facilitar la compatibilidad con las nuevas funciones de la plataforma web

Con la renderización previa, no se deben realizar acciones visibles para el usuario (p.ej., reproducir música o video) ni acciones con estado (p.ej., modificar el almacenamiento local o de sesión). Sin embargo, puede ser difícil y complejo evitar que se produzcan estas acciones mientras se renderiza una página. La carga previa de NoState solo recupera recursos por adelantado: no ejecuta código ni renderiza la página. Esto simplifica la prevención de acciones con estado y orientadas al usuario.

Implementación

En los siguientes pasos, se explica cómo funciona la recuperación previa sin estado.

  1. Se activa NoStatePrefetch.

    Una sugerencia de recurso de procesamiento previo (es decir, <link rel="prerender">) y algunas funciones de Chrome activarán la recuperación previa sin estado, siempre que se cumplan las siguientes dos condiciones: a) el usuario no está en un dispositivo de gama baja y b) el usuario no está en una red celular.

  2. Se creó un renderizador nuevo y exclusivo para la función NoState Prefetch.

    En Chrome, un "renderizador" es un proceso responsable de tomar un documento HTML, analizarlo, construir su árbol de renderización y pintar el resultado en la pantalla. Cada pestaña de Chrome, así como cada proceso de NoState Prefetch, tiene su propio renderizador para proporcionar aislamiento. Esto ayuda a minimizar los efectos de cualquier problema (p.ej., una pestaña que falla) y a evitar que el código malicioso acceda a otras pestañas o a otras partes del sistema.

  3. Se recupera el recurso que se carga con la recuperación previa de NoState. Luego, el HTMLPreloadScanner analiza este recurso para descubrir los subrecursos que se deben recuperar. Si el recurso principal o cualquiera de sus subrecursos tiene un service worker registrado, estas solicitudes pasarán por el service worker correspondiente.

    La recuperación previa sin estado solo admite el método HTTP GET y no recuperará ningún recurso secundario que requiera el uso de otros métodos HTTP. Además, no recuperará ningún recurso que requiera acciones del usuario (p.ej., ventanas emergentes de autenticación, certificado de cliente SSL o anulaciones manuales).

  4. Los subrecursos que se recuperen se recuperarán con una prioridad de red “IDLE”.

    La prioridad de red “IDLE” es la más baja posible en Chrome.

  5. Todos los recursos recuperados por la función de recuperación previa sin estado se almacenan en caché según sus encabezados de caché.

    La recuperación previa sin estado almacenará en caché todos los recursos, excepto aquellos que tengan el encabezado Cache-Control no-store. Un recurso se volverá a validar antes de usarse si hay un encabezado de respuesta Vary, un encabezado Cache-Control no-cache o si el recurso tiene más de 5 minutos.

  6. El renderizador se cierra después de que se cargan todos los recursos secundarios.

    Si se agota el tiempo de espera de los recursos secundarios, el renderizador se cerrará después de 30 segundos.

  7. El navegador no realiza ninguna modificación de estado, excepto la actualización del almacén de cookies y la caché de DNS local. Es importante mencionarlo porque este es el “NoState” en “NoState Prefetch”.

    En este punto del proceso de carga de página “normal”, es probable que el navegador realice acciones que modifiquen su estado, por ejemplo, ejecutar JavaScript, mutar sessionStorage o localStorage, reproducir música o videos, usar la API de History o solicitarle información al usuario. Las únicas modificaciones de estado que se producen en la recuperación previa sin estado son la actualización de la caché de DNS cuando llegan las respuestas y la actualización del almacén de cookies si una respuesta contiene el encabezado Set-Cookie.

  8. Cuando se necesita el recurso, se carga en la ventana del navegador.

    Sin embargo, a diferencia de una página renderizada previamente, la página no será visible de inmediato, ya que el navegador aún debe renderizarla. El navegador no volverá a usar el renderizador que usó para la recuperación previa de NoState y, en su lugar, usará uno nuevo. No renderizar la página por adelantado reduce el consumo de memoria de NoStatePrefetch, pero también disminuye el posible impacto que puede tener en los tiempos de carga de la página.

    Si la página tiene un service worker, esta carga de página volverá a pasar por el service worker.

    Si la recuperación previa de NoState no finalizó la recuperación de recursos secundarios cuando se necesita la página, el navegador continuará con el proceso de carga de la página desde donde lo dejó la recuperación previa de NoState. El navegador aún deberá recuperar recursos, pero no tantos como los que serían necesarios si no se hubiera iniciado la recuperación previa de NoState.

Impacto en las estadísticas web

Las herramientas de análisis web registran las páginas cargadas con la recuperación previa sin estado en momentos ligeramente diferentes, según si la herramienta recopila datos del cliente o del servidor.

Las secuencias de comandos de Analytics del cliente registran una página vista cuando se le muestra la página al usuario. Estos secuencias de comandos dependen de la ejecución de JavaScript, y NoState Prefetch no ejecuta ningún código JavaScript.

Las herramientas de estadísticas del servidor registran métricas cuando se controla una solicitud. En el caso de los recursos cargados a través de la recuperación previa sin estado, puede haber una brecha de tiempo significativa entre el momento en que se controla una solicitud y el momento en que el cliente usa la respuesta (si es que la usa). Desde Chrome 69, NoState Prefetch agrega el encabezado Purpose: Prefetch a todas las solicitudes para que se puedan distinguir de la navegación normal.

Probar

NoStatePrefetch se lanzó en diciembre de 2017 en Chrome 63. Actualmente, se usa para lo siguiente:

  • Implementa la sugerencia de recurso prerender
  • Recupera el primer resultado de la Búsqueda de Google
  • Recupera las páginas que la barra de direcciones de Chrome predice que es probable que se visiten a continuación.

Puedes usar Chrome Internals para ver cómo usaste NoStatePrefetch.

Para ver la lista de sitios que se cargaron con la función NoState Prefetch, ve a chrome://net-internals/#prerender.

Para ver las estadísticas sobre el uso de la función NoState Prefetch, ve a chrome://histograms y busca “NoStatePrefetch”. Hay tres histogramas diferentes de NoState Prefetch, uno para cada caso de uso de esta función:

  • "NoStatePrefetch" (estadísticas de uso por sugerencias de recursos de renderización previa)
  • "gws_NoStatePrefetch" (estadísticas de uso de la página de resultados de la Búsqueda de Google)
  • "omnibox_NoStatePrefetch" (estadísticas de uso de la barra de direcciones de Chrome)