Page: DOMContentLoaded, load, beforeunload, unload

Le cycle de vie d’une page HTML comporte trois événements importants:

• DOMContentLoaded – le navigateur est entièrement chargé en HTML et l’arborescence DOM est construite, mais les ressources externes telles que les images <img> et les feuilles de style ne sont peut-être pas encore chargées.
• load – non seulement le HTML est chargé, mais également toutes les ressources externes: images, styles, etc.
• beforeunload/unload – le l’utilisateur quitte la page.

Chaque événement peut être utile:

• DOMContentLoaded événement – DOM est prêt , afin que le gestionnaire puisse rechercher des nœuds DOM, initialiser l’interface.
• load événement – les ressources externes sont chargées, donc les styles sont appliqués, les tailles d’image sont connues, etc.
• beforeunload événement – l’utilisateur part: nous pouvons vérifier si l’utilisateur a enregistré les modifications et lui demander s’il souhaite vraiment partir.
• – l’utilisateur est presque parti, mais nous pouvons toujours lancer certaines opérations, comme l’envoi de statistiques.

Explorons les détails de ces événements.

DOMContentLoaded

L’événement DOMContentLoaded se produit sur l’objet document.

Nous doit utiliser addEventListener pour l’attraper:

Par exemple:

Dans l’exemple, le gestionnaire DOMContentLoaded s’exécute lorsque le document est chargé, afin qu’il puisse voir tous les éléments, y compris <img> ci-dessous.

Mais il n’attend pas que l’image se charge. Ainsi, alert n’affiche aucune taille.

À première vue, l’événement DOMContentLoaded est très simple. L’arborescence DOM est prête – voici l’événement. Il y a cependant quelques particularités.

DOMContentLoaded et scripts

Lorsque le navigateur traite un document HTML et rencontre une balise <script>, il doit s’exécuter avant de continuer à construire le DOM. C’est une précaution, car les scripts peuvent vouloir modifier le DOM, et même document.write dedans, donc DOMContentLoaded doit attendre.

Donc DOMContentLoaded se produit définitivement après de tels scripts:

Dans l’exemple ci-dessus, nous voyons d’abord « Bibliothèque chargée… », puis « DOM prêt! » (tous les scripts sont exécutés).

DOMContentLoaded et styles

Les feuilles de style externes n’affectent pas le DOM, donc DOMContentLoaded ne les attend pas.

Mais il y a un écueil. Si nous avons un script après le style, alors ce script doit attendre que la feuille de style se charge:

La raison en est que le script peut vouloir obtenir des coordonnées et d’autres propriétés des éléments dépendant du style, comme dans l’exemple ci-dessus. Naturellement, il doit attendre que les styles se chargent.

Comme DOMContentLoaded attend les scripts, il attend maintenant les styles avant eux également.

Remplissage automatique du navigateur intégré

Formulaires de remplissage automatique de Firefox, Chrome et Opera sur DOMContentLoaded.

Par exemple, si la page a un formulaire avec login et mot de passe, et le navigateur a mémorisé les valeurs, puis sur DOMContentLoaded il peut essayer de les remplir automatiquement (si approuvé par l’utilisateur).

Donc, si DOMContentLoaded est reporté par des scripts à chargement long, puis le remplissage automatique attend également. Vous l’avez probablement vu sur certains sites (si vous utilisez la saisie automatique du navigateur) – les champs de connexion / mot de passe ne sont pas remplis automatiquement immédiatement, mais il y a un délai avant que la page se charge complètement. C’est en fait le délai jusqu’à l’événement DOMContentLoaded.

window.onload

Le load L’événement sur l’objet window se déclenche lorsque la page entière est chargée, y compris les styles, les images et d’autres ressources. Cet événement est disponible via la propriété onload.

L’exemple ci-dessous montre correctement les tailles d’image, car window.onload attend toutes les images:

window.onunload

Lorsqu’un visiteur quitte la page, l’événement unload se déclenche sur window. Nous pouvons y faire quelque chose qui n’implique pas de retard, comme la fermeture des fenêtres contextuelles associées.

L’exception notable est l’envoi d’analyses.

Disons que nous recueillons des données sur la façon dont la page est utilisé: clics de souris, défilement, zones de page consultées, etc.

Naturellement, l’événement unload se produit lorsque l’utilisateur nous quitte, et nous aimerions enregistrer les données sur notre serveur.

Il envoie les données en arrière-plan.La transition vers une autre page n’est pas retardée: le navigateur quitte la page, mais effectue toujours sendBeacon.

Voici comment l’utiliser:

• La requête est envoyée en POST.
• Nous pouvons envoyer non seulement une chaîne, mais aussi des formulaires et d’autres formats, comme décrit dans le chapitre Fetch, mais il s’agit généralement d’un objet stringifié.
• Les données sont limitées à 64 Ko.

