Informationen zum verzögerten Laden von JavaScript_Javascript-Tipps

JavaScript Lazy Loading ist eines dieser Probleme im Web, die Sie bei der Suche nach einer Lösung in den Wahnsinn treiben können.

Viele Leute sagen „dann verwenden Sie defer“ oder „async“, und einige sagen sogar „dann fügen Sie Ihren Javascript-Code am Ende des Seitencodes ein“.

Keine der oben genannten Methoden kann das Problem des Ladens externer JS nach dem vollständigen Laden der Webseite lösen. Die oben beschriebene Methode führt gelegentlich auch dazu, dass Sie vom Google-Tool zum Testen der Seitengeschwindigkeit Warnungen erhalten, dass Javascript verzögert geladen wird. Die Lösung hier ist also die empfohlene Lösung auf der Google-Hilfeseite.

So laden Sie JavaScript verzögert

Das Folgende ist der von Google empfohlene Code. Dieser Code sollte vor dem -Tag platziert werden (am Ende der HTML-Datei). Außerdem habe ich den Namen der externen JS-Datei hervorgehoben.

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

Was wird hier gemacht?
Dieser Code bedeutet, dass mit dem Laden der externen Datei „defer.js“ gewartet wird, bis das gesamte Dokument geladen ist.

Spezifische Anweisungen

1. Kopieren Sie den obigen Code

2. Fügen Sie den Code vor dem -Tag ein (am Ende der HTML-Datei)

3. Ändern Sie „defer.js“ in Ihren externen JS-Dateinamen

4. Stellen Sie sicher, dass Ihr Dateipfad korrekt ist. Beispiel: Wenn Sie nur „defer.js“ eingeben, muss sich die Datei „defer.js“ im selben Ordner wie die HTML-Datei befinden.

Wo kann dieser Code verwendet werden (und wo nicht)

Dieser Code lädt die angegebene externe JS-Datei erst, wenn das Dokument geladen ist. Daher sollte hier kein JavaScript-Code platziert werden, der vom normalen Laden der Seite abhängt. Stattdessen sollte JavaScript-Code in zwei Gruppen unterteilt werden. Eine Gruppe ist der Javascript-Code, der sofort geladen wird, weil die Seite ihn benötigt, und die andere Gruppe ist der Javascript-Code, der nach dem Laden der Seite ausgeführt wird (z. B. das Hinzufügen eines Klickereignisses oder andere Dinge). Der JavaScript-Code, der warten muss, bis die Seite geladen ist, bevor er ausgeführt wird, sollte in einer externen Datei abgelegt und dann importiert werden.

Beispielsweise verwende ich auf dieser Seite die oben genannten Dateien zum Lazy Loading – Google Analytics, Viglink (wie ich Geld verdiene) und das Google-Logo, das unten angezeigt wird (meine sozialen Medien). Für mich gibt es keinen Grund, diese Dateien beim ersten Laden der Seite zu laden, da es nicht erforderlich ist, die oben genannten irrelevanten Inhalte in der Anfangsphase zu laden. Möglicherweise haben Sie eine Datei der gleichen Art auf Ihrer Seite. Möchten Sie dann, dass Benutzer auf das Laden dieser Dateien warten, bevor sie den Inhalt der Webseite sehen?

Warum nicht andere Methoden nutzen?

Durch das direkte Einfügen von Code, das Platzieren von Skripten unten und die Verwendung von „defer“ oder „async“ kann der Zweck, zuerst die Seite und dann das JS zu laden, nicht erreicht werden, und sie werden sicherlich nicht in allen Browsern konsistent funktionieren.

Warum ist es wichtig?

Seine Bedeutung liegt darin begründet, dass Google die Seitengeschwindigkeit als einen der Ranking-Faktoren nutzt und Nutzer auch möchten, dass Seiten schnell geladen werden. Es ist auch für die mobile Suchmaschinenoptimierung sehr wichtig. Google misst die Seitengeschwindigkeit anhand der Zeit, die zum ersten Laden der Seite benötigt wird. Das bedeutet, dass Sie das Ladeereignis der Seite so schnell wie möglich erhalten müssen. Anhand der anfänglichen Seitenladezeit bewertet Google die Qualität Ihrer Webseiten (und vergessen Sie nicht, dass Nutzer darauf warten, dass die Seite geladen wird). Google fördert und empfiehlt aktiv, die oben genannten irrelevanten Inhalte nach Wichtigkeit zu ordnen und alle Ressourcen (JS, CSS, Bilder usw.) aus dem kritischen Rendering-Pfad herauszuhalten, und die Mühe lohnt sich. Wenn es den Nutzern gefällt und Google glücklich macht, sollten Sie es tun.

Anwendungsbeispiel

Ich habe eine Seite erstellt, auf der Sie diesen Code in Verwendung sehen können.

Beispieldateien zum Testen

Okay, zur Veranschaulichung habe ich ein paar Beispielseiten für Sie zum Testen erstellt. Jede Seite macht das Gleiche. Dies ist eine gewöhnliche HTML-Seite, die ein Javascript-Skript enthält, das 2 Sekunden wartet und dann „Hallo Welt“ ausgibt. Sie können diese Dateien testen und werden feststellen, dass es nur eine Methode gibt und deren Ladezeit die Wartezeit von 2 Sekunden nicht berücksichtigt.

Seite zum direkten Einfügen des Skripts – Hier klicken

Seiten mit externen Skripten, die „defer“ verwenden – Klicken Sie hier
Seiten, die den oben genannten Empfehlungscode verwenden – Klicken Sie hier

Wichtige Punkte

Die oberste Priorität sollte darin bestehen, den Benutzern Inhalte so schnell wie möglich bereitzustellen. Und wir haben nie darüber nachgedacht, wie wir mit unserem Javascript-Code umgehen sollen. Aber Benutzer sollten nicht gezwungen werden, auf den Inhalt eines unbedeutenden Skripts zu warten. Egal wie cool Ihre Fußzeile ist, es gibt keinen Grund für einen Benutzer, der vielleicht nie zur Fußzeile scrollt, die JavaScript-Dateien zu laden, die sie cool machen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.