В чем же преимущество атрибута асинхронности HTML5 на элементах script?

У меня есть некоторая путаница вокруг нового асинхронного атрибута с элементом script в HTML5, и я надеюсь, что кто-то может дать четкий ответ.

Браузеры способны к параллельным соединениям, поэтому изображения будут загружаться параллельно. Но любой внешний javascript не загружается параллельно с другими внешними javascript и изображениями. Скрипты блокируют загрузку страницы до тех пор, пока они не будут загружены и не выполнены.

Чтобы загрузить script, не блокируя остальную загрузку страницы, наиболее распространенным методом является создание элемента script, например, фрагмента Google Analytics:

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

Я не уверен, как это работает точно - либо

браузер анализирует и отображает страницу, а затем, как только он закончил, он замечает, что DOM изменился, в результате чего загружается и выполняется ga.js script

или

браузер начинает загрузку javascript параллельно с другими ресурсами.

Я думаю, что это последний.

Новый асинхронный фрагмент Google Analytics включает атрибут асинхронного HTML5 в созданном им элементе script. Это не поможет проблему блокировки страницы, которая уже была решена методом "Script DOM Element". Итак, что добавляет асинхронное изображение? Согласно w3schools, "если присутствует async, script выполняется асинхронно с остальной частью страницы (script будет выполнен, пока страница продолжит разбор)".

И, согласно сайту Стива Судерса, "основное преимущество этого [асинхронного атрибута] заключается в том, что он сообщает браузеру, что последующие скрипты могут быть выполнены немедленно - им не нужно ждать ga.js".

Итак, как асинхронный и script метод элементов DOM обе решают одну и ту же проблему?

Спасибо.

Ответ 1

Асинхронный атрибут просто более ясен (без какой-либо двусмысленности очень простой) и более чистого (он будет или уже является частью уважаемой спецификации HTML5) для решения проблемы. Если ваш сайт обслуживает сценарии из другого домена (или CDN), тогда асинхронный атрибут дает вам небольшую надежность (разрешить пользователю, по крайней мере, читать статическое содержимое) тем, что страница не будет блокироваться при script от медленного ( возможно, вниз) удаленный хост пытается загрузить.

Ответ 2

Будет работать:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>$('body').append('Yey');</script>

Не работает:

<script async src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>$('body').append('Yey');</script>

Ответ 3

В html5rocks была опубликована статья от Джейка Арчибальда по html5rocks.

Ответ 4

В соответствии с https://www.html5rocks.com/en/tutorials/speed/script-loading/, если элемент <script> добавлен динамически, он может не выполняться до тех пор, пока DOMContentLoaded не будет запущен. То есть некоторые пользовательские агенты (например, MSIE 10) будут ждать, пока DOM будет готова, прежде чем запускать динамически добавленные элементы <script>.

Я думаю, что Google хочет, чтобы их аналитический код работал быстрее на этих пользовательских агентах, и поэтому они должны добавить флаг async, чтобы сообщить браузеру (например, MSIE 10), что нормально начать выполнение script, как только насколько это возможно. Совместимые с HTML5 браузеры будут выполняться так, как будто async true, даже если он не был определен, поэтому async=true был добавлен только для повышения производительности с помощью браузеров, отличных от HTML5.