HTML Native Lifecycle (Lifecycle) fait généralement référence aux événements et aux étapes qu'un navigateur rencontre lors du chargement et du traitement d'une page Web. Bien que HTML lui-même soit un langage de balisage et ne dispose pas de points d'ancrage de cycle de vie comme JavaScript, les événements du cycle de vie HTML sont en réalité gérés via des interactions JavaScript avec le DOM (Document Object Model).
Lorsque le navigateur charge une page Web, il reçoit un fichier HTML du serveur et commence à l'analyser. Durant cette étape, le navigateur crée une arborescence DOM (Document Object Model) et convertit le HTML en objets DOM manipulables.
À proprement parler, l'analyse HTML est une phase essentielle dans le processus de chargement des pages mais n'entre pas dans la catégorie des « événements du cycle de vie » au sens traditionnel, car elle ne peut pas être capturée ou écoutée directement via JavaScript. Cependant, d'un point de vue plus large, l'analyse HTML est un élément indispensable du cycle de vie global des pages, ce qui en fait un élément essentiel dans les discussions sur le cycle de vie HTML.
Ce processus est interne au navigateur, les développeurs ne peuvent donc pas écouter directement cette phase. Cependant, ils peuvent améliorer la vitesse d'analyse en optimisant la structure HTML et en minimisant les ressources bloquantes (telles que les fichiers JavaScript).
Lorsque le navigateur analyse le HTML, il rencontre des ressources externes. En fonction du type de ressource, de la méthode de chargement (synchrone ou asynchrone) et de la priorité, le navigateur décide comment continuer le chargement et le rendu de la page. Ce comportement affecte directement la séquence de rendu de la page et le temps de chargement du contenu visible par les utilisateurs.
Différents types de ressources ont des comportements de chargement distincts, qui influencent l'analyse et le rendu des pages :
Chargement CSS : lorsque le navigateur rencontre un
Chargement JavaScript : Par défaut, lorsque le navigateur rencontre un message <script> balise, il arrête l'analyse HTML jusqu'à ce que le fichier JavaScript soit chargé et exécuté. C'est ce qu'on appelle le chargement synchrone. JavaScript chargé de manière synchrone bloque l'analyse HTML, affectant le timing des événements DOMContentLoaded et de chargement.</script>
Dans l'ensemble, le chargement de ressources externes est étroitement lié au cycle de vie de la page, car le chargement de ressources externes a un impact sur l'analyse, le rendu et le déclenchement d'événements critiques du cycle de vie tels que DOMContentLoaded et Load. Plus le temps de chargement des ressources externes est court, plus les événements du cycle de vie sont déclenchés rapidement.
readyState et readystatechange sont deux attributs et événements clés du navigateur utilisés pour suivre l'état des documents et des requêtes réseau (telles que les requêtes AJAX). Ils aident les développeurs à comprendre les différentes étapes du processus de chargement des pages Web et à exécuter les opérations correspondantes au cours de ces étapes. Ils sont principalement utilisés dans le cadre du chargement de documents et des requêtes réseau (ex : XMLHttpRequest).
La propriété document.readyState représente l'état actuel du document et a trois valeurs possibles, correspondant aux différentes étapes de chargement du document :
En utilisant document.readyState, les développeurs peuvent vérifier l'état de chargement du document et effectuer les actions correspondantes en fonction de différents états. Par exemple :
if (document.readyState === 'complete') {
// The page is fully loaded; perform page operations
}
L'événement readystatechange est déclenché lorsque le readyState du document change. Les développeurs peuvent écouter l'événement readystatechange pour exécuter une logique spécifique à différentes étapes de chargement. Par exemple :
document.addEventListener('readystatechange', function () {
if (document.readyState === 'interactive') {
// The DOM tree has been completely built; DOM manipulation is now possible
console.log('DOM is fully parsed');
} else if (document.readyState === 'complete') {
// The entire page, including all resources, is fully loaded
console.log('Page and resources are fully loaded');
}
});
Vous trouverez ci-dessous un exemple HTML illustrant l'utilisation de document.readyState et readystatechange pour suivre les différentes étapes de chargement de documents. La page contient des éléments HTML de base et affiche le contenu ou les informations correspondants à différentes étapes de readyState :
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document ReadyState Example</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.status {
font-size: 1.2em;
color: #333;
margin: 20px 0;
}
img {
max-width: 100%;
height: auto;
}
</style>
<h1>Hello World</h1>
<script>
function updateStatus() {
console.log(document.readyState);
switch (document.readyState) {
case 'loading':
console.log('loading');
break;
case 'interactive':
console.log('interactive');
break;
case 'complete':
console.log('complete');
break;
}
}
updateStatus();
document.addEventListener('readystatechange', updateStatus);
</script>
La sortie du code ci-dessus :
loading interactive complete
L'événement DOMContentLoaded est un événement clé déclenché par le navigateur lors du processus de chargement du document HTML. Cela signifie que tous les éléments du document HTML ont été complètement analysés et que l'arborescence DOM a été construite. Cependant, les ressources externes telles que les images, les feuilles de style et les vidéos n'ont peut-être pas fini de se charger. Il s'agit de la principale distinction entre DOMContentLoaded et l'événement de chargement.
L'événement DOMContentLoaded se produit sur l'objet document et doit être capturé à l'aide de addEventListener :
document.addEventListener('DOMContentLoaded', () => {});
L'événement DOMContentLoaded est déclenché lorsque le navigateur termine l'analyse du document HTML et génère tous les nœuds DOM. Cependant, il ne nécessite pas de ressources externes (par exemple, des images, des vidéos, des feuilles de style ou des fichiers de polices) pour être entièrement chargé.
Par exemple, si la page contient une grande image, l'événement téléchargé DomContent tirera avant que l'image ne soit complètement chargée. À ce stade, l'arbre Dom est entièrement construit et les développeurs peuvent manipuler et accéder aux éléments DOM de la page. Voici un exemple:
if (document.readyState === 'complete') {
// The page is fully loaded; perform page operations
}
S'il y a des fichiers JavaScript synchrones sur la page (c'est-à-dire des scripts sans les attributs asynchronisés ou différer), le navigateur suscitera l'analyse HTML lors de la rencontre a & lt; script & gt; Tag, attendez que le script s'exécute, puis continuez l'analyse. Cela retardera le déclenchement de l'événement DomContent.
document.addEventListener('readystatechange', function () {
if (document.readyState === 'interactive') {
// The DOM tree has been completely built; DOM manipulation is now possible
console.log('DOM is fully parsed');
} else if (document.readyState === 'complete') {
// The entire page, including all resources, is fully loaded
console.log('Page and resources are fully loaded');
}
});
Ordre de sortie:
Les scripts qui font pas Bloquer l'événement DomContent Télélé incluent:
L'événement de chargement est déclenché sur l'objet Window lorsque la page entière, y compris les styles, les images et autres ressources, est entièrement chargée. Cet événement peut être capturé à l'aide de la propriété Onload.
Voici un exemple où la taille de l'image est correctement affichée car la fenêtre. On charge que toutes les images soient complètement chargées:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document ReadyState Example</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.status {
font-size: 1.2em;
color: #333;
margin: 20px 0;
}
img {
max-width: 100%;
height: auto;
}
</style>
<h1>Hello World</h1>
<script>
function updateStatus() {
console.log(document.readyState);
switch (document.readyState) {
case 'loading':
console.log('loading');
break;
case 'interactive':
console.log('interactive');
break;
case 'complete':
console.log('complete');
break;
}
}
updateStatus();
document.addEventListener('readystatechange', updateStatus);
</script>
L'événement avant-charge est déclenché juste avant le déchargement de la page (par exemple, lorsque l'utilisateur navigue vers une autre page, ferme l'onglet ou rafraîchit la page). Cet événement permet aux développeurs d'inviter l'utilisateur à confirmer s'ils veulent vraiment quitter la page. Il est généralement utilisé pour rappeler aux utilisateurs d'enregistrer des données non sauvées ou de les alerter sur la perte de données potentielle.
Les navigateurs permettent à un court message d'être affiché pendant cet événement, demandant aux utilisateurs s'ils sont sûrs qu'ils souhaitent quitter la page. Par exemple, lorsque les utilisateurs ont entré le contenu dans un formulaire non enregistré, les développeurs peuvent utiliser avant la charge pour empêcher la fermeture accidentelle des pages ou l'actualisation.
Les navigateurs modernes n'affichent pas les messages d'invite personnalisés. Au lieu de cela, ils montrent un message d'avertissement standardisé. Voici un exemple:
loading interactive complete
Lorsque les utilisateurs tentent de quitter la page, cet événement déclenche une boîte de dialogue de confirmation, leur demandant s'ils veulent quitter ou rester sur la page.
En raison des problèmes de sécurité et d'expérience utilisateur, les navigateurs ignorent la plupart des messages personnalisés et affichent plutôt une boîte de dialogue générique. La surutilisation avant la charge peut dégrader l'expérience utilisateur, il ne doit donc être utilisé que lorsqu'il est absolument nécessaire, comme dans les cas de données non sauvées.
L'événement de déchargement est déclenché lorsque la page est complètement déchargée (par exemple, lorsque la page est fermée, actualisée ou éloignée). Contrairement à beforeunload, l'événement unload ne peut pas empêcher les utilisateurs de quitter la page. Il est principalement utilisé pour effectuer des tâches de nettoyage final, telles que la suppression des données temporaires, l'annulation des requêtes asynchrones et la libération de mémoire.
L'événement unload ne peut pas inviter les utilisateurs, contrairement à beforeunload. Au lieu de cela, il est utilisé pour des opérations telles que la fermeture des connexions WebSocket, l'enregistrement des données sur le stockage local ou l'effacement des minuteries.
Une application spécifique de l'événement de déchargement consiste à envoyer des données d'analyse avant le déchargement de la page. La méthode navigator.sendBeacon(url, data) peut être utilisée pour envoyer des données en arrière-plan sans retarder le déchargement de la page. Par exemple :
if (document.readyState === 'complete') {
// The page is fully loaded; perform page operations
}
Lorsque la requête sendBeacon est terminée, le navigateur peut avoir déjà quitté le document, donc aucune réponse du serveur n'est récupérable (la réponse est souvent vide à des fins d'analyse).
L'analyse HTML constitue la base du cycle de vie de la page, mais elle n'est pas en soi un événement du cycle de vie écoutable par JavaScript. L'événement DOMContentLoaded est déclenché lorsque l'arborescence DOM est entièrement construite, tandis que l'événement load se déclenche une fois que toutes les ressources de la page sont complètement chargées. L'événement beforeunload invite les utilisateurs à confirmer la navigation hors de la page, et l'événement unload est utilisé pour le nettoyage des ressources lors du déchargement de la page. Ces événements permettent aux développeurs de contrôler les processus de chargement et de déchargement des pages, contribuant ainsi à améliorer l'expérience utilisateur et les performances des pages.
Attendez, HTML a un cycle de vie ? est la plate-forme sans serveur de nouvelle génération pour l'hébergement Web, les tâches asynchrones et Redis :
Support multilingue
Déployez un nombre illimité de projets gratuitement
Une rentabilité imbattable
Expérience de développeur simplifiée
Évolutivité sans effort et hautes performances
Explorez-en davantage dans la documentation !
Suivez-nous sur X : @Attendez, HTML a un cycle de vie ?HQ
À lire sur notre blog
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
