Асинхронная загрузка/выполнение javascript

В этом сообщении асинхронный синтаксис загрузки файла .js, кто-то сказал: "Если присутствует асинхронный атрибут, то script будет выполняться асинхронно, так как как только он будет доступен".

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

Мой вопрос: что означает "script будет выполняться асинхронно"? Будет ли этот script выполнен в другом потоке из других javascripts на странице? Если да, можем ли мы беспокоиться о проблеме синхронизации в двух потоках?

Спасибо.

Ответ 1

Он не будет выполняться в разных потоках. В этом случае вам не нужно беспокоиться о синхронизации потоков.

В какой-то момент позже, после того, как ваш текущий стек вызовов отключится, загрузка myfile.js завершится. После этого браузер и js framework выполнит ваш script.

Ответ 2

Обычно, когда вы добавляете внешний script в HTML-документ, script необходимо загрузить и выполнить, прежде чем что-либо еще будет сделано на странице. Другими словами, блоки script. Это может занять много времени, если есть несколько сценариев для загрузки.

Но когда вы загружаете a script асинхронно, он не блокируется. Остальная часть страницы может быть загружена, а другие скрипты могут выполняться при загрузке async script. Это ускоряет загрузку страниц, но это также означает, что вы не можете быть уверены, когда будет выполняться async script. Поэтому вы не можете просто начать использовать функции и объекты из async script. Вам нужно подождать и проверить загрузку async script.

Пример:

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>

Результат: "bar"

doc2.html

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

Результат: "bar" или undefined, в зависимости от того, загружен ли еще файл script1.js.

Ничего не беспокоиться. Один script выполняется за другим, но никогда не работает одновременно. Это просто порядок исполнения, который становится непредсказуемым.

Ответ 3

Загружается асинхронно, а не выполняется асинхронно. Кроме того, он не обязательно выполняется при завершении загрузки.

Ответ 4

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

источник: https://css-tricks.com/thinking-async/