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

HTML устроен таким образом, что веб-страница загружается последовательно строка за строкой, загружая по очереди все включенные в html-код элементы. И если один из них недоступен (например, не считывается javaScript с внешнего сайта), то дальнейшая загрузка сайта останавливается.

Когда нечитаемый JS находится в начале страницы посетитель может вообще ничего не увидеть.

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

К сожалению, не все рекламные сети предоставляют возможность асинхронной загрузки скриптов. Поэтому в этой статье я расскажу как исправить синхронный код загрузки на асинхронный. Если владелец это скрипта не предоставляет такой возможности.

Стандартная синхронная загрузка JS

Обычно вызов скрипта с внешнего сервера выглядит так:

<script src="http://www.site_name.com/script.js" type="text/javascript"></script>

Асинхронная загрузка скрипта как это делает Google/Adsense

Идею я подсмотрел у Google/Adsense. Чтобы скрипт загружался асинхронно от остального HTML кода необходимо в код вызова добавить async.

И теперь чтобы код загружался асинхронно наш вызов скрипта с внешнего сервера должен выглядеть так:

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

Как видите все просто. Правда работать это будет только в браузерах которые поддерживают стандарт HTML5. На момент написания этой статьи таких браузеров абсолютное большинство.

Предложенный вариант не является универсальным на 100%. Многие скрипты после внесения указанных изменений просто перестают работать. По отзывам в сети, это способ не работает если в скрипте используется элемент document.write.

Надежный вариант асинхронной загрузки

Если у вас не заработал первый предложенный вариант. То воспользуйтесь следующими рекомендациями. По сути это отложенная загрузка. Так как реальный вызов скрипта происходит в самом конце HTML страницы, то есть когда все необходимое содержимое страницы уже на экране.

В том месте страницы, где нужно отобразить результат работы JavaScript нужно создать пустой div блок:

<div id="script_block_0" class="script_block_0"></div>

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

<div id="script_ad_0" class="script_ad_0" style="display:none;">
// JavaScript который надо загрузить асинхронно
<script src="http://www.site_name.com/script.js" type="text/javascript"></script>
</div>
 
<script type="text/javascript">
   // переместить его в реальную позицию отображения
   document.getElementById('script_block_0').appendChild(document.getElementById('script_ad_0'));
   // показать
   document.getElementById('script_ad_0').style.display = 'block';
</script>

Если рекламных блоков несколько, то для каждого из них надо все повторить, создавая уникальные индивидуальные DIV блоки. Не забывайте менять имена классов и ID блоков DIV. В моем примере достаточно сменить цифру ноль, в новом блоке ее нужно заменить на 1 и так далее.

Этот вариант более сложный, но работает везде кроме очень древних браузеров таких как Internet Explorer 6. Который,к счастью, уже практически не встречается на компьютерах пользователей.

Практика применения рекомендаций из статьи

Указанные выше изменения (второй вариант) я внес в код вызова рекламной сети Advertur. После того как в один из дней мой сайт стал сильно тормозить из-за долгой загрузки Java скриптов этой рекламной системы. Результат меня полностью удовлетворил, сайт стал загружаться без задержек.

Благодарности

При написании статьи была использована информация со следующих сайтов:

1. http://loco.ru/materials/10-javascript-async