HTML Native Lifecycle (Lebenszyklus) bezieht sich typischerweise auf die Ereignisse und Phasen, die ein Browser beim Laden und Verarbeiten einer Webseite durchläuft. Obwohl HTML selbst eine Auszeichnungssprache ist und über keine Lebenszyklus-Hooks wie JavaScript verfügt, werden HTML-Lebenszyklusereignisse tatsächlich durch JavaScript-Interaktionen mit dem DOM (Document Object Model) verwaltet.
Wenn der Browser eine Webseite lädt, empfängt er eine HTML-Datei vom Server und beginnt mit der Analyse. In dieser Phase erstellt der Browser einen DOM-Baum (Document Object Model) und konvertiert den HTML-Code in manipulierbare DOM-Objekte.
Genau genommen ist das HTML-Parsing eine wesentliche Phase im Seitenladeprozess, fällt jedoch nicht in die Kategorie der „Lebenszyklusereignisse“ im herkömmlichen Sinne, da es nicht direkt über JavaScript erfasst oder abgehört werden kann. Aus einer breiteren Perspektive betrachtet ist das HTML-Parsing jedoch ein unverzichtbarer Teil des gesamten Seitenlebenszyklus und damit eine entscheidende Komponente in Diskussionen über den HTML-Lebenszyklus.
Dieser Prozess ist browserintern, sodass Entwickler diese Phase nicht direkt abhören können. Sie können jedoch die Parsing-Geschwindigkeit verbessern, indem sie die HTML-Struktur optimieren und blockierende Ressourcen (z. B. JavaScript-Dateien) minimieren.
Während der Browser HTML analysiert, stößt er auf externe Ressourcen. Abhängig vom Ressourcentyp, der Lademethode (synchron oder asynchron) und der Priorität entscheidet der Browser, wie das Laden und Rendern der Seite fortgesetzt wird. Dieses Verhalten wirkt sich direkt auf die Rendering-Reihenfolge der Seite und die Ladezeit der für Benutzer sichtbaren Inhalte aus.
Verschiedene Ressourcentypen haben unterschiedliche Ladeverhalten, die sich auf das Parsen und Rendern von Seiten auswirken:
CSS-Laden: Wenn der Browser auf einen Wenn Sie das Tag hinzufügen, wird das Rendern der Seite angehalten, bis die CSS-Datei vollständig geladen und analysiert ist. CSS gilt als Ressource, die das Rendern blockiert, da Seitenlayout und Stile ohne die CSS-Datei nicht korrekt gerendert werden können.
JavaScript Loading: Wenn der Browser standardmäßig auf ein <script> -Tag wird die HTML-Analyse angehalten, bis die JavaScript-Datei geladen und ausgeführt wird. Dies wird als synchrones Laden bezeichnet. Synchron geladenes JavaScript blockiert die HTML-Analyse und wirkt sich auf das Timing der DOMContentLoaded- und Ladeereignisse aus.</script>
Insgesamt ist das Laden externer Ressourcen eng mit dem Seitenlebenszyklus verbunden, da das Laden externer Ressourcen Auswirkungen auf das Parsen, Rendern und das Auslösen kritischer Lebenszyklusereignisse wie DOMContentLoaded und Load hat. Je kürzer die Ladezeit der externen Ressource, desto schneller werden Lebenszyklusereignisse ausgelöst.
readyState und readystatechange sind zwei wichtige Browserattribute und -ereignisse, die zum Verfolgen des Status von Dokumenten und Netzwerkanfragen (z. B. AJAX-Anfragen) verwendet werden. Sie helfen Entwicklern, die verschiedenen Phasen des Webseitenladevorgangs zu verstehen und in diesen Phasen entsprechende Vorgänge auszuführen. Sie werden hauptsächlich im Zusammenhang mit dem Laden von Dokumenten und Netzwerkanfragen (z. B. XMLHttpRequest) verwendet.
Die Eigenschaft document.readyState stellt den aktuellen Status des Dokuments dar und verfügt über drei mögliche Werte, die verschiedenen Ladephasen des Dokuments entsprechen:
Mit document.readyState können Entwickler den Ladestatus des Dokuments überprüfen und entsprechende Aktionen basierend auf verschiedenen Status ausführen. Zum Beispiel:
if (document.readyState === 'complete') {
// The page is fully loaded; perform page operations
}
Das readystatechange-Ereignis wird ausgelöst, wenn sich der readyState des Dokuments ändert. Entwickler können das Ereignis „readystatechange“ abhören, um bestimmte Logik in verschiedenen Ladephasen auszuführen. Zum Beispiel:
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');
}
});
Unten finden Sie ein HTML-Beispiel, das die Verwendung von document.readyState und readystatechange zur Verfolgung verschiedener Dokumentladephasen veranschaulicht. Die Seite enthält grundlegende HTML-Elemente und zeigt entsprechende Inhalte oder Informationen in verschiedenen readyState-Stufen an:
<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>
Die Ausgabe des obigen Codes:
loading interactive complete
Das DOMContentLoaded-Ereignis ist ein Schlüsselereignis, das vom Browser während des Ladevorgangs des HTML-Dokuments ausgelöst wird. Dies bedeutet, dass alle Elemente im HTML-Dokument vollständig analysiert und der DOM-Baum erstellt wurde. Allerdings wurden externe Ressourcen wie Bilder, Stylesheets und Videos möglicherweise nicht vollständig geladen. Dies ist der Hauptunterschied zwischen DOMContentLoaded und dem Ladeereignis.
Das DOMContentLoaded-Ereignis tritt auf dem Dokumentobjekt auf und muss mit addEventListener erfasst werden:
document.addEventListener('DOMContentLoaded', () => {});
Das DOMContentLoaded-Ereignis wird ausgelöst, wenn der Browser das Parsen des HTML-Dokuments beendet und alle DOM-Knoten generiert. Es ist jedoch nicht erforderlich, dass externe Ressourcen (z. B. Bilder, Videos, Stylesheets oder Schriftartdateien) vollständig geladen werden.
Wenn die Seite beispielsweise ein großes Bild enthält, wird das DOMContentLoaded-Ereignis ausgelöst, bevor das Bild vollständig geladen ist. Zu diesem Zeitpunkt ist der DOM-Baum vollständig aufgebaut und Entwickler können die DOM-Elemente auf der Seite bearbeiten und darauf zugreifen. Hier ist ein Beispiel:
if (document.readyState === 'complete') {
// The page is fully loaded; perform page operations
}
Wenn auf der Seite synchrone JavaScript-Dateien vorhanden sind (d. h. Skripte ohne die Attribute „async“ oder „defer“), unterbricht der Browser die HTML-Analyse, wenn ein <script> Tag, warten Sie, bis das Skript ausgeführt wird, und fahren Sie dann mit der Analyse fort. Dadurch wird die Auslösung des DOMContentLoaded-Ereignisses verzögert.<br> </script>
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');
}
});
Ausgabereihenfolge:
Zu den Skripten, die das DOMContentLoaded-Ereignis nicht blockieren, gehören:
Das Ladeereignis wird für das Fensterobjekt ausgelöst, wenn die gesamte Seite, einschließlich Stilen, Bildern und anderen Ressourcen, vollständig geladen ist. Dieses Ereignis kann mit der onload-Eigenschaft erfasst werden.
Hier ist ein Beispiel, bei dem die Bildgröße korrekt angezeigt wird, da window.onload wartet, bis alle Bilder vollständig geladen sind:
<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>
Das beforeunload-Ereignis wird ausgelöst, kurz bevor die Seite entladen werden soll (z. B. wenn der Benutzer zu einer anderen Seite navigiert, die Registerkarte schließt oder die Seite aktualisiert). Dieses Ereignis ermöglicht es Entwicklern, den Benutzer aufzufordern, zu bestätigen, ob er die Seite wirklich verlassen möchte. Es wird normalerweise verwendet, um Benutzer daran zu erinnern, nicht gespeicherte Daten zu speichern oder sie vor einem möglichen Datenverlust zu warnen.
Browser ermöglichen die Anzeige einer kurzen Nachricht während dieses Ereignisses, in der Benutzer gefragt werden, ob sie die Seite wirklich verlassen möchten. Wenn Benutzer beispielsweise Inhalte in ein nicht gespeichertes Formular eingegeben haben, können Entwickler „beforeunload“ verwenden, um ein versehentliches Schließen oder Aktualisieren der Seite zu verhindern.
Moderne Browser zeigen keine benutzerdefinierten Eingabeaufforderungen an. Stattdessen zeigen sie eine standardisierte Warnmeldung an. Hier ist ein Beispiel:
loading interactive complete
Wenn Benutzer versuchen, die Seite zu verlassen, löst dieses Ereignis einen Bestätigungsdialog aus, in dem sie gefragt werden, ob sie die Seite verlassen oder auf der Seite bleiben möchten.
Aus Sicherheits- und Benutzerfreundlichkeitsgründen ignorieren Browser die meisten benutzerdefinierten Nachrichten und zeigen stattdessen einen generischen Dialog an. Eine übermäßige Verwendung von beforeunload kann die Benutzererfahrung beeinträchtigen. Daher sollte es nur verwendet werden, wenn dies unbedingt erforderlich ist, beispielsweise bei nicht gespeicherten Daten.
Das Entladeereignis wird ausgelöst, wenn die Seite vollständig ausgeladen ist (z. B. wenn die Seite geschlossen, aktualisiert oder von weg navigiert wird). Im Gegensatz zum Vorladung kann das Entladen von Benutzern nicht verhindern, dass die Seite die Seite verlässt. Es wird hauptsächlich zur Ausführung endgültiger Aufräumarbeiten verwendet, z.
Das Entladeereignis kann Benutzer im Gegensatz zum Vorfeld nicht auffordern. Stattdessen wird es für Operationen wie das Schließen von WebSocket -Verbindungen, das Speichern von Daten in lokalen Speicher oder die Löschen von Timern verwendet.Eine spezifische Anwendung des Entladenereignisses besteht darin, Analysedaten vor dem Entladen der Seite zu senden. Die Methode Navigator.SendBeacon (URL, Daten) kann verwendet werden, um Daten im Hintergrund zu senden, ohne die Seite zu verzögern. Zum Beispiel:
if (document.readyState === 'complete') {
// The page is fully loaded; perform page operations
}
Zusammenfassung
Multisprachiger Unterstützung
unbegrenzte Projekte kostenlos bereitstellen
unschlagbare Kosteneffizienz
strenge Entwicklererfahrung
mühelose Skalierbarkeit und hohe Leistung
Folgen Sie uns auf x: @leapcellhq
Lesen Sie in unserem Blog
Das obige ist der detaillierte Inhalt vonMoment, HTML hat einen Lebenszyklus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So sortieren Sie in Excel
So führen Sie ein Shell-Skript aus
keine solche Dateilösung
So zahlen Sie Geld auf Binance ein
Zusammenfassung häufig verwendeter Computer-Tastenkombinationen
So zeichnen Sie gepunktete Linien in PS
Werden Sols-Inschriftenmünzen auf Null zurückkehren?
Detaillierte Erläuterung des Java-Verschiebungsoperators
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
