Асинхронная загрузка скриптов. Атрибут async

Асинхронная загрузка скриптов. Атрибут async

В связи с недавним падением Яндекса многие ощутили минусы наличия счетчиков метрики, рекламы от директа, т.к. многие сайты просто отказывались грузиться или висели очень долго. Есть простое и несложное решение этой проблемы. Нет, не удаление всех скриптов со страниц своего сайта. Решение это — использование асинхронной загрузки скриптов. Именно об этом сегодня и будет речь.

HTML страница устроена так, что строки загружаются одна за другой. И если в самом начале, хедере, у вас есть javascript файл, который на данный момент загрузиться не может, то загрузка все страницы существенно замедляется. Можно конечно поместить все javascript’ы в конец страницы и тогда они будут загружаться только после прогрузки основного контента. Но как быть с меню, с различными социальными кнопками и т.д.?

Давайте рассмотрим несколько вариантов загрузки скриптов.

JavaScript: синхронная загрузка скрипта

1

<script src="http://www.site.ru/script.js" type="text/javascript">

Вот таким образом выглядит обычная синхронная загрузка скрипта, когда код выполняется построчно друг за другом.

Асинхронная загрузка скрипта с помощью HTML5

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

1

<script async src="http://www.site.ru/script.js" type="text/javascript">

1

<script defer src="http://www.site.ru/script.js" type="text/javascript">

Отличие атрибутов async и defer

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

К сожалению, этот механизм на сегодняшний день не работает во всех браузерах (особенно это касается IE). Также не будет работать, если в файле script.js есть строки document.write.

Вариант асинхронной загрузки JavaScript’ов от Google

Как уже известно, Google печется о скорости загрузки сайтов и частенько понижает в выдаче медленные сайты. В итоге специалисты Google предложили свое решение для асинхронной загрузки JavaScript.
Чтобы использовать, просто заменяем

<script src=”…”>

на

<script extsrc=”…”>

И подключаем файл скрипта extsrc.js

Получится так:

1
2

<script src="http://extsrcjs.googlecode.com/svn/trunk/extsrc.js">
<script extsrc="....">

Но и этот метод не подойдет к файлам с document.write.

Универсальный способ для асинхронной загрузки скриптов JS для всех браузеров

Работает даже с document.write. В том месте страницы, где нужно реально отобразить наш элемент создаем пустой div блок:

1

<div id="script_block" class="script_block">div>

В самом конце страницы перед закрывающим тэгом body вставляем скрипт для асинхронной загрузки файлов:

1
2

<div id="script_ad" class="script_ad" style="display:none;">
Здесь любой файл или скрипт, который нужно загрузить.div>

1
2
3
4
5
6

<script type="text/javascript">
   // переместить его в реальную позицию отображения
   document.getElementById('script_block').appendChild(document.getElementById('script_ad'));
   // показать
   document.getElementById('script_ad').style.display = 'block';

В самых старых версиях IE (6 и ниже) асинхронная загрузка к сожалению не работает, но таких пользователей уже практически нет. Все остальные браузеры и сервисы успешно пользуются современной ускоренной загрузкой web-страниц.

Лично я использую на данный момент атрибут async. Проверку этот метод прошел в тот самый момент, когда лежал Яндекс. Вы же вольны выбрать для себя любой из предложенных методов, который вам больше по душе.

Оригинал статьи на http://www.rusdigi.name/asinkhronnaya-zagruzka-skriptov-atribut-async/

Учебное пособие по кэшированию, часть 1

Учебное пособие по кэшированию. Часть 2