Lorsque la requête sendBeacon est terminée, le navigateur a probablement déjà quitté le document, donc il n’y a aucun moyen d’obtenir la réponse du serveur (qui est généralement vide pour les analyses).

Il existe également un indicateur keepalive pour faire de telles requêtes « après la page gauche » dans la méthode fetch pour les requêtes réseau génériques. Vous trouverez plus d’informations dans le chapitre Fetch API.

Si nous voulons annuler la transition vers une autre page, nous ne pouvons pas le faire ici. Mais nous pouvons en utiliser une autre event – onbeforeunload.

window.onbeforeunload

Si un visiteur a lancé la navigation aw ay de la page ou tente de fermer la fenêtre, le gestionnaire de beforeunload demande une confirmation supplémentaire.

Si nous annulons l’événement, le navigateur peut demander au visiteur si ils sont sûrs.

Vous pouvez l’essayer en exécutant ce code puis en rechargeant la page:

Pour des raisons historiques, renvoyer une chaîne non vide compte également comme une annulation l’événement. Il y a quelque temps, les navigateurs le montraient sous forme de message, mais comme le dit la spécification moderne, ils ne devraient pas le faire.

Voici un exemple:

Le comportement a été modifié , car certains webmasters ont abusé de ce gestionnaire d’événements en affichant des messages trompeurs et ennuyeux. Donc, pour le moment, les anciens navigateurs peuvent toujours l’afficher sous forme de message, mais à part cela, il n’y a aucun moyen de personnaliser le message affiché à l’utilisateur.

readyState

Que se passe-t-il si nous définissons le gestionnaire DOMContentLoaded après le chargement du document?

Naturellement, il ne s’exécute jamais.

Il y a des cas où nous ne sommes pas sûrs que le le document est prêt ou non. Nous aimerions que notre fonction s’exécute lorsque le DOM est chargé, que ce soit maintenant ou plus tard.

La propriété document.readyState nous informe de l’état de chargement actuel.

Il y a 3 valeurs possibles:

• "loading" – le document est en cours de chargement.
• "interactive" – le document a été entièrement lu.
• "complete" – le document a été entièrement lu et toutes les ressources (comme les images) sont chargées

Nous pouvons donc vérifier document.readyState et configurer un gestionnaire ou exécuter le code immédiatement s’il est prêt.

Il y a également l’événement readystatechange qui se déclenche lorsque l’état change, afin que nous puissions afficher tous ces états comme ceci:

Le readystatechange event est une mécanique alternative de suivi de l’état de chargement du document, il est apparu il y a longtemps. De nos jours, il est rarement utilisé.

Voyons le flux complet des événements pour vérifier l’exhaustivité.

Voici un document avec <iframe>, <img> et les gestionnaires qui consignent les événements:

L’exemple de travail se trouve dans le bac à sable.

La sortie typique:

Le les nombres entre crochets indiquent l’heure approximative à laquelle cela se produit. Les événements portant le même chiffre se produisent à peu près au même moment (± quelques ms).

• document.readyState devient interactive juste avant DOMContentLoaded. Ces deux choses signifient en fait la même chose.
• document.readyState devient complete lorsque toutes les ressources (iframe et img) sont chargés. Ici, nous pouvons voir que cela se produit à peu près au même moment que img.onload (img est la dernière ressource) et window.onload. Le passage à l’état complete signifie la même chose que window.onload. La différence est que window.onload fonctionne toujours après tous les autres load gestionnaires.

Résumé

Événements de chargement de page:

• L’événement DOMContentLoaded se déclenche sur document lorsque le DOM est prêt. Nous pouvons appliquer JavaScript aux éléments à ce stade.
  • Script tel que <script>https://javascript.info/...</script> ou <script src="https://javascript.info/..."></script> block DOMContentLoaded, le navigateur attend pour qu’ils s’exécutent.
  • Les images et autres ressources peuvent également continuer à se charger.
• Le load L’événement sur window se déclenche lorsque la page et toutes les ressources sont chargées. Nous l’utilisons rarement, car il n’est généralement pas nécessaire d’attendre si longtemps.
• L’événement beforeunload sur window se déclenche lorsque l’utilisateur souhaite quitter la page. Si nous annulons l’événement, le navigateur demande si l’utilisateur souhaite vraiment partir (par exemple, nous avons des modifications non enregistrées).
• L’événement unload sur window se déclenche lorsque l’utilisateur quitte enfin, dans le gestionnaire, nous ne pouvons faire que des choses simples qui n’impliquent pas de retards ou de demandes à un utilisateur. En raison de cette limitation, il est rarement utilisé. Nous pouvons envoyer une requête réseau avec navigator.sendBeacon.
• document.readyState est l’état actuel du document, les modifications peuvent être suivi dans l’événement readystatechange:
  • loading – le document est en cours de chargement.
  • interactive – le document est analysé, se produit à peu près au même moment que DOMContentLoaded, mais avant.
  • complete – le document et les ressources sont chargés, se produit à peu près au même moment que window.onload, mais avant.