Asynchrone implementatie asynchronous-deployment
Prestaties en het niet blokkeren van de implementatie van de JavaScript-bibliotheken die onze producten vereisen, worden steeds belangrijker voor Adobe Experience Cloud-gebruikers. Hulpmiddelen zoals Google PageSpeedadviseren dat de gebruikers veranderen zij hoe zij de bibliotheken van de Adobe op hun plaats opstellen. In dit artikel wordt uitgelegd hoe u de Adobe JavaScript-bibliotheken asynchroon kunt gebruiken.
Synchroon versus asynchroon
Synchrone implementatie
Bibliotheken worden vaak synchroon geladen in de tag <head> van een pagina. Bijvoorbeeld:
<script src="example.js"></script>
Standaard parseert de browser het document en bereikt deze regel. Vervolgens haalt de browser het JavaScript-bestand op van de server. De browser wacht tot het bestand is geretourneerd, parseert het bestand en voert het uit. Tot slot wordt de rest van het HTML-document nog steeds geparseerd.
Als de parser de tag <script> tegenkomt voordat zichtbare inhoud wordt gerenderd, wordt de weergave van de inhoud vertraagd. Als het JavaScript-bestand dat wordt geladen niet absoluut noodzakelijk is om inhoud aan uw gebruikers weer te geven, hebt u uw bezoekers onnodig gevraagd om op inhoud te wachten. Hoe groter de bibliotheek, des te langer de vertraging. Daarom markeren benchmarkgereedschappen voor websiteprestaties zoals Google PageSpeed of Lighthouse vaak synchroon geladen scripts.
Tagbeheerbibliotheken kunnen snel groter worden als u veel tags moet beheren.
Asynchrone implementatie
U kunt elke bibliotheek asynchroon laden door een async -kenmerk toe te voegen aan de <script> -tag. Bijvoorbeeld:
<script src="example.js" async></script>
Dit geeft aan de browser aan dat wanneer deze scripttag wordt geparseerd, de browser moet beginnen met het laden van het JavaScript-bestand. In plaats van te wachten tot de bibliotheek is geladen en uitgevoerd, moet de browser de rest van het document blijven parseren en renderen.
Overwegingen bij asynchrone implementatie
Zoals hierboven beschreven, pauzeert de browser bij synchrone implementaties het parseren en renderen van de pagina terwijl de Adobe Experience Platform-tagbibliotheek wordt geladen en uitgevoerd. Bij asynchrone implementaties parseert en rendert de browser de pagina terwijl de bibliotheek wordt geladen. Er moet rekening worden gehouden met de variabiliteit van het tijdstip waarop de tagbibliotheek kan zijn geladen ten opzichte van het parseren en renderen van pagina's.
Ten eerste, omdat de tagbibliotheek al kan worden geladen voordat of nadat de onderkant van de pagina is geparseerd en uitgevoerd, moet u _satellite.pageBottom() niet meer aanroepen vanuit de paginacode (_satellite is pas beschikbaar nadat de bibliotheek is geladen). Dit wordt verklaard in Lading de markeringen inbedden asynchroon code.
Ten tweede kan de tagbibliotheek klaar zijn met laden voor of nadat de DOMContentLoadedbrowser-gebeurtenis (DOM Ready) is opgetreden.
Wegens deze twee punten, is het de moeite waard om aan te tonen hoe de Geladen Bibliotheek, Onderkant van de Pagina, Klaar DOM, en Venstergebeurtenistypen van de de uitbreidingsfunctie van de Kern wanneer het laden van een markeringsbibliotheek asynchroon.
Als de eigenschap tag de volgende vier regels bevat:
- Regel A: gebruikt het bibliotheekgeladen gebeurtenistype
- Regel B: gebruikt het gebeurtenistype Pagina onder
- Regel C: gebruikt het DOM Klaar gebeurtenistype
- Regel D: gebruikt het gebeurtenistype Window Loaded
Ongeacht wanneer het laden van de tagbibliotheek is voltooid, worden alle regels gegarandeerd uitgevoerd en worden ze in de volgende volgorde uitgevoerd:
Regel A → Regel B → Regel C → Regel D
Hoewel de volgorde altijd wordt gehandhaafd, kunnen sommige regels direct worden uitgevoerd wanneer de tagbibliotheek klaar is met laden, terwijl andere later wellicht worden uitgevoerd. Het volgende gebeurt wanneer de tagbibliotheek klaar is met laden:
- Regel A wordt onmiddellijk uitgevoerd.
- Als de browsergebeurtenis
DOMContentLoaded(DOM Ready) al heeft plaatsgevonden, worden de regels B en C direct uitgevoerd. Anders, worden Regel B en Regel C uitgevoerd later wanneer deDOMContentLoadedbrowser gebeurtenis voorkomt. - Als de
loadbrowser gebeurtenis (Venster Geladen) reeds voorkwam, wordt Regel D uitgevoerd onmiddellijk. Anders, zal Regel D later worden uitgevoerd wanneer deloadbrowser gebeurtenis voorkomt. Merk op dat als u de markeringsbibliotheek volgens de instructies hebt geïnstalleerd, de markeringsbibliotheek altijd klaar is ladend alvorens deloadbrowser gebeurtenis voorkomt.
Houd rekening met het volgende wanneer u deze principes toepast op uw eigen website:
- een regel die de Bibliotheek Geladen gebeurtenistype gebruikt zou kunnen uitvoeren alvorens uw gegevenslaag volledig wordt geladen. Dit kan ertoe leiden dat de handelingen van de regel worden uitgevoerd met ontbrekende gegevens omdat de gegevens nog niet beschikbaar waren op de pagina. Deze soorten kwesties kunnen worden verlicht door uw regelconfiguratie aan te passen. Als voorbeeld, in plaats van het hebben van een regel die door het Bibliotheek Geladen gebeurtenistype wordt teweeggebracht, kon u in plaats daarvan het gebeurtenistype van de Gebeurtenis van de Douane of van de Vraag gebruiken die door uw paginacode worden teweeggebracht zodra uw gegevenslaag het laden beëindigt.
- het de gebeurtenistype van de Onderkant van de Pagina verstrekt met name geen waarde wanneer de bibliotheek asynchroon wordt geladen. Overweeg in plaats daarvan de Bibliotheek Geladen, Klaar DOM, Venster Geladen, of andere gebeurtenistypen.
Als u dingen die uit orde voorkomen ziet, is het waarschijnlijk dat u sommige timingkwesties hebt om door te werken. De plaatsingen die nauwkeurige timing vereisen zouden gebeurtenisluisteraars en het gebeurtenistype van de Gebeurtenis van de Douane of Directe Vraag kunnen moeten gebruiken om hun implementaties robuuster en consistenter te maken.
De ingesloten code van tags asynchroon laden
De markeringen verstrekken een knevel om asynchrone lading aan te zetten wanneer het creëren van inbedcode wanneer u een milieuvormt. U kunt het asynchrone laden ook zelf configureren:
-
Voeg een asynchroon kenmerk toe aan de tag
<script>om het script asynchroon te laden.Voor de tags die code insluiten, betekent dit dat u de volgende code wijzigt:
code language-markup <script src="//www.yoururl.com/launch-EN1a3807879cfd4acdc492427deca6c74e.min.js"></script>op dit punt:
code language-markup <script src="//www.yoururl.com/launch-EN1a3807879cfd4acdc492427deca6c74e.min.js" async></script> -
Verwijder alle code die u eerder onder aan de tag hebt toegevoegd:
code language-markup <script type="text/javascript">_satellite.pageBottom();</script>Deze code vertelt Platform dat de browser parser de bodem van de pagina heeft bereikt. Het is waarschijnlijk dat tags niet voor deze tijd zijn geladen en uitgevoerd, dus het aanroepen van
_satellite.pageBottom()resulteert in een fout en het gebeurtenistype Pagina onder werkt mogelijk niet zoals verwacht.