Optimierung externer Bibliotheken mit dem Defer-Attribut: Steigerung der Seitengeschwindigkeit

Beim Erstellen einer Website verlassen sich Entwickler häufig auf externe Bibliotheken, um die Funktionalität zu verbessern. Obwohl diese Bibliotheken unerlässlich sind, können sie sich auf die Leistung auswirken, da jedes externe Skript eine zusätzliche HTTP-Anfrage erfordert und seine Analyse, Auswertung und Ausführung die Darstellung des Hauptinhalts auf der Seite blockieren kann. Um zu verhindern, dass diese Skripte den Rendering-Prozess blockieren, können Entwickler beim Verknüpfen externer Skripte die Attribute „async“ oder „defer“ verwenden.

Die Rolle des Aufschubs
Das Defer-Attribut stellt sicher, dass ein Skript erst ausgeführt wird, wenn die HTML-Analyse abgeschlossen ist. Dies trägt dazu bei, das anfängliche Rendern der Seite zu beschleunigen. Bei der Verwendung verzögerter externer Bibliotheken kann es jedoch vorkommen, dass bestimmte Funktionen (z. B. das Initialisieren von Schiebereglern, Karussells oder Animationen) nicht wie erwartet ausgeführt werden. Dies liegt daran, dass der Code im verzögerten Skript erst ausgeführt wird, nachdem der HTML-Code vollständig analysiert wurde, aber manchmal sind die erforderlichen externen Bibliotheken möglicherweise nicht rechtzeitig verfügbar.

Grundlegendes zu DOMContentLoaded und Ladeereignissen
Um sicherzustellen, dass Ihr benutzerdefinierter Code, der auf externen Bibliotheken basiert, ordnungsgemäß ausgeführt wird, müssen Sie den Zeitpunkt der Codeausführung sorgfältig verwalten. Zwei JavaScript-Ereignisse sind besonders nützlich beim Umgang mit verzögerten Skripten

DOMContentLoaded: Dieses Ereignis wird ausgelöst, wenn das ursprüngliche HTML-Dokument vollständig geladen und analysiert wurde, ohne auf das Laden von Stylesheets, Bildern oder anderen externen Ressourcen zu warten. Dies ist nützlich, wenn Ihr Code nur davon abhängt, dass die DOM-Struktur bereit ist.

document.addEventListener('DOMContentLoaded', function() { 
// Initialize your script once the DOM is fully parsed 

console.log("DOM is ready, but external resources might still be loading."); 
});

load: Das Ladeereignis wird ausgelöst, wenn die gesamte Seite, einschließlich aller abhängigen Ressourcen wie Stylesheets, Bilder und externen Skripte, vollständig geladen wurde. Dieses Ereignis stellt sicher, dass alle erforderlichen externen Ressourcen verfügbar sind, bevor Ihr Code ausgeführt wird.

window.addEventListener('load', function() { 
// Execute code when the entire page and resources are loaded 

console.log("All resources including external scripts are fully loaded."); 
});

<script defer src="https://example.com"></script>
<script defer src="https://example2.com"></script>
<script>
    // Wait for the entire page, including scripts, to load
    window.addEventListener('load', function() {
        // Initialize example2 library with predefined configuration after all resources are fully loaded
        example2(somePredefinedConfig).functionCall();
    });
</script>

Das obige ist der detaillierte Inhalt vonOptimierung externer Bibliotheken mit dem Defer-Attribut: Steigerung der Seitengeschwindigkeit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!