Asynkron distribution asynchronous-deployment

NOTE
Adobe Experience Platform Launch har omklassificerats som en serie datainsamlingstekniker i Adobe Experience Platform. Som ett resultat av detta har flera terminologiska förändringar införts i produktdokumentationen. Se följande dokument för en konsoliderad hänvisning till terminologiska förändringar.

Prestanda och icke-blockerande driftsättning av JavaScript-bibliotek som krävs av våra produkter blir allt viktigare för Adobe Experience Cloud-användare. verktyg som Google PageSpeed rekommenderar användare att ändra sitt sätt att distribuera Adobe-bibliotek på sin webbplats. I den här artikeln beskrivs hur du använder JavaScript-bibliotek i Adobe på ett asynkront sätt.

Synkron jämfört med asynkron

Synkron distribution

Biblioteken läses ofta in synkront i <head> -tagg för en sida. Exempel:

<script src="example.js"></script>

Som standard tolkar webbläsaren dokumentet och når den här raden. Sedan börjar webbläsaren hämta JavaScript-filen från servern. Webbläsaren väntar tills filen returneras, tolkar och kör sedan JavaScript-filen. Slutligen fortsätter den att analysera resten av HTML-dokumentet.

Om tolken visas över <script> -taggen innan synligt innehåll återges, kommer visningen av innehållet att fördröjas. Om JavaScript-filen som läses in inte är absolut nödvändig för att visa innehåll för dina användare, behöver du inte nödvändigtvis vänta på innehållet. Ju större bibliotek, desto längre fördröjning. Därför är prestandatestverktyg som Google PageSpeed eller Lighthouse flagga ofta synkront inlästa skript.

Tagghanteringsbibliotek kan snabbt bli stora om du har många taggar att hantera.

Asynkron distribution

Du kan läsa in alla bibliotek asynkront genom att lägga till en async attributet till <script> -tagg. Exempel:

<script src="example.js" async></script>

Detta anger för webbläsaren att när skripttaggen tolkas ska webbläsaren börja läsa in JavaScript-filen, men i stället för att vänta på att biblioteket ska läsas in och köras bör den fortsätta att tolka och återge resten av dokumentet.

Att tänka på vid asynkron distribution

I synkrona distributioner pausar webbläsaren parsning och återgivning av sidan medan taggbiblioteket i Adobe Experience Platform läses in och körs, vilket beskrivs ovan. I asynkrona distributioner fortsätter webbläsaren däremot att analysera och återge sidan medan biblioteket läses in. Variabiliteten i när taggbiblioteket kan slutföra inläsningen i relation till sidtolkning och återgivning måste beaktas.

För det första, eftersom taggbiblioteket kan slutföra inläsningen före eller efter sidans nederkant har tolkats och körts, bör du inte längre anropa _satellite.pageBottom() från sidkoden (_satellite är inte tillgängligt förrän biblioteket har lästs in). Detta förklaras i Inläsning av taggar bäddar in kod asynkront.

Därefter kan taggbiblioteket slutföra inläsningen före eller efter DOMContentLoaded webbläsarhändelse (DOM Ready) har inträffat.

På grund av dessa två punkter är det värt att visa hur Bibliotek inläst, Sidan nederst, DOM-klartoch Fönster inläst händelsetyper från Core-tilläggsfunktionen när du läser in ett taggbibliotek asynkront.

Om taggegenskapen innehåller följande fyra regler:

  • Regel A: använder händelsetypen Library Loaded
  • Regel B: använder händelsetypen Sidunderkant
  • Regel C: använder händelsetypen DOM Ready
  • Regel D: använder händelsetypen Window Loaded

Oavsett när taggbiblioteket har lästs in, kommer alla regler garanterat att köras och de kommer att köras i följande ordning:

Regel A → Regel B → Regel C → Regel D

Även om ordningen alltid används, kan vissa regler köras direkt när taggbiblioteket har lästs in, medan andra kan köras senare. Följande inträffar när taggbiblioteket har lästs in:

  1. Regel A verkställs omedelbart.
  2. Om DOMContentLoaded webbläsarhändelse (DOM Ready) har redan inträffat, regel B och regel C körs omedelbart. Annars körs regel B och regel C senare när DOMContentLoaded webbläsarhändelse inträffar.
  3. Om load webbläsarhändelse (Window Loaded) har redan inträffat. Regel D körs omedelbart. Annars kommer regel D att köras senare när load webbläsarhändelse inträffar. Observera, att om du har installerat taggbiblioteket enligt instruktionerna, är taggbiblioteket alltid slutar läsa in före load webbläsarhändelse inträffar.

När du tillämpar dessa principer på din egen webbplats bör du tänka på följande:

  • En regel som använder händelsetypen Library Loaded kan köras innan datalagret har lästs in helt. Detta kan leda till att regelns åtgärder körs med data som saknas eftersom data ännu inte var tillgängliga på sidan. Den här typen av problem kan åtgärdas genom att du anpassar regelkonfigurationen. I stället för att ha en regel som aktiveras av händelsetypen Biblioteksinläsning kan du i stället använda händelsetypen Anpassad händelse eller Direktanrop som aktiveras av sidkoden så fort datalagret har lästs in.
  • Händelsetypen Sidundersida ger inte särskilt mycket värde när biblioteket läses in asynkront. Överväg i stället att använda händelsetyperna Library Loaded, DOM Ready, Window Loaded eller någon annan.

Om du ser saker som inte fungerar som de ska är det troligt att du har timingproblem att gå igenom. Distributioner som kräver exakt timing kan behöva använda händelseavlyssnare och händelsetypen Custom Event eller Direct Call för att göra implementeringarna mer stabila och konsekventa.

Inläsning av taggar bäddar in kod asynkront

Med taggar kan du aktivera asynkron inläsning när du skapar en inbäddningskod när du konfigurerar en miljö. Du kan också konfigurera asynkron inläsning själv:

  1. Lägg till ett asynkront attribut i <script> -tagg för att läsa in skriptet asynkront.

    För taggarnas inbäddningskod innebär det att du ändrar detta:

    code language-markup
    <script src="//www.yoururl.com/launch-EN1a3807879cfd4acdc492427deca6c74e.min.js"></script>
    

    till detta:

    code language-markup
    <script src="//www.yoururl.com/launch-EN1a3807879cfd4acdc492427deca6c74e.min.js" async></script>
    
  2. Ta bort kod som du tidigare har lagt till längst ned i taggen:

    code language-markup
    <script type="text/javascript">_satellite.pageBottom();</script>
    

    Den här koden anger för plattformen att webbläsarparsern har nått sidans nederkant. Det är troligt att taggar inte har lästs in och körts tidigare och därför anropas _satellite.pageBottom() resulterar i ett fel och händelsetypen Sidslut kanske inte fungerar som förväntat.

recommendation-more-help
12b4e4a9-5028-4d88-8ce6-64a580811743