14 Methoden zum Aufschieben oder Planen von JavaScript

Wie wählt man die richtige Aufschiebe-Methode?

Nicht alle Skripte sind gleich und jedes Skript hat seine eigene Funktionalität. Einige Skripte sind wichtig, um sie früh im Rendering-Prozess zu haben, andere nicht.

Ich teile JavaScripts gerne in 4 Gruppen ein, basierend auf ihrer Wichtigkeit.

1. Render-kritisch. Dies sind die Skripte, die das Aussehen einer Webseite verändern. Wenn sie nicht laden, sieht die Seite nicht vollständig aus. Diese Skripte sollten um jeden Preis vermieden werden. Wenn Sie sie aus irgendeinem Grund nicht vermeiden können, sollten sie nicht aufgeschoben werden. Zum Beispiel ein Top-Slider oder ein A/B-Testing-Skript.
2. Kritisch. Diese Skripte verändern das Aussehen einer Webseite nicht (zu sehr), aber die Seite funktioniert ohne sie nicht gut. Diese Skripte sollten aufgeschoben (deferred) oder asynchron (async) geladen werden. Zum Beispiel Ihre Menü-Skripte.
3. Wichtig. Dies sind Skripte, die Sie laden möchten, weil sie für Sie oder den Besucher wertvoll sind. Ich neige dazu, diese Skripte zu laden, nachdem das Load Event ausgelöst wurde. Zum Beispiel Analytics oder ein 'Zurück nach oben'-Button.
4. Nice to have. Dies sind Skripte, ohne die Sieleben können, wenn es unbedingt sein muss. Ich lade diese Skripte mit der niedrigsten Priorität und führe sie nur aus, wenn der Browser im Leerlauf ist. Zum Beispiel ein Chat-Widget oder ein Facebook-Button.

Methode 1: Verwenden Sie das defer-Attribut

Skripte mit dem defer-Attribut werden parallel heruntergeladen und zur defer-JavaScript-Warteschlange hinzugefügt. Kurz bevor der Browser das DOMContentLoaded-Event auslöst, werden alle Skripte in dieser Warteschlange in der Reihenfolge ausgeführt, in der sie im Dokument erscheinen.

<script defer src='javascript.js'></script>

Der 'Defer-Trick' behebt normalerweise viele Probleme, insbesondere die Paint-Metriken. Leider gibt es keine Garantie, es hängt von der Qualität der Skripte ab. Aufgeschobene Skripte werden ausgeführt, sobald alle Skripte geladen sind und das HTML geparst ist (DOMContentLoaded). Das LCP-Element (meistens ein großes Bild) ist bis dahin möglicherweise noch nicht geladen und die aufgeschobenen Skripte verursachen immer noch eine Verzögerung im LCP.

Wann zu verwenden:

Verwenden Sie aufgeschobene Skripte für kritische Skripte, die so schnell wie möglich benötigt werden.

Vorteile:

1. Aufgeschobene Skripte werden parallel heruntergeladen
2. Das DOM steht zum Zeitpunkt der Ausführung zur Verfügung

Nachteile:

1. Aufgeschobene Skripte können Ihre LCP-Metriken verzögern 
2. Aufgeschobene Skripte blockieren den Hauptthread, sobald sie ausgeführt werden
3. Es ist möglicherweise nicht sicher, Skripte aufzuschieben, wenn Inline- oder Async-Skripte von ihnen abhängen

Methode 2: Verwenden Sie das async-Attribut

Skripte mit dem async-Attribut werden parallel heruntergeladen und sofort ausgeführt, nachdem sie mit dem Herunterladen fertig sind.

<script async src='javascript.js'></script>

Async-Skripte werden wenig dazu beitragen, Ihre Pagespeed-Probleme zu beheben. Es ist großartig, dass sie parallel heruntergeladen werden, aber das war's auch schon. Sobald sie heruntergeladen sind, blockieren sie den Hauptthread, während sie ausgeführt werden.

Wann zu verwenden:

Verwenden Sie Async-Skripte für kritische Skripte, die so schnell wie möglich benötigt werden und in sich geschlossen sind (nicht von anderen Skripten abhängen).

Vorteile:

1. Async-Skripte werden parallel heruntergeladen.
2. Async-Skripte werden so schnell wie möglich ausgeführt.

Nachteile:

1. DOMContentLoaded kann sowohl vor als auch nach async passieren.
2. Die Ausführungsreihenfolge der Skripte ist im Voraus unbekannt.
3. Sie können keine Async-Skripte verwenden, die von anderen Async- oder aufgeschobenen Skripten abhängen

