Асинхронная загрузка JavaScript

В этой небольшой заметке я бы хотел поговорить о наболевшем — о производительности. Вы наверное уже не раз встречались с неимоверное долгой загрузкой страниц обвешанных кучей JS и CSS.

Сегодня я поделюсь несколькими трюками, которые помогут вам сделать фоновую подгрузку всех этих ресурсов, не блокируя загрузку основного контента сайта. И так для начала простое свойство async, которое поддерживается большинством современных браузеров:

<script async src="js/my-script.js"></script>

Обратие внимание, что это может поломать работу ваших функций вызова, например если вы подключите библиотеку jQuery, что бы избежать данного трабла используйте в функции вызова событие onload:

<script>function init() {
 $('a').addClass('ajax');
}</script>
<script src="/jquery.js" async onload="init()"></script>