javascript asynchrone chargement / exécution

Dans ce post, asynchrone .js chargement d'un fichier de syntaxequelqu'un a dit, "Si l'attribut async est présent, alors le script sera exécuté de manière asynchrone, dès qu'il est disponible."

(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 */

Ma question est, qu'est ce que "le script sera exécuté de manière asynchrone"? Sera-ce script sera exécuté dans un thread différent des autres javascript dans la page? Si oui, doit-on s'inquiéter problème de synchronisation dans les deux threads?

Grâce.

source d'informationauteur Kai

  1. 5

    Il ne sera pas exécuté sur un thread différent. Vous n'avez pas à vous soucier de la synchronisation des threads dans ce cas.

    À un moment plus tard, après votre appel pile se déroule, le téléchargement de myfile.js sera complète. Le navigateur et js volonté de cadre de l'exécution de votre script à un certain point par la suite.

  2. 23

    Habituellement, lorsque vous ajoutez un script externe pour un document HTML, le script doit être téléchargé et exécuté avant toute autre chose qui peut être fait sur la page. En d'autres termes, les blocs de script. Cela peut prendre beaucoup de temps si il y a plusieurs scripts à télécharger.

    Mais lorsque vous chargez un script de manière asynchrone, il ne bloque pas. Le reste de la page peuvent être chargés et d'autres scripts peuvent être exécutés alors que le script async est en cours de téléchargement. Cela rend le chargement des pages plus rapide, mais cela signifie aussi que vous ne pouvez pas être sûr que quand le async script sera exécuté. Si vous ne pouvez pas simplement commencer à utiliser les fonctions et les objets à partir du script async. Vous avez à attendre et vérifier l'async script à charger.

    Exemple:

    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>

    Résultat: le "bar"

    doc2.html

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

    Résultat: le "bar" ou non, selon si oui ou non script1.js a encore chargé.

    Pas de threads de s'inquiéter, si. Un script qui s'exécute après l'autre, mais jamais les deux en même temps. C'est juste l'ordre d'exécution qui devient imprévisible.

  3. 2

    Téléchargé de manière asynchrone, pas exécuté de manière asynchrone. Aussi, il n'est pas nécessairement exécutée lorsque le téléchargement se termine.

  4. 1
      (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'));

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