Javascript асинхронная загрузка и порядок выполнения

Question

Я ищу дополнительную информацию о том, как браузеры выполняют сценарии асинхронного стиля в отношении остальной части страницы.

У меня есть сценарий JS, который следует шаблону асинхронной загрузки следующим образом:

var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://yourdomain.com/script.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);

Я понимаю, что это неблокирующая загрузка, и страница будет продолжать загружаться во время этой загрузки. Все идет нормально. Теперь давайте скажем позже, я объявляю некоторую переменную:

var x = "something";

Мой вопрос: будет ли эта переменная доступной для скрипта, который я загружал ранее? Если я сделаю

alert(x);

в скрипте, загруженном выше, это похоже на работу, но я не уверен, что так будет всегда. Также насчет элементов DOM. Если позже на странице есть какой-нибудь div:

<div id="myDiv"></div>

и в моем сценарии я делаю

var div = document.getElementById("myDiv"); 

Будет ли это работать правильно? В моем тестировании эти вещи, кажется, работают, но я не уверен, было ли намного больше содержимого страницы, которое было бы видно асинхронному сценарию или нет.

Таким образом, мой вопрос может быть в основном сужен до следующего: безопасен ли доступ к элементам из асинхронно загруженного скрипта без проверки какого-либо события, загруженного DOM?

Answer 1

1. Если добавить <script> с async, установленным в значение true, а затем объявить переменную в <script> ниже по порядку клевания, то это условие гонки, если переменная доступна в первом.

   Если первый <script> кэшируется или если выполнение второго <script> задерживается (т.е. элемент между первым / вторым является синхронным и медленным для загрузки), вы в конечном итоге получите переменную, которая не определена.

2. Вы можете гарантировать, что <script> будет выполнен не раньше, чем его позиция в DOM. Если <div> расположен перед <script>, он будет всегда доступным. В противном случае вытащите соломку.

В в обеих этих ситуаций вы можете заключить код JavaScript, содержащийся в скриптах, в обработчики событий, которые прослушивают событие, такое как window.onload или DOMContentLoaded, чтобы задержать выполнение до тех пор, пока эти события не срабатывает (и все <scripts> будут присутствовать и исправятся).