Понятие асинхронный скрипт относится к методу которым этот скрипт будет выполняться, что оказывает влияние на скорость загрузки страницы.
Есть три метода выполнения скриптов
1. Синхронное выполнение.
2. Асинхронное выполнение.
3. Асинхронно-последовательное выполнение.
Рассмотрим по порядку.
Синхронное выполнение — браузер выполняет скрипт последовательно со всеми элементами страницы.
Такое выполнение кода в теге script происходит как бы по умолчанию, то есть в тех случаях, когда для этого нет специальных указаний, о которых чуть ниже.
Происходит это следующим образом: браузер начинает открывать страницу с верху, доходит до тега script, выполняет его, и только потом продолжит выполнять оставшуюся часть.
Такой метод имеет существенный недостаток. Если script расположен в начале страницы, например в теге head (шапка сайта), то пока он не выполнится, на экране ничего не появится.
А если интернет соединение слабое, или сервер перегружен, а страница открывается впервые и у браузера нет кешированой копии, то пользователь скорее всего не станет ждать когда там что-то появится и уйдёт на другой сайт.
Решается эта проблема асинхронным выполнением скрипта.
Асинхронное выполнение (загрузка) позволяет браузеру выводить на экран сначала то что полегче, текст например, а уж потом выполнять скрипты.
Чтобы реализовать этот метод в тег script вводится атрибут async
<script src="/js/one.js" async></script>Вот теперь браузер не будет задерживать на скрипте всю страницу, и выполнит его сразу после того как он загрузится.
Теперь представим, что на странице подключено несколько скриптов и последовательность их выполнения должна быть строго соблюдена.
А если один и них окажется легче предыдущего и загрузится, а значит и начнёт выполняться быстрее?
В таких случаях применяется асинхронно-последовательное выполнение скриптов.
Асинхронно-последовательное выполнение, так же как и просто асинхронное, позволяет браузеру открывать страницу, не дожидаясь загрузки скриптов, но выполняться они будут в той последовательности, в которой прописаны в коде.
Даже если второй скрипт загрузится раньше, он будет ждать пока не заработает первый.
Реализуется метод введением в тег script атрибута defer
<script src="/js/one.js" async></script>
<script src="/js/tvo.js" defer></script>Ещё одной особенностью defer является то, что скрипт с этим атрибутом, даже если он на странице один, не заработает пока не загрузится вся страница.
Например, онлайн калькулятор не будет работать до полной загрузки.
Подключение javascript < < < В раздел > > > Структура javascript
