Является ли атрибут / свойство async полезным, если сценарий динамически добавляется в DOM?

Question

Этот вопрос относится к Какие браузеры поддерживают

Answer 1

Вопрос в том, имеет ли s.async = true использование для динамически вставляемых сценариев, или они уже загружены асинхронно. Ответ в том, что они не загружаются асинхронно во всех браузерах, как объяснено здесь (спасибо Маркусу Олссону за ссылку)

сценарии с вставленными сценариями выполняются асинхронно в IE и WebKit, но синхронно в Opera и Firefox до 4.0. В Firefox 4.0 асинхронное свойство DOM по умолчанию имеет значение true для сценариев, созданных сценариями, поэтому поведение по умолчанию соответствует поведению IE и WebKit.

В браузерах, которые поддерживают async, но еще не используют асинхронную загрузку по умолчанию (например, Firefox 3.6), async = true имеет значение.

(Приведенная выше ссылка подтверждает, что асинхронность поддерживается в Gecko 1.9.2, движке макета, используемом Firefox 3.6)

Answer 2

Спецификация (сейчас) диктует, что элемент script, который не вставлен парсером, является асинхронным;свойство async не имеет отношения к элементам script без вставки парсера:

Третий - это флаг, указывающий, будет ли элемент " force-async ".Изначально script элементам должен быть установлен этот флаг.Он сбрасывается синтаксическим анализатором HTML и синтаксическим анализатором XML для script элементов, которые они вставляют.Кроме того, всякий раз, когда к элементу сценария, для которого установлен флаг « force-async », добавляется атрибут содержимого async, флаг элемента « force-async » должен быть не установлен.

Наличие атрибута контента async, конечно, означает, что скрипт будет выполняться асинхронно.Язык спецификации , кажется, оставляет возможность принудительно выполнять синхронное выполнение скрипта (устанавливая атрибут и затем удаляя его), но на практике это не работает и, вероятно, является лишь немного неопределенностью в спецификации,Не вставленные парсером script элементы являются асинхронными.

Это заданное поведение - то, что всегда делали IE и Chrome, Firefox делали годами, а также текущая Opera (я понятия не имею, когда он изменился сстарое поведение в ответе, связанном выше).

Это легко проверить:

var script = document.createElement("script");
script.src = "script.js";
console.log("a");
document.body.appendChild(script);
console.log("b");

... с script.js, являющимся

console.log("script loaded");

... будетlog

a
b
script loaded

Answer 3

Интересно - мне кажется, что я ошибался в своих предположениях.

Основано на этой теме на форуме разработчиков jQuery:

http://forum.jquery.com/topic/jquery-ajax-async-vs-html5-script-async

похоже, что свойство async обнаружило влияние на динамически добавляемые сценарии, по крайней мере, в Firefox (и, возможно, в Opera, хотя оно еще не поддерживает свойство).

В ветке форума также упоминается реализация кода асинхронного отслеживания Google, который, хотя и использует свойство async в соответствующем контексте, на самом деле, кажется, неправильно использует синтаксис. Google использует:

ga.async = true;

когда, очевидно, это не работает; правильный метод будет использовать либо:

ga.async = 'async';

или

ga.setAttribute('async', 'async');

Таким образом, исходя из моего текущего понимания, не все браузеры фактически будут выполнять динамически добавляемые сценарии сразу после их вставки в DOM; Firefox (и в конечном итоге Opera) потребуется установить свойство async, чтобы это всегда происходило.

Подробнее о реализации Firefox async здесь:

https://bugzilla.mozilla.org/show_bug.cgi?id=503481

Answer 4

Я верю, что вы правы.

В в собственных примерах Стива он не устанавливает атрибут async перед присоединением тега script к элементу head.

Мое понимание асинхронного атрибута заключается в том, что это способ сообщить браузеру, что вы не собираетесь манипулировать страницей с помощью document.write, чтобы он мог продолжать рендеринг вместо остановки Загрузите скрипт. См. Документацию для элемента скрипта по адресу mdc , который содержит немного больше о проблемах document.write / async.

Обратите внимание, что с вашей техникой вы не должны использовать document.write в любом случае, так как у вас нет возможности узнать, куда при жизни страницы будет загружен ваш скрипт.