Show Menu
ARGOMENTI×

Distribuzione asincrona

La distribuzione delle prestazioni e non di blocco delle librerie JavaScript richieste dai nostri prodotti è sempre più importante per gli utenti di Adobe Experience Cloud. Strumenti come Google PageSpeed consigliano agli utenti di modificare le modalità di distribuzione delle Adobe librerie nei loro siti. Questo articolo spiega come utilizzare le librerie JavaScript di Adobe in modo asincrono.

Sincrona e asincrona

Distribuzione sincrona

Le librerie vengono spesso caricate in modo sincrono nel tag <head> di una pagina. Ad esempio:
<script src="example.js"></script>

Per impostazione predefinita, il browser analizza il documento e raggiunge questa riga, quindi inizia a recuperare il file JavaScript dal server. Il browser attende fino alla restituzione del file, quindi analizza ed esegue il file JavaScript. Infine, continua ad analizzare il resto del documento HTML.
Se il parser si trova in un tag <script> prima di eseguire il rendering del contenuto visibile, la visualizzazione del contenuto avviene in ritardo. Se il file JavaScript caricato non è strettamente necessario per mostrare il contenuto agli utenti, stai facendo aspettare i visitatori inutilmente. Maggiori sono le dimensioni della la libreria, maggiore è il ritardo. Per questo motivo, strumenti di benchmark delle prestazioni del sito Web come Google PageSpeed o Lighthouse spesso contrassegnano gli script caricati in modo sincrono.
Le librerie di Tag Management possono crescere rapidamente in presenza di numerosi tag da gestire.

Distribuzione asincrona

Puoi caricare qualsiasi libreria in modo asincrono aggiungendo un attributo async al tag <script> . Ad esempio:
<script src="example.js" async></script>

Questo indica al browser che, quando questo tag di script viene analizzato, deve iniziare a caricare il file JavaScript ma, invece di attendere il caricamento e l'esecuzione della libreria, deve continuare ad analizzare ed eseguire il rendering del resto del documento.

Valutazioni sulla distribuzione asincrona

Come descritto in precedenza, nelle distribuzioni sincrone il browser mette in pausa ed esegue il rendering della pagina durante il caricamento e l'esecuzione della libreria di Launch. Nelle distribuzioni asincrone, al contrario, il browser continua ad analizzare ed eseguire il rendering della pagina durante il caricamento della libreria. Deve essere presa in considerazione la variabilità di quando la libreria di Launch può terminare il caricamento in relazione all'analisi e al rendering delle pagine.
Innanzitutto, poiché la libreria di Launch può terminare il caricamento prima o dopo l'analisi e l'esecuzione della pagina, non dovresti più chiamare _satellite.pageBottom() dal codice della pagina ( _satellite non sarà disponibile fino al caricamento della libreria). Questa situazione è descritta in Caricamento del codice di incorporamento di Launch in modo asincrono .
In secondo luogo, il caricamento della Launch libreria può terminare prima o dopo l' DOMContentLoaded evento del browser (DOM Ready).
A causa di questi due punti, vale la pena dimostrare la funzione dei tipi di evento Library Loaded , Page Bottom , DOM Ready e Window Loaded dell'estensione Core durante il caricamento di una libreria di Launch in modo asincrono.
Supponiamo che la proprietà Launch contenga le quattro regole seguenti:
  • Regola A: utilizza il tipo di evento Library Loaded
  • Regola B: utilizza il tipo di evento Page Bottom
  • Regola C: utilizza il tipo di evento DOM Ready
  • Regola A: utilizza il tipo di evento Window Loaded
A prescindere da quando termina il caricamento della libreria di Launch, l'esecuzione di tutte le regole è garantita nel seguente ordine:
Regola A → Regola B → Regola C → Regola D
Anche se l'ordine è sempre applicato, alcune regole potrebbero essere eseguite immediatamente al termine del caricamento della libreria di Launch, mentre altre potrebbero essere eseguite in un secondo momento. Al termine del caricamento della libreria di Launch si verifica quanto segue:
  1. La regola A viene eseguita immediatamente.
  2. Se l'evento DOMContentLoaded del browser (DOM Ready) si è già verificato, la regola B e la regola C vengono eseguite immediatamente. In caso contrario, la regola B e la regola C vengono eseguite successivamente quando DOMContentLoaded si verifica l'evento del browser.
  3. Se l' load evento del browser (Windows Loaded) si è già verificato, la regola D viene eseguita immediatamente. In caso contrario, la regola D verrà eseguita successivamente quando si verifica l'evento del browser load . Nota che, se hai installato la libreria di Launch seguendo le istruzioni, la libreria di Launch termina sempre prima dell' load esecuzione dell'evento del browser.
Quando applichi questi principi al tuo sito Web, prendi in considerazione quanto segue:
  • Una regola che utilizza il tipo di evento Library Loaded potrebbe essere eseguita prima del caricamento completo del livello di dati. Questo può comportare l'esecuzione delle azioni della regola con dati mancanti, perché i dati non erano ancora disponibili sulla pagina. Questi tipi di problemi possono essere attenuati modificando la configurazione delle regole. Ad esempio, invece di avere una regola attivata dal tipo di evento Library Loaded, potresti invece utilizzare i tipi di evento Custom Event o Direct Call, attivati dal codice della pagina al termine del caricamento del livello di dati.
  • Il tipo di evento Page Bottom, in particolare, non specifica il valore quando la libreria viene caricata in modo asincrono. Considera invece Library Loaded, DOM Ready, Window Loaded o altri tipi di eventi.
Se noti che qualcosa non sta funzionando nel modo corretto, è probabile che si stiano verificando dei problemi di tempistica. Le implementazioni che richiedono tempistiche precise potrebbero dover utilizzare listener di eventi e il tipo di evento Custom Event o Direct Call per rendere le implementazioni più solide e coerenti.

Caricamento del codice di incorporamento di Launch in modo asincrono

Launch dispone di un pulsante di attivazione del caricamento asincrono quando si crea un codice di incorporamento durante la configurazione di un ambiente . Puoi anche configurare un caricamento asincrono autonomamente:
  1. Aggiungi un attributo asincrono al tag <script> per caricare lo script in modo asincrono.
    Nel caso del codice di incorporamento di Launch, significa modificare quanto segue:
    <script src="//www.yoururl.com/launch-EN1a3807879cfd4acdc492427deca6c74e.min.js"></script>
    
    
    in questo:
    <script src="//www.yoururl.com/launch-EN1a3807879cfd4acdc492427deca6c74e.min.js" async></script>
    
    
  2. Rimuovi eventuale codice precedentemente aggiunto in fondo al tag:
    <script type="text/javascript">_satellite.pageBottom();</script>
    
    
    Questo codice comunica a Launch che il parser del browser ha raggiunto il fondo della pagina. Siccome Launch probabilmente non sarà ancora caricato e in esecuzione in questo momento, la chiamata a _satellite.pageBottom() restituisce un errore e il tipo di evento Page Bottom potrebbe non comportarsi come previsto.