Является ли атрибут / свойство «async» полезным, если сценарий динамически добавляется в DOM?
Этот вопрос является своего рода касательной к , какие браузеры поддерживают .
В последнее время я видел несколько сценариев, которые делают что-то вроде этого:
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://www.example.com/script.js';
document.getElementsByTagName('head')[0].appendChild(s);
Это распространенный способ динамического добавления сценария в DOM, который, IIRC из книги Стива Соудерса " Даже Faster Web Sites "предлагает всем современным браузерам загружать скрипт асинхронно (т.е. не блокировать рендеринг страниц или загрузку последующих ресурсов).
Если я прав в этом, выполняет s. async = true оператор имеет какое-либо применение? Не будет ли это избыточным даже для браузеров, которые поддерживают это свойство, поскольку динамически добавляемый скрипт должен уже запускать асинхронную загрузку?
2 ответа
Я считаю, что вы правильный.
В собственных примерах Стива он не устанавливает атрибут async перед присоединением тега сценария к элементу заголовка.
Насколько я понимаю, атрибут async заключается в том, что это способ сообщить браузеру, что вы не собираетесь манипулировать страницей, с помощью document.write, чтобы он мог продолжить рендеринг вместо того, чтобы останавливаться на загрузить скрипт. См. Документацию по элементу сценария на сайте mdc , в котором содержится дополнительная информация о проблемах document.write / async.
Обратите внимание, что с вашей техникой вам все равно не следует использовать document.write, поскольку у вас нет возможности узнать, где в течение времени жизни страницы будет загружен ваш скрипт.
Интересно - мне кажется, оказывается, что я ошибался в своих предположениях.
На основании этой ветки на форуме разработчиков 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 здесь: