I browser eseguono script caricati in un singolo thread?

posso scrivere il seguente:I browser eseguono script caricati in un singolo thread?

<script src="file1.js" defer></script> 
<script src="file2.js" defer></script> 
<script src="file3.js" defer></script>

Il che significa file possono essere scaricati in parallelo, ma eseguiti solo uno dopo l'altro. Tuttavia, posso aggiungere l'attributo async per consentire al codice di esecuzione del browser in ordine casuale.

<script src="file1.js" async></script> 
<script src="file2.js" async></script> 
<script src="file3.js" async></script>

Se sono interessato all'aumento di prestazioni, è possibile eseguire il secondo blocco più rapidamente? Come vedo se un browser esegue tutto JavaScript in un thread, quindi il tempo di esecuzione totale per 3 script non sarà diverso dal primo blocco, solo l'ordine di esecuzione potrebbe essere diverso. Ho ragione?

fonte

2016-04-12 AngularInDepth.com

Devo testare qualcosa ancora? –

Penso che il tempo sarà lo stesso per l'esecuzione generale in entrambi i metodi, ma in 'async' possiamo mostrare i dati importanti come HTML più velocemente. Questa è completamente la mia opinione. –

Se sono interessato all'aumento di prestazioni, è possibile eseguire il secondo blocco più rapidamente?

Poiché gli script verranno scaricati ed eseguiti in modo asincrono, sì, ridurrà il tempo di caricamento della pagina.

L'autore dello Script-injected "async scripts" considered harmful confronta tre metodi di inclusione di uno script: uno script inserito, uno script di blocco e uno script con attributo async. Il risultato è:

    script execution onload 
----------------- ------------------ -------- 
    script-injected ~3.7s    ~3.7s 
    blocking script ~2.7s    ~2.7s 
    async attribute ~1.7s    ~2.7s

Come si vede, l'attributo async offre le migliori prestazioni. Se l'ordine di esecuzione degli script non ha importanza, dovresti assolutamente usarlo.

quanto riguarda la tua domanda del titolo:

Do browser eseguire script caricati in un singolo thread?

Sì, perché JavaScript è a thread singolo, ma non importa in termini di prestazioni. Il download di uno script richiede molto più tempo rispetto all'esecuzione effettiva, quindi è necessario concentrarsi sull'ottimizzazione della parte di download.

Ho fatto un test. Ho creato un semplice script:

for (var i = 0; i < 1e8; i++);

ho messo lo stesso copione in due file, test1.js e test2.js.Poi ho fatto due file HTML, la prima senza async e la seconda con:

test1.html:

<!DOCTYPE html> 
<script src="test1.js"></script> 
<script src="test2.js"></script>

test2.html:

<!DOCTYPE html> 
<script src="test1.js" async></script> 
<script src="test2.js" async></script>

Poi ho aperto questi file HTML nel browser e controllato Timeline scheda in Chrome DevTools:

test1.html:

test2.html:

Come si vede, in entrambi i casi gli script non vengono eseguiti in modo asincrono.

Vedere anche: Is JavaScript guaranteed to be single-threaded?.

fonte

2016-04-12 07:21:42

grazie, ma le domande riguardano specificamente i tempi di esecuzione. da quello che posso vedere, il tempo di esecuzione non è influenzato dal fatto che io usi 'defer' o' async' o no. Il tempo di caricamento è decisamente migliore con 'async' –

_senza il browser aspetterebbe il primo script da eseguire, e dopo di ciò eseguirà il secondo script._ - cosa farà _with_' async' se ha solo un thread eseguire gli script? :) Questo è il punto principale della mia domanda. –

grazie, quindi in pratica questo dimostra che il tempo di esecuzione totale non cambia con l'introduzione dell'attributo 'async' ed è uguale alla somma del tempo di esecuzione di ogni script, corretto? –

I browser eseguono script caricati in un singolo thread?

risposta

Problemi correlati