Hier im Forum bekommt ihr bei euren fragen schnelle hilfe.Hier geht es rund um das Web SeitenProgrammieren.Alles rund ums Javascript,Html,Php,Css und Sql.Auf fast allen Fragen haben wir eine Antwort.
Der Soforthilfe-chat verspricht das ,was sein Name sagt. Hier sind Leute Online die sofort ihre hilfe anbieten.Seht in der OnlineListe nach und wenn einer Online ist werdet ihr auch antwort bekommen. Admine ,Moderatoren und Helfer sind unsere Spezialisten in Sachen Web Programierung
71 Unwetterwarnungen in Deutschland
Die Datenbank wurde zuletzt am 02.08.2020 17:34:28 aktualiesiert
71

Wie man das laden von Javascript aufschieben kann

JS

So verschieben Sie das Laden von Javascript

Wenn Sie Javascript wirklich verschieben, beginnt das Laden oder Parsen dieses Javascript erst, nachdem der Seiteninhalt geladen wurde (was bedeutet, dass es keinen Einfluss auf die Seitengeschwindigkeit oder den kritischen Renderpfad hat).

  1. Mit dem "onload" -Ereignis rufen wir ein externes Javascript auf
  2. Das externe Javascript wird nicht geladen, bevor der Seiteninhalt geladen wird
  3. Externes Javascript wird dann ausgeführt und die Seite beeinflusst
Webseite und Javascript-Datei

Erläuterung

Das Aufschieben von Javascript ist eines der Probleme im Web, die Sie dazu bringen können, sich die Haare auszureißen und nach einer Lösung zu suchen.

Viele Leute sagen "benutze einfach die Verzögerung" oder "benutze einfach die Asynchronität" oder andere sagen "setze einfach dein Javascript unten auf die Seite", aber keiner von ihnen löst das Problem, dass eine Webseite vollständig geladen und dann (und nur dann) geladen werden kann externe JS. Sie werden Sie auch nicht über die Warnung "Laden von Javascript verzögern" hinausbringen, die Sie vom Google-Tool für die Seitengeschwindigkeit erhalten. Diese Lösung wird.

Skript zum Aufrufen einer externen Javascript-Datei

Dieser Code sollte in Ihrem HTML-Code direkt vor dem -Tag (am unteren Rand Ihrer HTML-Datei) platziert werden. Ich habe den Namen der externen JS-Datei hervorgehoben.

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

Was macht das?

Dieser Code besagt, warten Sie, bis das gesamte Dokument geladen ist, und laden Sie dann die externe Datei "defer.js".

Spezifische Anweisungen

1. Kopieren Sie den obigen Code.

2. Fügen Sie Code in Ihren HTML-Code direkt vor dem -Tag ein (am unteren Rand Ihrer HTML-Datei).

3. Ändern Sie die Datei "defer.js" in den Namen Ihrer externen JS-Datei.

4. Stellen Sie sicher, dass der Pfad zu Ihrer Datei korrekt ist. Beispiel: Wenn Sie nur "defer.js" einfügen, muss sich die Datei "defer.js" im selben Ordner wie Ihre HTML-Datei befinden.

Wofür können Sie diesen Code verwenden (und wofür können Sie nicht)

Dieser Code lädt die von Ihnen angegebene externe Datei erst, nachdem das Dokument geladen wurde. Aus diesem Grund sollten Sie dort kein Javascript einstellen, das für das ordnungsgemäße Laden der Seite erforderlich ist. Sie sollten Ihr Javascript in zwei Gruppen aufteilen. Eine Gruppe ist das Javascript, das die Seite laden muss, und die zweite Gruppe ist das Javascript, das nach dem Laden der Seite Dinge ausführt (wie das Suchen nach Klickereignissen oder Ähnlichem). Das Javascript, das warten kann, bis die Seite geladen ist, sollte in die eine externe Datei gestellt werden, die Sie oben aufrufen.

Zum Beispiel benutze ich auf dieser Seite die obige Datei, um - Google Analytics, Viglink (wie ich Geld verdiene) und das Google Plus-Abzeichen, das in meiner Fußzeile (meinen sozialen Medien) angezeigt wird , aufzuschieben . Es gibt für mich keine Gründe, diese Dateien für das Laden der ersten Seite zu laden, da keine von ihnen erforderlich ist, um die über dem Falz liegenden Inhalte zu laden. Sie haben wahrscheinlich die gleiche Art von Sachen auf Ihren Seiten. Lassen Sie Ihre Benutzer warten, bis diese geladen sind, bevor Sie ihnen Ihre Inhalte zeigen?

Warum funktionieren die anderen Methoden nicht?

Die Methoden zum Inlinen, Platzieren von Skripten am unteren Rand, Verwenden von "defer" oder "async" erreichen nicht das Ziel, dass die Seite zuerst geladen und dann JS geladen wird, und funktionieren mit Sicherheit nicht universell und browserübergreifend.

Warum spielt es eine Rolle?

Dies ist wichtig, weil Google die Seitengeschwindigkeit als Ranking-Faktor einschätzt und die Nutzer schnell Seiten laden möchten. Es ist auch sehr wichtig für Ihr Handy-SEO . Google misst die Geschwindigkeit Ihrer Seite von dem Zeitpunkt an, zu dem sie aufgerufen wurde, als die Seite zum ersten Mal geladen wurde . Dies bedeutet, dass Sie so schnell wie möglich zum Ereignis zum Laden der Seite gelangen möchten. Anhand dieser ersten Ladezeit für die Seite beurteilt Google Ihre Webseite (und vergessen wir nicht, dass Ihre Nutzer darauf warten, dass sie geladen wird). Google wirbt aktiv dafür und empfiehlt, Prioritäten vor dem Falz-Inhalt zu setzen , um Ressourcen (js, css, Bilder usw.) aus dem kritischen Rendering-Pfad zu entfernenist die Mühe wert. Wenn es Ihre Nutzer glücklich macht und Google glücklich macht, sollten Sie es wahrscheinlich tun.

Kernpunkt

Die überwältigende Priorität sollte darauf gelegt werden, den Inhalt so schnell wie möglich an den Benutzer zu liefern. Wir haben das nicht so gemacht, wie wir mit unserem Javascript umgegangen sind. Ein Benutzer sollte nicht warten müssen, um seinen Inhalt zu sehen, da ein Skript wahrscheinlich etwas unter dem Falz-Inhalt tut. Egal wie cool Ihre Fußzeile ist, es gibt wirklich keinen Grund für einen Benutzer, der möglicherweise nie zu Ihrer Fußzeile gescrollt hat, das Javascript zu laden, das Ihre Fußzeile cool macht.

Werkzeuge

Verwenden Sie das JavaScript-Verwendungstool, um zu überprüfen, wie JavaScript auf einer Seite verwendet wird.