Веб-заметки и Веб-подсказки

Стандарт HTML5 поддерживает возможность асинхронной загрузки скриптов, что может значительно ускорить общее время получения страницы.

Это связано с тем что в старом подходе все скрипты грузились и выполнялись по очереди. А с данным механизмом независимые скрипты могут действительно независимо и асинхронно грузится и выполнятся.

Пример:

<script async src="someAsyncScript.js" onload="someInit()"></script>
<script defer src="someDeferScript.js" onload="someInit()"></script>

Примечание: аргумент onload не обязателен.

Чем же отличаются атрибуты async и defer?
В обоих случаях мы получаем асинхронную загрузку скриптов. Разница заключается только в моменте, когда скрипт начинает выполнятся. Скрипт с атрибутом async выполнится при первой же возможности после его полной загрузки, но до загрузки объекта window. В случае использования атрибута defer — скрипт не нарушит порядок своего выполнения по отношению к остальным скриптам и его выполнение произойдет после полной загрузки и парсинга страницы, но до события DOMContentLoaded объекта document.

На сегодняшний день данный механизм не работает во всех веб-браузерах, и казалось бы — какой смысл в его использовании? Но можно на это посмотреть с другой стороны: применяя данный подход — мы значительно ускоряем загрузку своих сайтов в веб-навигаторах, которые поддерживают его, что уже хорошо, и тем самым создаем существенный стимул реализовать эту же возможность у тех, кто этого еще не сделал! :)
Учитывая то, что наши страницы не станут медленнее или менее работоспособными в старых браузерах, то на мой взгляд — это очень замечательное решение.

На данный момент этот механизм реализован в Firefox, начиная с версии 3.6, частично в IE9, и в браузерах, основанных на движке WebKit (Safari, Google Chrome).