Question

Что происходит, когда мы вызываем javascript с атрибутом async="true" внутри document.ready. Например,

$(document).ready(function() { 
var ma = document.createElement('script'); 
ma.type = 'text/javascript'; 
ma.async = true; 
ma.src = 'test.js'; 
var s = document.getElementsByTagName('script')[0]; 
s.parentNode.insertBefore(ma,s); 
}); 

Сценарий внутри $(document).ready будет выполняться сразу после загрузки DOM. Что произойдет, если мы положим async = true для вызова скрипта внутри него? test.js будет загружен до того, как DOM будет готов?

Answer 1

Сценарии, добавленные с помощью манипуляций с DOM не являются синхронными по JavaScript, который их добавляет, независимо от атрибута async.

async attribute играет большую роль в сценарии, которые существуют в исходном HTML - перед «готов» - или при добавлении нескольких элементов подлинника и порядок выполнения должен соответствовать порядку вставки DOM:

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

.. скрипты, вставленные скриптом, выполняются асинхронно в IE и WebKit, но синхронно [по порядку вставки элементов сценария] в Opera и до 4.0 Firefox. .. Просить скрипт вставленных внешние скрипты будут выполнены в порядке вставки в браузерах [..] установлен async=false на сценарии, которые вы хотите, чтобы поддерживать порядок ..

Браузер начнет загрузку сценария, на который ссылается новым script element "в какой-то момент после добавления элемента в DOM", и скрипт, на который ссылается, будет выполняться только после загрузки. Однако insertBefore возвращает сразу, а ссылочный скрипт не гарантированно будет загружен - не имеет значения, для чего установлен async.

---

В этом случае код test.js гарантированно работать только «в какой-то момент после того, как элемент сценария добавляется» к DOM - это, естественно, должно быть после готовности функция вызывается, который добавляет элемент.

Поскольку браузеры имеют единый контекст выполнения, и добавление элемента DOM является асинхронной операцией (WRT внешнего исполняемого скрипта), это также означает, что код в test.js будет только запустить «в какой-то после конец готовой функции ". И функция готовности не будет запускаться (или заканчиваться) до ее вызова в ответ на «DOM ready».

Установка знака async (на любое значение) не меняет вышеуказанного.