Methode 3: Verwenden Sie Module

Modulare Skripte werden standardmäßig aufgeschoben, es sei denn, sie haben das async-Attribut. In diesem Fall werden sie wie Async-Skripte behandelt

<script module src='javascript.js'></script>

Module sind eine neue Denkweise über JavaScript und beheben einige Designfehler. Abgesehen davon wird die Verwendung von Skript-Modulen Ihre Website nicht beschleunigen. 

Wann zu verwenden:

Wenn Ihre Anwendung modular aufgebaut ist, ist es sinnvoll, auch JavaScript-Module zu verwenden.

Vorteile:

1. Module werden standardmäßig aufgeschoben
2. Module sind einfacher zu warten und funktionieren hervorragend mit modularem Webdesign
3. Module ermöglichen einfaches Code-Splitting mit dynamischen Importen, bei denen Sie nur die Module importieren, die Sie zu einem bestimmten Zeitpunkt benötigen.

Nachteile:

1. Module selbst verbessern die Core Web Vitals nicht
2. Das Importieren von Modulen Just-in-Time oder On-the-Fly kann langsam sein und FID und INP verschlechtern 

Methode 4: Platzieren Sie Skripte am Ende der Seite

Footer-Skripte werden zu einem späteren Zeitpunkt zum Herunterladen in die Warteschlange gestellt. Dies priorisiert andere Ressourcen, die sich im Dokument über dem Skript-Tag befinden.

<html>
   <head></head>
   <body>
      [Ihr Seiteninhalt hier]
      <script defer src='javascript.js'></script>
   </body>
</html>

Das Platzieren Ihrer Skripte am Ende der Seite ist eine interessante Technik. Dies plant andere Ressourcen (wie Bilder) vor Ihren Skripten ein. Dies erhöht die Chance, dass sie für den Browser verfügbar sind und auf den Bildschirm gemalt werden, bevor die JavaScript-Dateien heruntergeladen sind und der Hauptthread durch die Skriptausführung blockiert wird. Trotzdem ... keine Garantie.

Wann zu verwenden:

Wenn Ihre Skripte bereits recht gut funktionieren, Sie aber andere Ressourcen wie Bilder und Webfonts leicht priorisieren möchten.

Vorteile:

1. Das Platzieren von Skripten am Ende der Seite erfordert nicht viel Wissen.
2. Wenn es richtig gemacht wird, besteht kein Risiko, dass dies Ihre Seite kaputt macht

Nachteile:

1. Kritische Skripte können später heruntergeladen und ausgeführt werden
2. Es behebt keine zugrunde liegenden JavaScript-Probleme

Methode 5: Skripte injizieren

Injizierte Skripte werden wie Async-Skripte behandelt. Sie werden parallel heruntergeladen und sofort nach dem Herunterladen ausgeführt.

<script>
    const loadScript = (scriptSource) => {
        const script = document.createElement('script');
        script.src = scriptSource;
        document.head.appendChild(script);
    }
    
    // rufen Sie die loadscript-Funktion auf, die 'javascript.js' injiziert
    loadScript('javascript.js');
</script>

Aus Core Web Vitals-Perspektive ist diese Technik genau dasselbe wie die Verwendung von <script async>.

Wann zu verwenden:

Diese Methode wird oft von Drittanbieter-Skripten verwendet, die so früh wie möglich auslösen. Der Funktionsaufruf macht es einfach, Code einzukapseln und zu komprimieren.

Vorteile:

1. In sich geschlossener Code, der ein Async-Skript injiziert.

Nachteile:

1. DOMContentLoaded kann sowohl vor als auch nach dem Laden des Skripts passieren.
   
2. Die Ausführungsreihenfolge der Skripte ist im Voraus unbekannt.
3. Sie können dies nicht für Skripte verwenden, die von anderen Async- oder aufgeschobenen Skripten abhängen

Methode 6: Skripte zu einem späteren Zeitpunkt injizieren

Nice-to-have-Skripte sollten meiner Meinung nach niemals aufgeschoben geladen werden. Sie sollten zum günstigsten Zeitpunkt injiziert werden. Im folgenden Beispiel wird das Skript ausgeführt, nachdem der Browser das 'load'-Event gesendet hat.

<script>
window.addEventListener('load', function () {
  // siehe Methode 5 für die loadscript-Funktion
  loadScript('javascript.js');
});
</script>

Dies ist die erste Technik, die den Largest Contentful Paint zuverlässig verbessert. Alle wichtigen Ressourcen, einschließlich Bilder, werden heruntergeladen, wenn der Browser das 'load event' auslöst. Dies könnte alle möglichen Probleme mit sich bringen, da es lange dauern kann, bis das Load Event aufgerufen wird.

Wann zu verwenden:

Für Nice-to-have-Skripte, die keinen Grund haben, die Paint-Metriken zu beeinflussen.

Vorteile:

1. Konkurriert nicht um kritische Ressourcen, da das Skript injiziert wird, sobald die Seite und ihre Ressourcen geladen sind

Nachteile:

1. Wenn Ihre Seite in Bezug auf Core Web Vitals schlecht gestaltet ist, kann es lange dauern, bis die Seite das 'load'-Event sendet
2. Sie müssen vorsichtig sein, dies nicht auf kritische Skripte (wie Lazy Loading, Menü usw.) anzuwenden

Methode 7: Ändern Sie den Skripttyp (und ändern Sie ihn dann zurück)

Wenn irgendwo auf der Seite ein Script-Tag gefunden wird, das 1. ein Typ-Attribut hat und 2. das Typ-Attribut nicht "text/javascript" ist, wird das Skript nicht von einem Browser heruntergeladen und ausgeführt. Viele JavaScript-Loader (wie CloudFlares RocketLoader) verlassen sich auf dieses Prinzip. Die Idee ist ziemlich einfach und elegant.

Zuerst werden alle Skripte so umgeschrieben:

<script type="some-cool-script-type" src="javascript.js"></script>

Dann werden diese Skripte zu einem bestimmten Zeitpunkt während des Ladevorgangs wieder in 'normale JavaScripts' konvertiert.

Wann zu verwenden:

Dies ist keine Methode, die ich empfehlen würde. Das Beheben von JavaScript-Auswirkungen erfordert viel mehr, als nur jedes Skript etwas weiter in die Warteschlange zu schieben. Auf der anderen Seite, wenn Sie wenig Kontrolle über die auf der Seite ausgeführten Skripte haben oder unzureichende JavaScript-Kenntnisse haben, ist dies vielleicht Ihre beste Wette.

Vorteile:

1. Es ist einfach, aktivieren Sie einfach Rocket Loader oder ein anderes Plugin und alle Ihre Skripte werden jetzt zu einem etwas späteren Zeitpunkt ausgeführt.
2. ES wird wahrscheinlich Ihre Paint-Metriken beheben, vorausgesetzt, Sie haben kein JS-basiertes Lazy Loading verwendet.
3. Es funktioniert für Inline- und externe Skripte.

Nachteile:

1. Sie haben keine feinkörnige Kontrolle darüber, wann die Skripte ausgeführt werden
2. Schlecht geschriebenes Skript könnte kaputt gehen
3. Es verwendet JavaScript, um JavaScript zu beheben
4. Es tut nichts, um lang laufende Skripte zu beheben

Methode 8: Verwenden Sie den Intersection Observer

Mit dem Intersection Observer können Sie eine Funktion ausführen (die in diesem Fall ein externes JavaScript lädt), wenn ein Element in den sichtbaren Viewport scrollt.

<script>
const handleIntersection = (entries, observer) => {
    if (entries?.[0].isIntersecting) {
        // laden Sie Ihr Skript oder führen Sie eine andere 
           Funktion aus, wie das Auslösen eines lazy loaded Elements
        loadScript('javascript.js');

        // entfernen Sie den Observer
        observer.unobserve(entries?.[0].target);
    }
};
const Observer = new window.IntersectionObserver()
Observer.observe(document.querySelector('footer'));
</script>

Dies ist mit Abstand die effektivste Methode zum Aufschieben von JavaScript, die es gibt. Laden Sie nur die Skripte, die Sie benötigen, kurz bevor Sie sie benötigen. Leider ist das echte Leben fast nie so sauber und nicht viele Skripte können an ein Element gebunden werden, das in den Blick scrollt.

Wann zu verwenden:

Verwenden Sie diese Technik so oft wie möglich! Wann immer ein Skript nur mit einer Off-Screen-Komponente interagiert (wie einer Karte, einem Slider, einem Formular), ist dies der beste Weg, dieses Skript zu injizieren.

Vorteile:

