Modernizr - Quali script vengono caricati in modo asincrono?

Question

Ho il seguente:

Modernizr.load([ 
{ 
    load : '//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js', 
    complete : function() { 
    if (!window.jQuery){ 
     Modernizr.load('/js/jquery-1.6.2.min.js'); 
    } 
    } 
}, 
{ 
    load : ["/js/someplugin.js", "/js/anotherplugin.js"], 
    complete : function() 
    { 
    // do some stuff 
    } 
}, 
{ 
    load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js' 
} 
]}; 

ho letto che Modernizr carichi script Asyncronously. Ma nell'esempio sopra, quali sono caricati asincroni?

Tutte le operazioni seguenti vengono caricate in modo asincrono?

1. jquery.min.js
2. someplugin.js
3. anotherplugin.js
4. ga.js

o è una combinazione di async e ha ordinato di caricare in questo modo:

1. jquery.min.js viene caricato per primo
2. Poi viene caricato someplugin.js e anotherplugin.js asincrone
3. infine, ga.js viene caricato

Sto avendo un test difficoltà qual caso è.

Answer 1

Hai selezionato un esempio abbastanza complesso da analizzare. Quindi lascia fare a passi.

1. I tre set di parametri {...},{...},{...} verranno eseguiti in sequenza.
2. All'interno del primo set di parametri si carica jQuery dal CDN di Google, quindi al termine si verifica se jQuery è effettivamente caricato. In caso contrario (forse stai sviluppando offline e la google CDN non è raggiungibile), carichi una copia locale di jQuery. Quindi questi sono "sequenziali", ma in realtà solo uno di essi verrà caricato.
3. Nel secondo set di parametri si carica someplugin.js e 'anotherplugin.js` contemporaneamente e in modo asincrono. Quindi saranno scaricati in parallelo. È fantastico quando è possibile parallelare 2 elementi alla volta poiché questo è il "collegamento più debole" per i browser di oggi (sì solo IE, ogni altro browser sarà parallelo a 6-8 file alla volta).
4. Nel terzo set di parametri si carica lo script di google analytics.

Ricorda che modernizr è una raccolta di strumenti. Il caricatore incluso è in realtà solo un riconfezionato yepnope. Quindi puoi google per saperne di più su yepnope.

L'idea con i carichi sequenziali deve essere in grado di assicurare che le dipendenze vengano caricate in ordine (ad esempio i plugin jQuery devono essere caricati dopo il framework jQuery). Lo scopo della sintassi per il download parallelo nel set di parametri due è quello di velocizzare le prestazioni per più file che non sono co-dipendenti (ad esempio è possibile caricare più plug-in jQuery in parallelo una volta caricato jQuery purché non dipendano l'uno dall'altro) .

Quindi, per rispondere alla tua domanda, la tua ipotesi n. 2 è corretta. Se vuoi saperne di più usando firebug, aggiungi alcune istruzioni console.log nella funzione completa di ciascun set di parametri. Dovresti vedere i 3 gruppi completi in sequenza ogni volta. Ora passa firebug sulla scheda "Net" per vedere uscire le richieste di file. I file someplugin.js e 'anotherplugin.js` non verrà necessariamente caricato nello stesso ordine ogni volta. Le richieste andranno in ordine, ma le barre di sincronizzazione dovrebbero sovrapporsi (mostrandole come parallele). Provare questo a livello locale sarà difficile perché sarà così veloce. Metti da qualche parte i tuoi due file di test su un server lento o polarizzali al contrario di quello che ti aspetti (crea il primo file 1mb e il secondo < 1kb) in modo da poter vedere i download sovrapposti nella scheda monitor di rete di firebug (questo è solo uno scenario artificiale a scopo di test, è possibile riempire un file con commenti JS ripetuti solo per creare un file artificialmente lento per il test).

EDIT: Per chiarireun po 'più accuratamente, vorrei aggiungere una citazione dal yepnopejs.com homepage. yepnopejs è il caricatore risorsa che è incluso (e alias) all'interno Modernizr:

In breve, qualsiasi ordine di metterli in, questo è l'ordine che li abbiamo eseguire nel 'carico' e 'entrambi' set. dei file vengono eseguiti dopo i set "yep" o "nope", ma viene mantenuto anche l'ordine con cui si specifica all'interno di tali set. Ciò non significa che i file vengano sempre caricati in questo ordine, ma garantiamo che vengano eseguiti in questo ordine . Poiché si tratta di un caricatore asincrono, cariciamo tutto a allo stesso tempo e non facciamo altro che ritardarne l'esecuzione (o l'iniezione) fino al l'ora è giusta.

Quindi sì, si potrebbe mettere jquery, seguito da alcuni plugin nella stessa istruzione Modernizr.load e saranno scaricate in parallelo e iniettato nel DOM nello stesso ordine come specificato negli argomenti. L'unica cosa che si sta rinunciando qui è la possibilità di verificare se jQuery è stato caricato con successo e magari prendere una versione non di CDN di backup di jQuery, se necessario. Quindi è una tua scelta il supporto critico per il fallback per te. (Non ho alcuna fonte, ma mi sembra di ricordare che il CDN di Google è andato giù una volta nella sua intera vita)