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. Gereedschappen zoals Google PageSpeed adviseren 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 het dialoogvenster <head> -tag 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 <script> -tag 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 zijn benchmarktools voor webprestaties zoals Google PageSpeed of Lighthouse worden geladen scripts vaak synchroon gemarkeerd.
Tagbeheerbibliotheken kunnen snel groter worden als u veel tags moet beheren.
Asynchrone implementatie
U kunt elke bibliotheek asynchroon laden door een async 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 kan zijn geladen voor- of nadat de onderkant van de pagina is geparseerd en uitgevoerd, moet u niet langer bellen _satellite.pageBottom() uit uw paginacode (_satellite zijn pas beschikbaar nadat de bibliotheek is geladen). Dit wordt uitgelegd in De ingesloten code van tags asynchroon laden.
Ten tweede kan de tagbibliotheek klaar zijn met laden voor of na de DOMContentLoaded Er heeft zich een browsergebeurtenis (DOM Ready) voorgedaan.
Vanwege deze twee punten is het de moeite waard om te laten zien hoe de Bibliotheek geladen, Pagina onder, gereed voor DOM, en Venster geladen gebeurtenistypen van de functie Core bij het asynchroon laden van een tagbibliotheek.
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
DOMContentLoadedDe browsergebeurtenis (DOM Ready) is al opgetreden, de regels B en C worden onmiddellijk uitgevoerd. Anders, worden de Regel B en Regel C uitgevoerd later wanneerDOMContentLoadedbrowsergebeurtenis. - Als de
loadbrowsergebeurtenis (Venster geladen) heeft zich al voorgedaan, Regel D wordt onmiddellijk uitgevoerd. Anders wordt Regel D later uitgevoerd wanneerloadbrowsergebeurtenis. Let erop dat als u de tagbibliotheek volgens de instructies hebt geïnstalleerd, de tagbibliotheek altijd wordt geladen voordat deloadbrowsergebeurtenis.
Houd rekening met het volgende wanneer u deze principes toepast op uw eigen website:
- Een regel die gebruikmaakt van het gebeurtenistype Bibliotheek Geladen kan worden uitgevoerd voordat de gegevenslaag volledig is geladen. Dit kan ertoe leiden dat de handelingen van de regel met ontbrekende gegevens worden uitgevoerd omdat de gegevens nog niet beschikbaar op de pagina waren. 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 gebeurtenistype Pagina onder biedt niet in het bijzonder waarde wanneer de bibliotheek asynchroon wordt geladen. Overweeg in plaats daarvan de geladen bibliotheek, DOM Ready, Window Loaded 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
Tags bieden een schakeloptie om het asynchroon laden van een insluitcode in te schakelen wanneer u een milieu. U kunt het asynchrone laden ook zelf configureren:
-
Voeg een asynchroon attribuut aan toe
<script>-tag 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 en daarom
_satellite.pageBottom()resulteert in een fout en het gebeurtenistype Pagina onder zich gedraagt zich mogelijk niet zoals verwacht.