Новые возможности html5 – асинхронная загрузка JavaScript

Новые возможности html5 – асинхронная загрузка JavaScript

Большинство веб программистов знают, что скрипты на странице выполняются последовательно. Более того, если скрипт загружается из файла, то пока он не отработает - страница не загружается дальше.

Именно поэтому, при выполнении клиентской оптимизации весь JavaScript код стараются вынести в самый низ страницы. Особенно это актуально для больших файлов с библиотеками. Это позволяет, снизить время ожидания пользователя до появления текста на странице.

С появлением html 5 ситуация с загрузкой скриптов несколько изменилась. Да по умолчанию поведение остается прежним, однако у тега script появился новый атрибут async. Об этом атрибуте и пойдет речь в этом посте.

Начнем с того, что расскажем, с каких версий браузеров существует поддержка атрибута: Intenet Explorer начиная с 11.0 версии, Chrome начиная с 8.0 версии, Opera с 15.0 версии, Safari с 5.1, Firefox с 3.6, Androin с 3.0, iOS с 5.0.

Что же это за атрибут?

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

Как написать задать атрибут async?

Атрибут не имеет значений, поэтому указывается следующим образом:

На что следует обратить внимание?

Так как скрипт работает в асинхронном режиме, то следует это учитывать. Например, вдруг вы захотите асинхронно загрузить файл с jQuery, то код такого типа, скорее всего, работать не будет:

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

Чтобы разрешить ситуацию, указанный код надо переписать с использованием события onload, которое навешивается на тег script с асинхронной загрузкой.

В частности одним из решений может стать следующее:

Такой код будет работать несколько иначе. В частности, после того, как будет загружен jQuery, сработает событие onload. По этому событию будет выполнена функция initLinks(), навешивающая класс на все ссылки на странице.

Данный атрибут открывает большие возможности, но использовать его стоит с осторожностью во избежание ошибок.

Нет комментариев.
Добавить комментарий
Вам необходимо включить показ изображений в браузере для того чтобы увидеть код

Дайте нам знать, что вы - живой человек. Для нас это важно!
Кликните, если плохо видно

Прежде чем высказать свое мнение, прочитайте пожалуйста: правила

Рейтинг@Mail.ru