Presentamos NoState Prefetch

Katie Hempenius
Katie Hempenius

Introducción

La precarga sin estado es un nuevo mecanismo en 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 la renderización previa, recupera recursos con anticipación, pero a diferencia de esta, no ejecuta JavaScript ni renderiza ninguna parte de la página con anticipación. El objetivo de la precarga de NoState es usar menos memoria que la renderización previa y, al mismo tiempo, reducir los tiempos de carga de la página.

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

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

Motivación

Existen dos motivaciones principales para presentar la precarga sin estado:

Reduce el uso de la memoria

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

Por el contrario, la renderización previa suele consumir 100 MiB de memoria, y el consumo de memoria se limita a 150 MiB. Este alto consumo de memoria hace que no sea adecuado para dispositivos de gama baja (es decir, con menos o igual a 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 nuevas funciones de la plataforma web

Con la renderización previa, no deben ocurrir acciones orientadas al usuario (p.ej., reproducir música o video) ni acciones con estado (p.ej., la mutación de la sesión o el almacenamiento local). Sin embargo, puede ser difícil y complejo impedir que estas acciones se produzcan mientras se renderiza una página. La carga previa sin estado solo recupera recursos con anticipación: no ejecuta código ni renderiza la página. Esto facilita evitar que se produzcan acciones basadas en el estado y para el usuario.

Implementación

En los siguientes pasos, se explica cómo funciona la precarga sin estado.

  1. Se activa NoStatePrefetch.

    Una sugerencia de recursos de renderización previa (es decir, <link rel="prerender">) y algunas funciones de Chrome activarán la precarga 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 crea un nuevo renderizador dedicado para la precodificación sin estado.

    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 precarga de NoState, tiene su propio renderizador para proporcionar aislamiento. Esto ayuda a minimizar los efectos de que algo salga mal (p.ej., que falle una pestaña) 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 precarga sin estado. Luego, HTMLPreloadScanner analiza este recurso para descubrir los subrecursos que se deben recuperar. Si el recurso principal o alguno de sus subrecursos tiene un service worker registrado, estas solicitudes pasarán por el service worker adecuado.

    La precarga sin estado solo admite el método HTTP GET. No recuperará ningún subrecurso 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, certificados de cliente SSL o anulaciones manuales).

  4. Los subrecursos que se recuperen se recuperarán con una prioridad neta de "IDLE".

    La prioridad de red "INACTIVA" es la más baja posible en Chrome.

  5. Todos los recursos que recupera la precarga sin estado se almacenan en caché según sus encabezados de caché.

    La precarga sin estado almacenará en caché todos los recursos, excepto aquellos con el encabezado Cache-Control no-store. Un recurso se volverá a validar antes de usarlo 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 cancela después de que se cargan todos los subrecursos.

    Si se agota el tiempo de espera de los subrecursos, el renderizador se finalizará después de 30 segundos.

  7. El navegador no realiza ninguna modificación de estado, además de actualizar la tienda de cookies y la caché de DNS local. Es importante mencionar esto porque 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 al usuario que realice una acción. Las únicas modificaciones de estado que se producen en la precarga sin estado son la actualización de la caché de DNS cuando llegan las respuestas y la actualización de la tienda 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 reutilizará el renderizador que usó para la prehcarga de NoState y, en su lugar, usará uno nuevo. No renderizar la página con anticipación 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 servicio trabajador, esta carga de página volverá a pasar por el servicio trabajador.

    Si la precarga sin estado no terminó de recuperar subrecursos cuando se necesita la página, el navegador continuará con el proceso de carga de la página desde donde se detuvo la precarga sin estado. El navegador aún deberá recuperar recursos, pero no tantos como sería necesario si no se hubiera iniciado la precarga sin estado.

Impacto en las estadísticas web

Las herramientas de estadísticas web registran las páginas cargadas con la precarga sin estado en momentos ligeramente diferentes según si la herramienta recopila datos del cliente o del servidor.

Las secuencias de comandos de estadísticas del cliente registran una vista de página cuando se muestra la página al usuario. Estas secuencias de comandos dependen de la ejecución de JavaScript, y la precarga sin estado 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 precarga sin estado, puede haber una brecha significativa de tiempo entre el momento en que se controla una solicitud y el momento en que el cliente realmente usa la respuesta (si es que la usa). A partir de Chrome 69, la precarga sin estado agrega el encabezado Purpose: Prefetch a todas las solicitudes para que se puedan distinguir de la navegación normal.

Probar

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

  • Implementa la sugerencia de recursos prerender
  • Cómo recuperar el primer resultado de la Búsqueda de Google
  • Recuperar las páginas que la barra de direcciones de Chrome predice que es probable que se visiten a continuación

Puedes usar los datos internos de Chrome para ver cómo usaste NoStatePrefetch.

Para ver la lista de sitios que se cargaron con la precarga sin estado, ve a chrome://net-internals/#prerender.

Para ver las estadísticas sobre el uso de la precarga sin estado, ve a chrome://histograms y busca "NoStatePrefetch". Hay tres histogramas diferentes de la precarga sin estado: uno para cada caso de uso de la precarga sin estado:

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