Come utilizzare jQuery per gestire i tag script aggiunti dinamicamente in parallelo

Question

Qui è la mia situazione: ho aggiunto dinamicamente 2 script attraverso

$('body').append('<script src="http://localhost:8080/script_1.js"></script>'); 
$('body').append('<script src="http://localhost:8080/script_2.js"></script>'); 

Poi ho scoperto che sarebbero caricati in sequenza anziché parallelo dalla console cromata.

Tuttavia, essi potrebbero essere caricati in parallelo se uso sia js nativi

document.body.appendChild(script); 

o la funzione jQuery: getScript

$.getScript('http://localhost:8080/script_1.js'); 

ho cercato un sacco e ha scoperto che jQuery in realtà sarà rimuovere lo script tag, analizza il sorgente e usa la sua funzione ajax $ .ajax() per caricare script invece di lasciarlo gestire al browser. Ma la funzione $ .getScript() usa anche $ .ajax() e non ha alcun blocco. Ovviamente, non è colpa di $ .ajax().

Qui è un banco di prova: Vai http://jquery.com e incollare seguente script nella console che aggiungerà un file js due volte attraverso jQuery

$('body').append('<script src="/jquery-wp-content/themes/jquery/js/plugins.js"></script>'); 
$('body').append('<script src="/jquery-wp-content/themes/jquery/js/plugins.js"></script>'); 

Controllare la timeline, troverete che vengono caricati in sequenza . Ovviamente, posso usare js nativi o $ .getScript() sopra per risparmiare tempo.

Tuttavia, voglio sapere perché? Perché queste chiamate jQuery ajax dall'aggiunta di tag script non sono in parallelo?

Aggiornamento

Più interessante, sembra la sequenza si applicano solo allo script da la stessa origine. Ho provato a caricare alcuni file js sotto forma di librerie ospitate da google e sono in parallelo. Provato in seguito anche in http://jquery.com

$('body').append('<script src="https://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>'); 
$('body').append('<script src="https://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>'); 

Answer 1

Quando aggiungendo script al DOM, a seconda del test cross-domain, vengono utilizzate diverse funzioni ajaxTransport.

Una richiesta interdominio accade quando abbiamo un protocollo: host: porta disadattamento

Nel primo caso stessa origine:

JQuery utilizza la funzione XMLHttpRequest open con async=false forzare una richiesta sincrona (see source).

xhr.open(
     options.type, 
     options.url, 
     options.async, 
     options.username, 
     options.password 
    ); 

Quindi l'avviso sulla console (almeno su Canary comunque).

sincrono XMLHttpRequest sul thread principale è obsoleta

Nel secondo caso trasversale origine:

JQuery utilizza ajax come segue (see source)

script = jQuery("<script>").prop({ 
        async: true, 
        charset: s.scriptCharset, 
        src: s.url 
       })..... 
document.head.appendChild(script[0]); 

che caricherà in parallelo come hai dichiarato.