Asynkron distribution asynchronous-deployment
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:
- Regel A verkställs omedelbart.
- 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ärDOMContentLoaded
webbläsarhändelse inträffar. - 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ärload
webbläsarhändelse inträffar. Observera, att om du har installerat taggbiblioteket enligt instruktionerna, är taggbiblioteket alltid slutar läsa in föreload
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:
-
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>
-
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.