API de notRestoredReasons de la memoria caché atrás/adelante

Consulta qué navegaciones no pueden usar la bfcache y por qué.

Chris Mills

La propiedad notRestoredReasons, agregada a la clase PerformanceNavigationTiming, informa información sobre si se bloqueó el uso de bfcache en la navegación y por qué se bloqueó el uso de los marcos presentes en el documento. Los desarrolladores pueden usar esta información para identificar las páginas que necesitan actualizaciones a fin de que sean compatibles con la bfcache. De esta manera, se mejora el rendimiento del sitio.

Estado actual

Step Estado
1. Crear explicación Completo
2. Crea el borrador inicial de la especificación No iniciada
3. Recopila comentarios e itera en el diseño En curso
4. Prueba de origen Iniciado
5. Lanzamiento No iniciada

Prueba la API de notRestoredReasons de bfcache

A partir de la versión 109, la API de notRestoredReasons de bfcache está disponible como prueba de origen en Chromium. Para obtener información actualizada sobre el programa de lanzamiento de esta función, visita la página de la función ChromeStatus.com (consulta la hoja de ruta de Chrome para conocer las fechas de lanzamiento de la versión).

Para probar la API de notRestoredReasons de bfcache, regístrate en la prueba de origen y utilízala en tus experimentos. Consulta Participa en una prueba de origen para obtener instrucciones sobre cómo usar tu token una vez que te hayas registrado.

Conceptos y uso

Los navegadores modernos proporcionan una función de optimización para la navegación del historial llamada memoria caché atrás/adelante (bfcache). Esto permite una experiencia de carga instantánea cuando los usuarios regresan a una página que ya visitaron. Es posible que se bloquee la entrada de páginas a la bfcache o se expulsen mientras están en la bfcache por diferentes motivos; algunos son obligatorios de acuerdo con una especificación y otras específicas de las implementaciones del navegador.

Anteriormente, no había forma de que los desarrolladores supieran por qué se bloqueaba el uso de la bfcache en el campo para sus páginas, aunque había una prueba en las herramientas para desarrolladores de Chrome. Para habilitar la supervisión en el campo, se extendió la clase PerformanceNavigationTiming de modo que incluya una propiedad notRestoredReasons. Esto muestra un objeto que contiene información relacionada de todos los marcos presentes en el documento:

  • Detalles como el marco id y name para ayudar a identificarlos en el código HTML
  • Si se bloqueó el uso de la bfcache

  • Razones por las que se les bloqueó el uso de la bfcache.

    Esto permite que los desarrolladores tomen medidas para que esas páginas sean compatibles con la bfcache, lo que mejora el rendimiento del sitio.

Ejemplos

Se puede obtener una instancia de PerformanceNavigationTiming de funciones como Performance.getEntriesByType() y PerformanceObserver.

Por ejemplo, puedes invocar la siguiente función para mostrar todos los objetos PerformanceNavigationTiming que se encuentran actualmente en el cronograma de rendimiento y registrar su notRestoredReasons:

function returnNRR() {
  const navEntries = performance.getEntriesByType("navigation");
  for (let i = 0; i < navEntries.length; i++) {
    console.log(`Navigation entry ${i}`);
    let navEntry = navEntries[i];
    console.log(navEntry.notRestoredReasons);
  }
}

Para las navegaciones del historial, la propiedad PerformanceNavigationTiming.notRestoredReasons muestra un objeto con la siguiente estructura, que representa el estado bloqueado del marco de nivel superior:

{
  blocked: true,
  children: [],
  id: "",
  name: "",
  reasons: [ "Internal Error", "Unload handler" ],
  src: "",
  url: "a.com"
}

Las propiedades son las siguientes:

blocked
Es un valor booleano que especifica si la página a la que se accedió no puede usar la bfcache (true) o no (false).
children
Es un array de objetos que representan el estado bloqueado de los fotogramas incorporados en el marco de nivel superior. Cada objeto tiene la misma estructura que el objeto principal. De esta manera, cualquier cantidad de niveles de marcos incorporados se puede representar dentro del objeto de manera recursiva. Si el marco no tiene elementos secundarios, el array estará vacío.
id
Es una cadena que representa el valor del atributo id del marco (por ejemplo, <iframe id="foo" src="...">). Si el marco no tiene id, el valor será una cadena vacía.
name
Es una cadena que representa el valor del atributo name del marco (por ejemplo, <iframe name="bar" src="...">). Si el marco no tiene name, el valor será una cadena vacía.
reasons
Es un array de cadenas que representan un motivo por el que se bloqueó el uso de la bfcache en la página a la que se navega. Existen muchos motivos diferentes por los que se puede producir un bloqueo. Consulta la sección Motivos de bloqueo a continuación para obtener más detalles.
src
Es una cadena que representa la ruta al origen del marco (por ejemplo, <iframe src="b.html">). Si el marco no tiene src, el valor será una cadena vacía.
url
Es una cadena que representa la URL de la página a la que se navegó.

En el caso de los objetos PerformanceNavigationTiming que no representan navegaciones del historial, la propiedad notRestoredReasons mostrará null. Esto es útil para determinar si la bfcache no es relevante para una navegación en particular, en lugar de no admitir notRestoredReasons, en cuyo caso mostraría undefined.

Cómo informar el bloqueo de la bfcache en tramas del mismo origen

Cuando una página tiene marcos de mismo origen incorporados, el valor notRestoredReasons que se muestra contendrá un objeto dentro de la propiedad children que representa el estado bloqueado de cada marco incorporado.

Por ejemplo:

{
  blocked: false,
  children: [
    { url: "a.com", src: "b.a.com", id: "b", name: "b", blocked: false, reasons: [], children: [] },
    { url: "a.com", src: "c.a.com", id: "c", name: "c", blocked: true, reasons: [ "BroadcastChannel" ], children: [] },
    { url: "a.com", src: "d.a.com", id: "d", name: "d", blocked: false, reasons: [], children: [] }
  ],
  id: "",
  name: "",
  reasons: [],
  src: "",
  url:"a.com"
}

Cómo informar el bloqueo de la bfcache en marcos de origen cruzado

Cuando una página tiene marcos de origen cruzado incorporados, limitamos la cantidad de información que se comparte sobre ellos para evitar que se filtre información de origen cruzado. Solo incluimos información que la página externa ya sabe y si el subárbol de origen cruzado bloqueó o no la bfcache. No incluimos ningún motivo de bloqueo ni información sobre los niveles inferiores del subárbol (incluso si algunos subniveles son del mismo origen).

Por ejemplo:

{
  blocked: false,
  children: [
    { url: "a.com", src: "c.a.com", id: "c", name: "c", blocked: true, reasons: [ "ScreenReader" ], children: [] },
    /* cross-origin frame */
    { url: "", src: "b.com", id: "d", name: "d", blocked: true, reasons: [], children: [] }
  ],
  id: "",
  name: "",
  reasons: [],
  src: "",
  url:"a.com"
}

Si varios fotogramas de origen cruzado tienen motivos de bloqueo, seleccionamos de forma aleatoria un iframe de origen cruzado y, luego, informamos si se bloqueó la bfcache o no. Para el resto de los fotogramas, informamos null para el valor blocked. De esta forma, se evita que las personas que actúan de mala fe infieran información sobre el estado del usuario en sitios que no controlan mediante la incorporación de varios marcos de terceros en una página y, luego, la comparación de la información de bloqueo de cada uno de ellos.

{
  blocked: false,
  children: [
    /* cross-origin frames */
    {url: "", src: "b.com", id: "b", name: "b", blocked: null, reasons: [], children: []},
    {url: "", src: "c.com", id: "c", name: "c", blocked: true, reasons: [], children: []},
    {url: "", src: "d.com", id: "d", name: "d", blocked: null, reasons: [], children: []}
  ]
  id: "",
  name: "",
  reasons: [],
  src: "",
  url:"a.com"
}

Consulte la sección Seguridad y privacidad en la explicación para obtener más detalles sobre las consideraciones de seguridad y privacidad.

Motivos de bloqueo

Como dijimos anteriormente, existen muchas razones diferentes por las que se puede producir un bloqueo. Compilamos una hoja de cálculo útil en la que se muestran todas las cadenas de motivo y se explica lo que significan.

Hay algunas categorías principales de razones que vale la pena mencionar:

  • Circumstantial: Se refiere a motivos de bloqueo que no están directamente relacionados con el código de la página del desarrollador. Por ejemplo, un componente relacionado falló, se produjo un error en el proceso de carga, la página se encuentra en un estado temporal que no se puede almacenar en caché, se inhabilitó la bfcache debido a memoria insuficiente o un service worker hizo algo en la página que la descalifica y no puede almacenarse en caché.
  • Extensions: Hay varios mensajes de motivo relacionados con las extensiones. Por lo general, combinamos bastantes motivos diferentes en el motivo de las "Extensiones". Somos intencionalmente poco claros sobre los motivos de bloqueo relacionados con las extensiones porque no queremos dar demasiada información sobre qué extensiones instaló el usuario, cuáles están activas en la página, qué está haciendo, etcétera.
  • PageSupportNeeded: El código del desarrollador usa una función de plataforma web que, de otro modo, no bloquea la bfcache, pero se encuentra en un estado que bloquea la bfcache. Por ejemplo, la página actualmente tiene un BroadcastChannel con objetos de escucha registrados o una conexión IndexedDB abierta. O bien, la página registró un controlador unload, lo que actualmente evita que se use la bfcache en algunos navegadores.
  • SupportPending: El código del desarrollador usa una función de plataforma web que descalifica la página de la bfcache, por ejemplo, la API de Web Serial, la API de Web Authentication, la API de File System Access o la API de Media Session. O bien, la página usa Cache-Control: no-store, lo que actualmente impide que se use la bfcache en algunos navegadores. Esta categoría también se usa para informar la presencia de una herramienta fuera de la página que bloquea la bfcache, como un lector de pantalla o el administrador de contraseñas de Chrome.

Comentarios

El equipo de Chromium quiere conocer tu experiencia con la API de notRestoredReasons de bfcache.

Cuéntanos sobre el diseño de la API

¿Hay algo acerca de la API que no funciona como esperabas? ¿O faltan métodos o propiedades que necesitas para implementar tu idea? ¿Tienes alguna pregunta o comentario sobre el modelo de seguridad? Informa un problema de especificaciones en el [repositorio de GitHub][feedback] o agrega tus ideas a un problema existente.

Informar un problema con la implementación

¿Encontraste un error en la implementación de Chromium? ¿O la implementación es diferente de la especificación? Informa un error en new.crbug.com. Asegúrate de incluir tantos detalles como puedas, instrucciones simples para reproducir y especificar el componente como UI > Browser > Navigation > bfcache. Glitch funciona muy bien para compartir repros rápidos y fáciles.

Muestra compatibilidad con la API

¿Planeas usar la API de notRestoredReasons de bfcache? Tu asistencia pública ayuda al equipo de Chromium a priorizar funciones y le muestra a otros proveedores de navegadores la importancia de admitirlas.

Envía un tweet a @ChromiumDev con el hashtag #NotRestoredReasons y cuéntanos dónde y cómo lo usas.

Vínculos útiles