Show Menu
THEMEN×

Asynchrone Bereitstellung

Die Leistung und nicht blockierende Bereitstellung der für unsere Produkte erforderlichen JavaScript-Bibliotheken wird für Adobe Experience Cloud-Benutzer immer wichtiger. Tools wie Google PageSpeed empfehlen, dass die Benutzer die Art und Weise der Bereitstellung der Adobe-Bibliotheken auf ihrer Site ändern. In diesem Artikel wird erläutert, wie Sie die Adobe-JavaScript-Bibliotheken asynchron verwenden.

Synchron und asynchron im Vergleich

Synchrone Bereitstellung

Häufig werden Bibliotheken synchron im <head> -Tag einer Seite geladen. Beispiel:
<script src="example.js"></script>

Standardmäßig analysiert der Browser das Dokument, erreicht diese Zeile und ruft dann die JavaScript-Datei vom Server ab. Der Browser wartet, bis die Datei zurückgegeben wird, analysiert sie und führt sie aus. Schließlich wird die Analyse des übrigen HTML-Dokuments fortgesetzt.
Wenn der Parser vor dem Rendern sichtbarer Inhalte zum <script> -Tag gelangt, wird die Inhaltsanzeige verzögert. Wenn die geladene JavaScript-Datei nicht absolut erforderlich ist, um Ihren Benutzern Inhalte anzuzeigen, müssen Ihre Besucher unnötig auf Inhalte warten. Je größer die Bibliothek, desto länger die Verzögerung. Deshalb kennzeichnen Benchmark-Tools für Webperformance, wie z. B. Google PageSpeed oder Lighthouse, häufig synchron geladene Skripte.
Tag Management-Bibliotheken können schnell unübersichtlich werden, wenn viele Tags zu verwalten sind.

Asynchrone Bereitstellung

Sie können jede Bibliothek asynchron laden, indem Sie dem <script> -Tag ein async -Attribut hinzufügen. Beispiel:
<script src="example.js" async></script>

Dies zeigt dem Browser an, dass er beim Analysieren dieses Skript-Tags mit dem Laden der JavaScript-Datei beginnen muss. Statt darauf zu warten, dass die Bibliothek geladen und ausgeführt wird, sollte der Browser den Rest des Dokuments analysieren und rendern.

Überlegungen zur asynchronen Bereitstellung

Wie oben beschrieben, hält der Browser bei synchronen Bereitstellungen Analyse und Rendern der Seite an, während die Launch-Bibliothek geladen und ausgeführt wird. In asynchronen Bereitstellungen hingegen fährt der Browser mit dem Analysieren und Rendern der Seite fort, während die Bibliothek geladen wird. Diese Varianz zwischen dem Zeitpunkt, zu dem die Launch-Bibliothek fertig geladen wurde, und dem Analysieren und Rendern der Seite muss berücksichtigt werden.
Da die Launch-Bibliothek vor oder nach Analyse des Seitenendes vollständig geladen und ausgeführt werden kann, sollten Sie _satellite.pageBottom() nicht mehr aus Ihrem Seitencode aufrufen ( _satellite ist erst nach dem Laden der Bibliothek verfügbar). Dies wird unter Asynchrones Laden des Launch-Einbettungscodes näher erläutert.
Außerdem kann das Laden der Launch-Bibliothek abgeschlossen werden, bevor oder nachdem das Browserereignis DOMContentLoaded (DOM bereit) eingetreten ist.
Aufgrund dieser beiden Punkte ist es sinnvoll, zu veranschaulichen, wie die Ereignistypen Bibliothek geladen , Seitenende , DOM bereit und Fenster geladen aus der Haupterweiterung funktionieren, wenn eine Launch-Bibliothek asynchron geladen wird.
Angenommen, Ihre Launch-Property enthält die folgenden vier Regeln:
  • Regel A: Verwendet den Ereignistyp „Bibliothek geladen“
  • Regel B: Verwendet den Ereignistyp „Seitenende“
  • Regel C: Verwendet den Ereignistyp „DOM bereit“
  • Regel D: Verwendet den Ereignistyp „Fenster geladen“
Unabhängig davon, wann die Launch-Bibliothek geladen wird, werden alle Regeln garantiert in der folgenden Reihenfolge ausgeführt:
Regel A → Regel B → Regel C → Regel D
Obwohl die Reihenfolge immer durchgesetzt wird, können einige Regeln sofort ausgeführt werden, wenn die Launch-Bibliothek geladen wird, während andere später ausgeführt werden. Folgendes tritt auf, wenn die Launch-Bibliothek geladen wird:
  1. Regel A wird sofort ausgeführt.
  2. Wenn das Browserereignis DOMContentLoaded (DOM bereit) bereits eingetreten ist, werden Regeln B und C sofort ausgeführt. Andernfalls werden Regel B und Regel C später ausgeführt, wenn das Browserereignis DOMContentLoaded eintritt.
  3. Wenn das Browserereignis load (Fenster geladen) bereits eingetreten ist, wird Regel D sofort ausgeführt. Andernfalls wird Regel D später ausgeführt, wenn das Browserereignis load eintritt. Beachten Sie, dass – wenn Sie die Launch-Bibliothek gemäß Anweisungen installiert haben – der Ladevorgang der Launch-Bibliothek immer abgeschlossen wird, bevor das Browserereignis load auftritt.
Beachten Sie beim Anwenden dieser Prinzipien auf Ihre eigene Website folgende Punkte:
  • Regeln, die den Ereignistyp „Bibliothek geladen“ verwenden, werden möglicherweise ausgeführt, bevor die Datenschicht vollständig geladen ist. Dies kann dazu führen, dass die Aktionen der Regel mit fehlenden Daten ausgeführt werden, da die Daten noch nicht auf der Seite verfügbar sind. Diese Art von Problemen können Sie durch die Optimierung Ihrer Regelkonfiguration verhindern. Statt eine Regel durch den Ereignistyp „Bibliothek geladen“ auszulösen, können Sie die Ereignistypen „Benutzerspezifisches Ereignis“ oder „Direktaufruf“ verwenden. Diese werden vom Seitencode ausgelöst, sobald die Datenschicht geladen wurde.
  • Der Ereignistyp „Seitenende“ bietet keinen echten Mehrwert, wenn die Bibliothek asynchron geladen wird. Verwenden Sie stattdessen „Bibliothek geladen“, „DOM bereit“, „Fenster geladen“ oder andere Ereignistypen.
Wenn es zu einer Fehlermeldung kommt, liegen wahrscheinlich einige Timing-Probleme vor. Bereitstellungen, die ein präzises Timing erfordern, müssen möglicherweise Ereignis-Listener sowie den Ereignistyp „Benutzerspezifisches Ereignis“ oder „Direktaufruf“ verwenden, um ihre Implementierungen stabiler und einheitlicher zu gestalten.

Asynchrones Laden des Launch-Einbettungscodes

Launch beinhaltet eine Schaltfläche, über die Sie das asynchrone Laden aktivieren können, wenn Sie bei der Konfiguration einer Umgebung einen Einbettungscode erstellen. Sie können das asynchrone Laden auch selbst konfigurieren:
  1. Fügen Sie dem <script> -Tag das Attribut „async“ hinzu, um das Skript asynchron zu laden.
    Im Launch-Einbettungscode müssen Sie hierzu ...
    <script src="//www.yoururl.com/launch-EN1a3807879cfd4acdc492427deca6c74e.min.js"></script>
    
    
    ... wie folgt ändern:
    <script src="//www.yoururl.com/launch-EN1a3807879cfd4acdc492427deca6c74e.min.js" async></script>
    
    
  2. Entfernen Sie sämtlichen Code, den Sie zuvor unten im Tag hinzugefügt haben:
    <script type="text/javascript">_satellite.pageBottom();</script>
    
    
    Dieser Code teilt Launch mit, dass der Browser-Parser den unteren Seitenrand erreicht hat. Da Launch vor diesem Zeitpunkt wahrscheinlich nicht geladen und ausgeführt wird, führt der Aufruf von _satellite.pageBottom() zu einem Fehler, und der Ereignistyp „Seitenende“ verhält sich möglicherweise nicht wie erwartet.