Почему сценарий меньшего размера с асинхронным тегом выполняется вторым?

Question

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

<link rel="stylesheet" href="css/normalize.css"> 
    <link rel="stylesheet" href="css/main.css"> 
    <script src="js/big.js"></script> 
    <script src="js/small.js" async></script> 
</head> 

сценария big.js гораздо больше, и загруженным после small.js и по-прежнему выполняется первым, small.js событие имеет асинхр добавлен тег. Не должен ли тэг async гарантировать, что скрипт будет выполнен, как только он будет загружен?

Примечание: если я поставил async для скрипта big.js, сначала выполняется small.js.

Answer 1

Прежде всего, есть нет гарантий о порядке выполнения для асинхронных скриптов. Тем не менее, поведение, которое вы описываете, связано с вашим кодом.

Если big.js не загружен с использованием async, так как он до small.js в DOM, он уполномочен спецификацией, что он будет выполнен первым. Фактически, браузер не может выполнить какой-либо дополнительный JavaScript до тех пор, пока не будет выполнен big.js. Это потому, что скрипты, загруженные без async, являются, ну, не асинхронными. Они гарантированно будут синхронными.

Обратите внимание, что, несмотря на это, small.js все еще может быть загружен асинхронно. Фактически, браузеры могут загружать все ресурсы асинхронно независимо от того, явно ли они помечены как async. Спецификация только задает правила о порядке выполнения, не более того.