caricamento/esecuzione asincroni javascript

In questo post, asynchronous .js file loading syntax, qualcuno ha detto: "Se l'attributo async è presente, lo script verrà eseguito in modo asincrono, non appena sarà disponibile."caricamento/esecuzione asincroni javascript

(function() { 
    var d=document, 
    h=d.getElementsByTagName('head')[0], 
    s=d.createElement('script'); 
    s.type='text/javascript'; 
    s.async=true; 
    s.src='/js/myfile.js'; 
    h.appendChild(s); 
}()); /* note ending parenthesis and curly brace */

La mia domanda è, che cosa significa "lo script sarà eseguito in modo asincrono" significa? Questo script verrà eseguito in un thread diverso da altri javascript nella pagina? Se sì, dovremmo preoccuparci del problema di sincronizzazione nei due thread?

Grazie.

fonte

2011-01-08 Kai

Questo script viene eseguito non appena viene analizzato, quindi non sono sicuro che ci sia alcuna differenza con semplicemente utilizzando il

In genere, quando si aggiunge uno script esterno a un documento HTML, lo script dovrà essere scaricato ed eseguito prima che qualsiasi altra cosa possa essere eseguita sulla pagina. In altre parole, lo script blocca. Questo può richiedere molto tempo se ci sono diversi script da scaricare.

Ma quando si carica uno script in modo asincrono, non viene bloccato. Il resto della pagina può essere caricato e altri script possono essere eseguiti mentre lo script async viene scaricato. Questo fa caricare le pagine più velocemente, ma ciò significa anche che non puoi essere sicuro quando verrà eseguito lo script asincrono. Quindi non puoi semplicemente iniziare a usare funzioni e oggetti dallo script asincrono. Devi aspettare e controllare che lo script async venga caricato.

Esempio:

script1.js

var foo = "bar";

script2.js

alert(foo);

doc1.html

<script type="text/javascript" src="script1.js"></script> 
<script type="text/javascript" src="script2.js"></script>

Risultato: "bar"

doc2.html

<script type="text/javascript" src="script1.js" async="true"></script> 
<script type="text/javascript" src="script2.js"></script>

Risultato: "bar" o non definito, a seconda o meno script1.js ha ancora caricato.

Nessun thread di cui preoccuparsi. Uno script viene eseguito dopo l'altro, ma mai entrambi allo stesso tempo. È solo l'ordine di esecuzione che diventa imprevedibile.

fonte

2011-01-08 02:11:28 kijin

È possibile utilizzare la parola chiave 'defer' invece di' async' per garantire che l'ordine venga mantenuto fino a quando gli script non modificano il DOM – stephenmurdoch

Scaricato in modo asincrono, non eseguito in modo asincrono. Inoltre, non viene necessariamente eseguito al termine del download.

fonte

2011-01-08 02:21:05 goat

Potresti espanderlo di più? Perché dovrebbe essere eseguito o non eseguito quando finisce? Vuoi dire che sarebbe in ritardo? – jlafay

(function(doc, script) { 
    var js, 
     fjs = doc.getElementsByTagName(script)[0], 
     add = function(url, id) { 
      if (doc.getElementById(id)) {return;} 
      js = doc.createElement(script); 
      js.src = url; 
      id && (js.id = id); 
      fjs.parentNode.insertBefore(js, fjs); 
     }; 

    // Google Analytics 
    add(('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js', 'ga'); 
    // Google+ button 
    add('https://apis.google.com/js/plusone.js'); 
    // Facebook SDK 
    add('//connect.facebook.net/en_US/all.js', 'facebook-jssdk'); 
    // Twitter SDK 
    add('//platform.twitter.com/widgets.js', 'twitter-wjs'); 
}(document, 'script'));

fonte: https://css-tricks.com/thinking-async/

fonte

2015-05-29 03:34:27

Problemi correlati