Html. Javascript. Как асинхронно подключить скрипты?


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

Частично помогает известный метод переноса скриптов в конец страницы — но это также не 100% выход. Т.к. скрипты все равно будут подгружаться последовательно и после отображения всей страницы, что, например, плохо для различных счетчиков посещений.

Помочь решить проблему могут следующий два аттрибута:

Атрибут async
Этот атрибут работает во всех браузерах, кроме IE9-. С его помощью скрипт будет выполнятся полностью асинхронно. Это значит, что при указании

В этом примере первым будет выполнен тот скрипт, который будет первым загружен.

Но что делать, если нужно асинхронно загрузить зависимые скрипты?


Данный код позволяет асинхронно загружать скрипты, но при этом придерживаться их порядку. Т.е. независимо от того, какой скрипт будет загружен раньше - выполняться они будут строго в нужной последовательности.

Также следует отметить, что скрипты с атрибутом async выполнятся после загрузки, а скрипты с атрибутом defer обязательно дождутся ПОЛНОЙ загрузки страницы.

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

, ,

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

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