Se usó la API de Cloud Translation para traducir esta página.

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

Descubre qué navegaciones se bloquearon para usar la bfcache y por qué.

Chris Mills

Barry Pollard

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

Estado actual

La API de notRestoredReasons se envió desde Chrome 123 y se lanzará de forma gradual.

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 vuelven a una página que ya visitaron. Se puede bloquear el acceso de las páginas a la bfcache o expulsarlas mientras están en ella por diferentes motivos, algunos de los cuales son obligatorios según una especificación y otros específicos de las implementaciones del navegador.

Anteriormente, los desarrolladores no tenían forma de saber 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 para incluir una propiedad notRestoredReasons. Esto muestra un objeto que contiene información relacionada sobre el marco superior y todos los iframes presentes en el documento:

Motivos por los que se le bloqueó el uso de bfcache
Detalles como el marco id y name para ayudar a identificar iframes en el código HTML

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

Ejemplos

Se puede obtener una instancia de PerformanceNavigationTiming a partir de atributos como Performance.getEntriesByType() y PerformanceObserver.

Por ejemplo, puedes invocar la siguiente función para mostrar todos los objetos PerformanceNavigationTiming presentes 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 de historial, la propiedad PerformanceNavigationTiming.notRestoredReasons muestra un objeto con la siguiente estructura, que representa el estado bloqueado del marco de nivel superior:

{
  children: [],
  id: null,
  name: null,
  reasons: [
    {"reason", "unload-listener"}
  ],
  src: null,
  url: "https://www.example.com/page/"
}

Las propiedades son las siguientes:

children: Un array de objetos que representa el estado bloqueado de cualquier fotograma del mismo origen incorporado en el fotograma de nivel superior. Cada objeto tiene la misma estructura que el objeto superior. De esta manera, se puede representar recursivamente cualquier cantidad de niveles de marcos incorporados dentro del objeto. Si el marco no tiene elementos secundarios, el array estará vacío.
id: Es una cadena que representa el valor del atributo id de la trama (por ejemplo, <iframe id="foo" src="...">). Si la trama no tiene id, el valor será null. Para la página de nivel superior, es null.
name: Es una cadena que representa el valor del atributo name de la trama (por ejemplo, <iframe name="bar" src="...">). Si la trama no tiene name, el valor será una cadena vacía. Para la página de nivel superior, es null.
reasons: Es un array de cadenas, cada una de las cuales representa un motivo por el que se bloqueó la página navegada para usar la bfcache. Existen muchos motivos diferentes por los que se puede producir el bloqueo. Consulta la sección Motivos de bloqueo para obtener más detalles.
src: Es una cadena que representa la ruta de acceso a la fuente de la trama (por ejemplo, <iframe src="b.html">). Si la trama no tiene src, el valor será una cadena vacía. Para la página de nivel superior, es null.
url: Es una cadena que representa la URL de la página o el iframe a la que se navegó.

Para los objetos PerformanceNavigationTiming que no representan navegaciones de historial, la propiedad notRestoredReasons mostrará null.

Ten en cuenta que notRestoredReasons también muestra null cuando no hay motivos de bloqueo, por lo que el valor null no es un indicador de que se usó o no la bfcache. Para ello, debes usar la propiedad event.persisted.

Informa el bloqueo de bfcache en marcos del mismo origen

Cuando una página tiene marcos del 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:

{
  children: [
    {
      children: [],
      id: "iframe-id",
      name: "iframe-name",
      reasons: [],
      src: "./index.html",
      url: "https://www.example.com/"
    },
    {
      children: [],
      id: "iframe-id2",
      name: "iframe-name2",
      reasons: [
        {"reason": "unload-listener"}
      ],
      src: "./unload-examples.html",
      url: "https://www.example.com/unload-examples.html"
    },
  ],
  id: null,
  name: null,
  reasons: [],
  src: null,
  url:"https://www.example.com"
}

Informa el bloqueo de 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 filtraciones de información de origen cruzado. Solo incluimos la información que la página externa ya conoce y si el subárbol de origen cruzado bloqueó bfcache o no. 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:

{
  children: [
    {
      children: [],
      id: "iframe-id",
      name: "iframe-name",
      reasons: [],
      src: "./index.html",
      url: "https://www.example2.com/"
    }
  ],
  id: null,
  name: null,
  reasons: [
        {"reason": "masked"}
  ],
  src: null,
  url:"https://www.example.com"
}

Para todos los iframes de origen cruzado, informamos null para el valor reasons del marco, y el marco de nivel superior mostrará un motivo de "masked". Ten en cuenta que "masked" también se puede usar por motivos específicos del usuario-agente, por lo que no siempre indica un problema en un iframe.

Consulta 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 antes, existen muchos motivos diferentes por los que se puede producir el bloqueo:

Los siguientes son ejemplos de algunos de los motivos más comunes por los que no se puede usar bfcache:

unload-listener: La página registra un controlador unload, que evita el uso de bfcache en ciertos navegadores. Consulta Baja del evento de descarga para obtener más información.
response-cache-control-no-store: La página usa no-store como valor de cache-control.
related-active-contents: La página se abrió desde otra página (ya sea con la "pestaña duplicada") que aún tiene una referencia a esta página.

Comentarios

El equipo de Chromium quiere conocer tus experiencias con la API de notRestoredReasons de bfcache.

Cuéntanos sobre el diseño de la API

¿Hay algo en 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 especificación en el repositorio de GitHub correspondiente o agrega tus comentarios a un problema existente.

Denuncia un problema con la implementación

¿Encontraste un error con la implementación de Chromium? ¿O la implementación es diferente de la especificación? Informa un error en nuestro servicio de seguimiento de errores. Asegúrate de incluir tantos detalles como sea posible, instrucciones simples para reproducirlo y especificar el componente como UI > Browser > Navigation > BFCache. Glitch es excelente para compartir reproducciones rápidas y fáciles.

Cómo mostrar compatibilidad con la API

¿Piensas usar la API de notRestoredReasons de bfcache? Tu apoyo público ayuda al equipo de Chromium a priorizar las funciones y les muestra a otros proveedores de navegadores lo importante que es admitirlas.

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