Document : propriété prerendering

Valeur

Un booléen. Retourne true si le document est actuellement en cours de pré-rendu, sinon false. false sera retourné pour les documents dont le pré-rendu est terminé, ainsi que pour ceux qui n'ont pas été pré-rendus.

Exemples

Pour exécuter une action pendant que la page est en pré-rendu, vous pouvez vérifier la propriété prerendering. Vous pouvez par exemple lancer une analyse statistique :

if (document.prerendering) {
  analytics.sendInfo("arrivé jusqu'ici pendant le pré-rendu !");
}

Lorsqu'un document pré-rendu est activé, PerformanceNavigationTiming.activationStart est défini sur une valeur DOMHighResTimeStamp représentant le temps écoulé entre le début du pré-rendu et l'activation effective du document. La fonction suivante permet de vérifier le pré-rendu et les pages pré-rendues :

function pagePrerendered() {
  return (
    document.prerendering ||
    performance.getEntriesByType("navigation")[0]?.activationStart > 0
  );
}

Lorsque la page pré-rendue est activée par la consultation de l'utilisateur·ice, l'évènement prerenderingchange est déclenché. Cela peut servir à activer des activités qui auparavant démarraient par défaut au chargement de la page, mais que vous souhaitez différer jusqu'à ce que la page soit effectivement consultée. Le code suivant met en place un écouteur d'évènement pour exécuter une fonction une fois le pré-rendu terminé, sur une page pré-rendue, ou l'exécute immédiatement sur une page qui n'est pas pré-rendue :

if (document.prerendering) {
  document.addEventListener("prerenderingchange", initAnalytics, {
    once: true,
  });
} else {
  initAnalytics();
}

Pour mesurer la fréquence d'activation d'un pré-rendu, combinez les trois API : document.prerendering pour détecter les cas où la page est actuellement en pré-rendu, prerenderingchange pour surveiller les activations dans ce cas, et activationStart pour vérifier les cas où la page a été pré-rendue dans le passé.

if (document.prerendering) {
  document.addEventListener(
    "prerenderingchange",
    () => {
      console.log("Pré-rendu activé après l'exécution de ce script");
    },
    { once: true },
  );
} else if (performance.getEntriesByType("navigation")[0]?.activationStart > 0) {
  console.log("Pré-rendu activé avant l'exécution de ce script");
} else {
  console.log("Ce chargement de page ne s'est pas fait via un pré-rendu");
}

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'API Speculation Rules
• L'évènement prerenderingchange
• La propriété PerformanceNavigationTiming.activationStart