1. Stört Core Web Vitals LCP und FCP nicht
2. Injiziert niemals Skripte, die nicht verwendet werden. Dies verbessert FID und INP

Nachteile:

1. Sollte nicht mit Komponenten verwendet werden, die sich im sichtbaren Viewport befinden könnten
2. Ist schwieriger zu warten als einfaches <script src="...">
3. Könnte eine Layout-Verschiebung einführen

Methode 9: Verwenden Sie readystatechange

document.readystate kann als Alternative zum 'DOMContentloaded' und 'load' Event verwendet werden. Der 'interactive' ReadyState ist normalerweise ein guter Ort, um kritische Skripte aufzurufen, die das DOM ändern oder Event-Handler hinzufügen müssen. 
Der 'complete' ReadyState ist ein guter Ort, um Skripte aufzurufen, die weniger kritisch sind.

document.addEventListener('readystatechange', (event) => {
  if (event.target.readyState === 'interactive') {
    initLoader();
  } else if (event.target.readyState === 'complete') {
    initApp();
  }
});

Methode 10: Verwenden Sie setTimeout ohne Timeout

setTimeout ist eine verpönte, aber stark unterschätzte Methode in der Pagespeed-Community. setTimeout hat einen schlechten Ruf bekommen, weil es oft missbraucht wird.  Viele Entwickler glauben, dass setTimeout nur verwendet werden kann, um die Skriptausführung um die eingestellte Anzahl von Millisekunden zu verzögern. Während dies wahr ist, tut setTimeout eigentlich etwas viel Interessanteres. Es erstellt eine neue Aufgabe am Ende der Browser-Event-Loop. Dieses Verhalten kann verwendet werden, um Ihre Aufgaben effektiv zu planen. Es kann auch verwendet werden, um lange Aufgaben in separate kleinere Aufgaben aufzuteilen

<script>
   setTimeout(() => {
       // laden Sie ein Skript oder führen Sie eine andere Funktion aus
       console.log('- Ich werde von einem 0ms timeOut() aufgerufen')
    }, 0);

   console.log('- Ich war der Letzte in der Schlange, wurde aber als Erster ausgeführt')

   /*
      Output:
      - Ich war der Letzte in der Schlange, wurde aber als Erster ausgeführt
      - Ich werde von einem 0ms timeOut() aufgerufen
   */
</script>

Wann zu verwenden:

setTimeout erstellt eine neue Aufgabe in der Browser-Event-Loop. Verwenden Sie dies, wenn Ihr Hauptthread durch viele Funktionsaufrufe blockiert wird, die sequenziell laufen.

Vorteile:

1. Kann lang laufenden Code in kleinere Stücke aufteilen.

Nachteile:

1. setTimeout ist eine ziemlich grobe Methode und bietet keine Priorisierung für wichtige Skripte.
2. Fügt den auszuführenden Code am Ende der Schleife hinzu

Methode 11: Verwenden Sie setTimeout mit einem Timeout

Die Dinge werden noch interessanter, wenn wir setTimeout mit einem Timeout von mehr als 0ms aufrufen

<script>
   setTimeout(() => {
       // laden Sie ein Skript oder führen Sie eine andere Funktion aus
       console.log('- Ich werde von einem 10ms timeOut() aufgerufen')
    }, 10);

   setTimeout(() => {
       // laden Sie ein Skript oder führen Sie eine andere Funktion aus
       console.log('- Ich werde von einem 0ms timeOut() aufgerufen')
    }, 0);

   console.log('- Ich war der Letzte in der Schlange, wurde aber als Erster ausgeführt')

   /*
      Output:
      - Ich war der Letzte in der Schlange, wurde aber als Erster ausgeführt
      - Ich werde von einem 0ms timeOut() aufgerufen
      - Ich werde von einem 10ms timeOut() aufgerufen
   */
</script>

Wann zu verwenden:

Wenn Sie eine einfache Methode benötigen, um ein Skript nach dem anderen zu planen, wird ein kleiner Timeout den Trick tun

Vorteile:

1. Wird in allen Browsern unterstützt

Nachteile:

1. Bietet keine fortgeschrittene Planung

Methode 12 Verwenden Sie ein Promise, um einen Microtask festzulegen

Das Erstellen eines Microtasks ist ebenfalls eine interessante Möglichkeit, JavaScript zu planen. Microtasks werden eingeplant, um sofort nach Abschluss der aktuellen Ausführungsschleife ausgeführt zu werden.

