async и defer — асинхронная загрузка javascript кода


async и defer — опции, которые позволяют реализовать асинхронность загрузки javascript кода относительно процесса рендеринга html и отложенную загрузку js.

Асинхронность в javascript — представляет собой правило в соответствии с которым блоки JS кода обрабатываются браузером параллельно с загрузкой DOM — структуры веб-страницы или после загрузки DOM.



Код на JS, как известно, помещается между тегами <script> </script>. При этом код может содержаться как в HEAD документа, так и в BODY — при этом в любой части документа. Также javascript можно подгружать с других доменов.



Обычно JS помещают в конце страницы именно из тех соображений, что на обработку кода уходит определенное время. Загрузка страницы при этом приостанавливается — DOM не может загрузиться поскольку ждет завершения исполнения скритпа на javascript.



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



! Затем загрузка остановится до того момента пока выполнение скрипта не завершится.



Посетитель сайта заметит это с большей вероятностью особенно если он использует медленное соединение с Интернетом.



Чаще всего посетитель с сайта, страница которого перестала загружаться на половине, уйдет не дождавшись пока скрипт отработает до конца.

Задержки, таким образом, очень нежелательны.


синхронность в javascript


async и defer — опции подключения js скриптов, позволяющие поменять порядок выполнения кода на странице



async


Чтобы исправить ситуацию предусмотрена опция async, она позволяет загружать JS асинхронно. Структура документа при использовании документа и все элементы страницы не будут ждать завершения исполнения скрипта.



Скрипт инициируется, страница продолжит загружаться даже если скрипт не завершил свою работу. Какой-то функционал страницы при этом может работать некорректно (если в javascript коде есть ошибки). В целом же страница загружается и посетитель сайта может с ней работать.


async defer


Стоит отметить, что async не поддерживается некоторыми версиями Internet Explorer. Но поскольку пользуется им очень маленькое количество пользователей — обычно имеет смысл этим пренебречь и использовать асинхронность в javascript.



defer

Альтернативой async может быть defer. При использовании данного атрибута скрипт будет исполняться только после загрузки DOM. 



Директива поддерживается всеми браузерами. Ее особенность в том, что она обрабатывает JS скрипты в том порядке, в котором они подключаются. Это может быть как плюсом, так и минусом.

Если порядок выполнения скриптов принципиален — defer — лучшее решение. async можно принудительно отключить: script.async=false;



Минус в том, что если один скрипт подключается с внешнего недоступного ресурса остальные скрипты отрабатывать не будут.

Они будут ждать этот независимо от того насколько он важен в целом.



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

Сказать спасибо
Categories: