Introducción
NoState Prefetch es un nuevo mecanismo de Chrome que es una alternativa al proceso de renderización previa obsoleto, que se utiliza para potenciar funciones como <link rel="prerender">. Al igual que el procesamiento previo, este método recupera los recursos por adelantado, pero, a diferencia del procesamiento previo, no ejecuta JavaScript ni procesa ninguna parte de la página con anticipación. 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 carga previa de páginas mediante la barra de direcciones de Chrome, se implementan usando NoState Prefetch. Si usas Chrome 63 o una versión posterior, el navegador ya usa NoState Prefetch para funciones como <link rel="prerender">.
En este artículo, se explica el funcionamiento de NoStatePrefetch, los motivos para su implementación y las instrucciones para usar los histogramas de Chrome con el fin de ver estadísticas de su uso.
Motivación
Hubo dos motivaciones principales para la introducción de NoState Prefetch:
Reduce el uso de la memoria
NoState Prefetch solo usa unos 45 MiB de memoria. Mantener el escáner de precarga es el gasto principal de memoria de NoState Prefetch y este costo se mantiene relativamente constante en diferentes casos de uso. El aumento del tamaño o el volumen de las recuperaciones no tiene un efecto significativo en la cantidad de memoria que consume NoState Prefetch.
Por el contrario, la renderización previa suele consumir 100 MiB de memoria, y el consumo de memoria se limita a 150 MiB. Debido a este alto consumo de memoria, no es adecuado para dispositivos de gama baja (es decir, <= 512 MB de RAM). Como resultado, Chrome no realiza el procesamiento previo en dispositivos de gama baja y, en su lugar, se preconectará.
Facilitar la compatibilidad de nuevas funciones de plataformas web
Con la renderización previa, no debería ocurrir ninguna acción para el usuario (p.ej., reproducir música o videos) ni con estado (p.ej., mutación de sesión o almacenamiento local). Sin embargo, puede ser difícil y complejo impedir que se realicen estas acciones mientras se renderiza una página. NoState Prefetch solo recupera los recursos con anticipación: no ejecuta código ni procesa la página. Esto facilita la prevención de acciones para el usuario y con estado.
Implementación
En los siguientes pasos, se explica cómo funciona NoState Prefetch.
Se activa NoStatePrefetch.
Una sugerencia de recurso de renderización previa (es decir,
<link rel="prerender">) y algunas funciones de Chrome activarán la carga previa de NoState siempre que se cumplan las siguientes dos condiciones: a) el usuario no usa un dispositivo de gama baja y b) el usuario no está conectado a una red móvil.Se creó un nuevo procesador dedicado para la carga previa de NoState.
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, tienen su propio procesador para proporcionar aislamiento. Esto ayuda a minimizar los efectos de algo que sale mal (p.ej., el fallo de una pestaña) y ayuda a evitar que el código malicioso acceda a otras pestañas o a otras partes del sistema.
Se recupera el recurso que se carga con NoState Prefetch. 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 correspondiente.
NoState Prefetch 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).
Los subrecursos que se recuperan se recuperarán con una prioridad de red “IDLE”.
La prioridad de red "INACTIVA" es la menor prioridad de red posible en Chrome.
Todos los recursos recuperados por NoState Prefetch se almacenan en caché de acuerdo con sus encabezados de caché.
NoState Prefetch almacenará en caché todos los recursos, excepto aquellos que tienen el encabezado
no-storede Cache-Control. Un recurso se volverá a validar antes de usarlo si hay un encabezado de respuestaVary, un encabezado Cache-Controlno-cacheo si el recurso tiene más de 5 minutos de antigüedad.El procesador se cierra después de que se cargan todos los subrecursos.
Si se agota el tiempo de espera de los subrecursos, el procesador se desactiva después de 30 segundos.
El navegador no realiza ninguna modificación de estado además de actualizar el almacén de cookies y la caché de DNS local. Es importante mencionar esto porque es "NoState" en "NoState Prefetch".
En este punto del proceso "normal" de carga de la página, es probable que el navegador realice acciones que modificarían su estado: por ejemplo, ejecutar JavaScript, mutar
sessionStorageolocalStorage, reproducir música o videos, usar la API de History o pedirle al usuario. Las únicas modificaciones de estado que se producen en NoState Prefetch 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 encabezadoSet-Cookie.Cuando el recurso se necesita, 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, sino que el navegador deberá procesarla. El navegador no reutilizará el procesador que usó para la carga previa de NoState y, en su lugar, usará un procesador 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, la carga de esta página volverá a pasar por el service worker.
Si NoState Prefetch no terminó de recuperar los subrecursos cuando se necesitaba la página, el navegador continuará con el proceso de carga de la página desde donde se detuvo NoState Prefetch. El navegador aún necesitará recuperar los recursos, pero no tantos como fueran necesarios si no se hubiera iniciado NoState Prefetch.
Impacto en la analítica web
Las herramientas de estadísticas web registran las páginas cargadas con NoState Prefetch 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 la página se muestra al usuario. Estas secuencias de comandos dependen de la ejecución de JavaScript, y NoState Prefetch no ejecuta 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 NoState Prefetch, puede haber un intervalo de tiempo significativo entre el momento en que se maneja una solicitud y el momento en que el cliente usa la respuesta (si se usa). A partir de Chrome 69, NoState Prefetch agrega el encabezado Purpose: Prefetch a todas las solicitudes para que se distingan de la navegación normal.
Explorar
NoStatePrefetch se envió a partir de diciembre de 2017 en Chrome 63. Actualmente, se utiliza para lo siguiente:
- Implementa la sugerencia del recurso
prerender - Obtén el primer resultado en los resultados de la Búsqueda de Google
- Recuperar las páginas que, según la barra de direcciones de Chrome, podrían visitarse a continuación
Puedes usar Chrome Internals para ver cómo has usado NoStatePrefetch.
Para ver la lista de sitios que se cargaron con NoState Prefetch, ve a chrome://net-internals/#prerender.
Para ver las estadísticas del uso de NoState Prefetch, ve a chrome://histograms y busca "NoStatePrefetch". Hay tres histogramas diferentes de NoState Prefetch, uno para cada caso de uso de NoState Prefetch:
- "NoStatePrefetch" (estadísticas del uso por sugerencias de recursos de renderización previa)
- "gws_NoStatePrefetch" (estadísticas de uso por parte de la página de resultados de la Búsqueda de Google)
- "box_NoStatePrefetch" (estadísticas de uso de la barra de direcciones de Chrome)