Асинхронный скрипт

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

Есть три метода выполнения скриптов

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

Запись опубликована в рубрике Уроки javascript и jQuery. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *