Асинхронная загрузка скриптов. Атрибут 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/



Комментарии к этой заметке больше не принимаются.



Рейтинг популярности - на эти заметки чаще всего ссылаются:

сентябрь, 2015
пн вт ср чт пт сб вс
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
  • География читателей:

Последние статьи:

193 ключевых фактора ранжирования в Google 193 ключевых фактора ранжирования в Google Поисковые системы (Google, "Яндекс", Bing, Go.mail.ru) используют для ранжирования сайтов сотни факторов. ..
2016-06-24
Директива RewriteCond Интерпретация: Если у вас Netscape Navigator (который идентифицируется как 'Mozilla'), вы выдаете ..
2016-08-01
За не очень высоким забором... За не очень высоким забором... Покошу, когда станет теплее. Когда приеду, день будет ветреный, и деревья будут шуметь за не очень высоким ..
2016-11-15
Посредством этой статьи... А ПОСРЕДСТВОМ (спорта, политического влияния, дружбы, любви, и всякого прочего) можно что-то сделать, ..
2016-11-20
Факты ранжирования Google. Периодическая таблица ранжировани Факты ранжирования Google. Периодическая таблица ранжировани Что касается веса следующих факторов, здесь мнения редакции Search Engine Land и специалистов, принявших ..
2017-05-09