<script>
   const myPromise = new Promise((resolve, reject) => {
      resolve();
   }).then(
      () => {       
         console.log('- Ich wurde nach einem Promise eingeplant')
         }
   );
   
   console.log('- Ich war der Letzte in der Schlange, wurde aber als Erster ausgeführt')

   /*
      Output:
      - Ich war der Letzte in der Schlange, wurde aber als Erster ausgeführt
      - Ich wurde nach einem Promise eingeplant
   */
</script>

Wann zu verwenden:

Wenn eine Aufgabe unmittelbar nach einer anderen Aufgabe eingeplant werden muss. 

Vorteile:

1. Der Microtask wird sofort eingeplant, nachdem die Aufgabe beendet ist.
2. Ein Microtask kann verwendet werden, um weniger wichtige Stücke von JavaScript-Code im selben Event zu verzögern. 

Nachteile:

1. Teilt die Hauptthread-Eingabe nicht in einen kleineren Teil auf. Der Browser hat keine Chance, auf Benutzereingaben zu reagieren.
2. Sie werden wahrscheinlich nie Microtasks verwenden müssen, um die Core Web Vitals zu verbessern, es sei denn, Sie wissen bereits genau, was Sie tun.

Methode 13 Verwenden Sie einen Microtask

Dasselbe Ergebnis kann durch Verwendung von queueMicrotask() erreicht werden. Der Vorteil der Verwendung von queueMicrotask() gegenüber einem Promise ist, dass es etwas schneller ist und Sie Ihre Promises nicht handhaben müssen.

<script>
   queueMicrotask(() => {
      console.log('- Ich bin ein Microtask')
   })
     
   console.log('- Ich war der Letzte in der Schlange, wurde aber als Erster ausgeführt')

   /*
      Output:
      - Ich war der Letzte in der Schlange, wurde aber als Erster ausgeführt
      - Ich bin ein Microtask
   */
</script>

Methode 14: Verwenden Sie requestIdleCallback

Die window.requestIdleCallback() Methode stellt eine Funktion in die Warteschlange, die während der Leerlaufzeiten eines Browsers aufgerufen wird. Dies ermöglicht es Entwicklern, Hintergrund- und Arbeit mit niedriger Priorität in der Main Event Loop auszuführen, ohne latenzkritische Ereignisse wie Animationen und Eingabereaktionen zu beeinträchtigen. Funktionen werden im Allgemeinen in First-in-First-out-Reihenfolge aufgerufen; jedoch können Callbacks, die einen Timeout angegeben haben, bei Bedarf außer der Reihe aufgerufen werden, um sie auszuführen, bevor der Timeout abläuft.

<script>
requestIdleCallback(() => {
    const script = document.createElement('script');
    script.src = 'javascript.js';
    document.head.appendChild(script);
});
</script>

Wann zu verwenden:

Verwenden Sie dies für Skripte, die Nice to have sind oder um nicht kritische Aufgaben nach Benutzereingaben zu behandeln

Vorteile:

1. JavaScript ausführen mit minimalen Auswirkungen für den Benutzer
2. Wird höchstwahrscheinlich FID und INP verbessern

Nachteile:

1. Wird in den meisten Browsern unterstützt, aber nicht in allen. Es gibt Polyfills, die auf setTimeout() zurückgreifen;
2. Keine Garantie, dass der Code jemals ausgeführt wird 

Methode 15: Verwenden Sie postTask

Die Methode ermöglicht es Benutzern, optional eine minimale Verzögerung anzugeben, bevor die Aufgabe ausgeführt wird, eine Priorität für die Aufgabe und ein Signal, das verwendet werden kann, um die Aufgabenpriorität zu ändern und/oder die Aufgabe abzubrechen. Sie gibt ein Promise zurück, das mit dem Ergebnis der Aufgaben-Callback-Funktion aufgelöst wird, oder abgelehnt wird mit dem Abbruchgrund oder einem Fehler, der in der Aufgabe ausgelöst wurde.

<script>
scheduler.postTask(() => {
    const script = document.createElement('script');
    script.src = 'javascript.js';
    document.head.appendChild(script);
}, { priority: 'background' });
</script>

Wann zu verwenden:

postTask ist die perfekte API, um Skripte zu planen. Leider ist die Browserunterstützung derzeit schlecht, sodass Sie sie nicht verwenden sollten.

Vorteile:

1. Vollständige Kontrolle über die JavaScript-Ausführungsplanung!

Nachteile:

1. Nicht in einigen wichtigen Browsern unterstützt.