загрузка скрипта через js
Внешние скрипты, порядок исполнения
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/script-async-defer.
Если JavaScript-кода много – его выносят в отдельный файл, который подключается в HTML:
Здесь /path/to/script.js – это абсолютный путь к файлу, содержащему скрипт (из корня сайта).
Браузер сам скачает скрипт и выполнит.
Можно указать и полный URL, например:
Вы также можете использовать путь относительно текущей страницы. Например, src=»https://learn.javascript.ru/lodash.js» обозначает файл из текущей директории.
Чтобы подключить несколько скриптов, используйте несколько тегов:
Как правило, в HTML пишут только самые простые скрипты, а сложные выносят в отдельный файл.
Браузер скачает его только первый раз и в дальнейшем, при правильной настройке сервера, будет брать из своего кеша.
Благодаря этому один и тот же большой скрипт, содержащий, к примеру, библиотеку функций, может использоваться на разных страницах без полной перезагрузки с сервера.
В одном теге SCRIPT нельзя одновременно подключить внешний скрипт и указать код.
Вот так не сработает:
Асинхронные скрипты: defer/async
Браузер загружает и отображает HTML постепенно. Особенно это заметно при медленном интернет-соединении: браузер не ждёт, пока страница загрузится целиком, а показывает ту часть, которую успел загрузить.
Динамическая загрузка скриптов в JavaScript
При создании сайтов, а именно при верстке часто возникают такие ситуации, когда нужно динамически загрузить тот или иной модуль для того, чтобы получить доступ к функционалу предоставляемому данным модулем. Для таких случаев может использоваться механизм динамической загрузки JavaScript файлов.
Скрипт очень простой:
// здесь создаем объект-обертку, дабы не загрязнять глобальное пространство имен
var loader = loader || <>
loader.importJS = function( uri ) <
// создаем новый тег script
let script = document.createElement(‘script’);
// получаем ссылку на тег head документа
let head = document.getElementsByTagName(‘head’)[0];
// устанавливаем тип и uri
script.type = ‘text/javascript’;
script.src = uri;
// загружаем скрипт в тег head
head.appendChild(script);
>
loader.importJS(‘https://cdnjs.cloudflare.com/ajax/libs/timeago.js/3.0.2/timeago.js’)
// timeago().format(new Date())
Таким образом, можно просто осуществить динамическую загрузку JavaScript библиотек.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Скрипты: async, defer
В современных сайтах скрипты обычно «тяжелее», чем HTML: они весят больше, дольше обрабатываются.
Это ведёт к двум важным проблемам:
Конечно, есть пути, как это обойти. Например, мы можем поместить скрипт внизу страницы. Тогда он сможет видеть элементы над ним и не будет препятствовать отображению содержимого страницы:
Но это решение далеко от идеального. Например, браузер замечает скрипт (и может начать загружать его) только после того, как он полностью загрузил HTML-документ. В случае с длинными HTML-страницами это может создать заметную задержку.
Такие вещи незаметны людям, у кого очень быстрое соединение, но много кто в мире имеет медленное подключение к интернету или использует не такой хороший мобильный интернет.
К счастью, есть два атрибута тега
. содержимое после скрипта.
Следующий пример это показывает:
Отложенные с помощью defer скрипты сохраняют порядок относительно друг друга, как и обычные скрипты.
Поэтому, если сначала загружается большой скрипт, а затем меньшего размера, то последний будет ждать.
Браузеры сканируют страницу на предмет скриптов и загружают их параллельно в целях увеличения производительности. Поэтому и в примере выше оба скрипта скачиваются параллельно. small.js скорее всего загрузится первым.
Атрибут defer будет проигнорирован, если в теге
. содержимое после скриптов.
Асинхронные скрипты очень полезны для добавления на страницу сторонних скриптов: счётчиков, рекламы и т.д. Они не зависят от наших скриптов, и мы тоже не должны ждать их:
Динамически загружаемые скрипты
Мы можем также добавить скрипт и динамически, с помощью JavaScript:
Динамически загружаемые скрипты по умолчанию ведут себя как «async».
Мы можем изменить относительный порядок скриптов с «первый загрузился – первый выполнился» на порядок, в котором они идут в документе (как в обычных скриптах) с помощью явной установки свойства async в false :
Например, здесь мы добавляем два скрипта. Без script.async=false они запускались бы в порядке загрузки ( small.js скорее всего запустился бы раньше). Но с этим флагом порядок будет как в документе:
Итого
У async и defer есть кое-что общее: они не блокируют отрисовку страницы. Так что пользователь может просмотреть содержимое страницы и ознакомиться с ней сразу же.
Но есть и значимые различия:
Пользователь может знакомиться с содержимым страницы, читать её, но графические компоненты пока отключены.
Поэтому обязательно должна быть индикация загрузки, нерабочие кнопки – отключены с помощью CSS или другим образом. Чтобы пользователь явно видел, что уже готово, а что пока нет.
На практике defer используется для скриптов, которым требуется доступ ко всему DOM и/или важен их относительный порядок выполнения.
А async хорош для независимых скриптов, например счётчиков и рекламы, относительный порядок выполнения которых не играет роли.
Динамическая загрузка внешних JavaScript-файлов
[Disclaimer: Данная статья была переведена в рамках «Конкурса на лучший перевод статьи» на сервисе Quizful. Ссылка на оригинал находится внизу страницы.]
Попробовал запустить – получил ошибку времени выполнения «Undetermined string constant (неопределенная строковая константа)».
Что, во имя всего святого, это могло бы значить?
Но отыскать ответ на свой вопрос мне удалось только после прочтения JavaScript: The Definitive Guide Дэвида Фланагана. В общем, содержимое тэга тэгом следующим образом: (что и сделано в нижеуказанном фрагменте кода). Экранирование предотвращает нежелательное выполнение JavaScript-строки, содержащей тэг
Метод staticLoadScript() в этом примере должен быть вызван, пока страница загружается (т.к. он использует document.write(), чтобы создать
В отличие от staticLoadScript() из предыдущего примера, метод dhtmlLoadScript() может быть вызван в любой момент выполнения программы, правда, документ должен быть хотя бы частично загружен в браузер. В указанном выше фрагменте, документ гарантированно будет загружен к моменту вызова dhtmlLoadScript(), т.к. вызов происходит в обработчике onload.
Ограничения
Приведенный выше метод dhtmlLoadScript() будет работать только в браузерах, поддерживающих динамическое добавление элементов к странице, используя DOM (Document Object Model). А значит, этот метод не заработает в Netscape версии ниже 6, а также Opera 7 и ниже. Я не считаю, это реальной проблемой, врядли кто-либо в здравом уме будет поддерживать эти давно устаревшие браузеры, по крайней мере, если на это нет чертовски хорошей причины.
Если Вам понравилась статья, проголосуйте за нее
Голосов: 10 Голосовать 
Загрузка ресурсов: onload и onerror
Браузер позволяет отслеживать загрузку сторонних ресурсов: скриптов, ифреймов, изображений и др.
Для этого существуют два события:
Загрузка скриптов
Допустим, нам нужно загрузить сторонний скрипт и вызвать функцию, которая объявлена в этом скрипте.
Мы можем загрузить этот скрипт динамически:
…Но как нам вызвать функцию, которая объявлена внутри того скрипта? Нам нужно подождать, пока скрипт загрузится, и только потом мы можем её вызвать.
Для наших собственных скриптов мы можем использовать JavaScript-модули, но они не слишком широко распространены в сторонних библиотеках.
script.onload
Таким образом, в обработчике onload мы можем использовать переменные, вызывать функции и т.д., которые предоставляет нам сторонний скрипт.
…А что если во время загрузки произошла ошибка? Например, такого скрипта нет (ошибка 404), или сервер был недоступен.
script.onerror
Например, давайте запросим скрипт, которого не существует:
Обратите внимание, что мы не можем получить описание HTTP-ошибки. Мы не знаем, была ли это ошибка 404 или 500, или какая-то другая. Знаем только, что во время загрузки произошла ошибка.
Обработчики onload / onerror отслеживают только сам процесс загрузки.
Другие ресурсы
Однако есть некоторые особенности:
Такое поведение сложилось по историческим причинам.
Ошибка в скрипте с другого источника
Или, если быть более точным, один источник (домен/порт/протокол) не может получить доступ к содержимому с другого источника. Даже поддомен или просто другой порт будут считаться разными источниками, не имеющими доступа друг к другу.
Это правило также касается ресурсов с других доменов.
Если мы используем скрипт с другого домена, и в нем имеется ошибка, мы не сможем узнать детали этой ошибки.
Теперь загрузим этот скрипт с того же сайта, на котором он лежит: