Что произойдет если в теге script задана ссылка на внешний файл скрипта
Время чтения: меньше 5 мин
Обновлено 13 декабря 2021
Итого
У async и defer есть кое-что общее: они не блокируют отрисовку страницы. Так что пользователь может просмотреть содержимое страницы и ознакомиться с ней сразу же.
Но есть и значимые различия:
Порядок | DOMContentLoaded | |
---|---|---|
async | Порядок загрузки (кто загрузится первым, тот и сработает). | Не имеет значения. Может загрузиться и выполниться до того, как страница полностью загрузится. Такое случается, если скрипты маленькие или хранятся в кеше, а документ достаточно большой. |
defer | Порядок документа (как расположены в документе). | Выполняется после того, как документ загружен и обработан (ждёт), непосредственно перед DOMContentLoaded . |
Пожалуйста, помните, что когда вы используете defer , страница видна до того, как скрипт загрузится.
Пользователь может знакомиться с содержимым страницы, читать её, но графические компоненты пока отключены.
Поэтому обязательно должна быть индикация загрузки, нерабочие кнопки – отключены с помощью CSS или другим образом. Чтобы пользователь явно видел, что уже готово, а что пока нет.
На практике defer используется для скриптов, которым требуется доступ ко всему DOM и/или важен их относительный порядок выполнения.
А async хорош для независимых скриптов, например счётчиков и рекламы, относительный порядок выполнения которых не играет роли.
В этой части учебника мы изучаем собственно JavaScript, сам язык.
Но нам нужна рабочая среда для запуска наших скриптов, и, поскольку это онлайн-книга, то браузер будет хорошим выбором. В этой главе мы сократим количество специфичных для браузера команд (например, alert ) до минимума, чтобы вы не тратили на них время, если планируете сосредоточиться на другой среде (например, Node.js). А на использовании JavaScript в браузере мы сосредоточимся в следующей части учебника.
Итак, сначала давайте посмотрим, как выполнить скрипт на странице. Для серверных сред (например, Node.js), вы можете выполнить скрипт с помощью команды типа "node my.js" . Для браузера всё немного иначе.
Как это понять
HTML — создаёт структуру веб-страницы, CSS-стили — её внешний вид, а скрипты — определяют поведение страницы. С помощью скриптов можно «оживить» страницу, добавить анимацию и другие эффекты.
Скрипты пишут на разных языках, самый популярный из которых — JavaScript.
Лучше добавлять скрипты из внешнего файла. Это поможет быстро добавлять одинаковые функции на разные страницы или сайты, а также редактировать и контролировать всё в одном месте. Пользователю это поможет ускорить загрузку страницы, так как файл со скриптами сохранится на компьютере при первой загрузке.
Кратко
Скрипт — это элемент кода, который позволяет совершать действия, включать анимацию и создавать другие эффекты на странице. Чтобы добавить скрипты, используй тег .
Как и CSS-стили, скрипты можно прописать внутри кода страницы, либо добавить как внешний документ по ссылке.
Теги можно располагать в любом месте в заголовке . . . < / head>или теле . . . < / body>HTML-документа. Но лучше всего добавлять их в самый конец перед закрывающим тегом < / body>.
Спецификация
Алёна Батицкая
🛠 Почему нужно писать в конце разметки, перед < / body>?
При загрузке страницы браузер читает код сверху вниз. В момент, когда он доходит до тега он останавливается и сперва читает что там, в этом теге . В этот момент вся остальная страница простаивает и не загружается. Если код внутри большой, то это может существенно повлиять на скорость загрузки страницы.
По этой причине принято ставить теги в самом конце разметки, перед закрывающим тегом < / body>. Тогда браузер, дойдя до скриптов, уже загрузит всю страницу и пользователь сможет взаимодействовать с контентом.
Размещение в других частях разметки без очевидной надобности считается плохой практикой.
🛠 Один скрипт — один .
Нельзя одновременно написать код внутри тега и в нём же указать атрибут src со ссылкой на внешний файл. Браузер пойдёт по ссылке за кодом, а то, что написано внутри проигнорирует.
Поэтому если нужно и подключить внешний файл и написать код внутри разметки — используй два отдельных тега.
🛠 Порядок имеет значение.
Если ты используешь какие-то сторонние библиотеки при разработке сайта, то обрати внимание на порядок подключения скриптов — на порядок, в котором следуют теги script с путями до разных файлов.
Обычно достаточно в точности скопировать код из инструкции по работе с библиотекой.
Начинающие разработчики частенько игнорируют порядок подключения и потом ищут причины почему у них не работает то, что работать должно 🙃
Самым частым примером является подключение библиотеки, написанной с использованием jQuery. Чтобы код верно работал, в первом теге script нужно подключить саму библиотеку jQuery, а уже затем, ниже, в следующем теге script подключать остальной код библиотеки.
🛠 Библиотекой называют код, написанный сторонним разработчиком или группой разработчиков, и доступный для свободного использования в качестве готовой подпрограммы на вашем сайте. Например, эта библиотека пригодится, если нужен простой удобный слайдер.
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Если JavaScript-кода много – его выносят в отдельный файл, который подключается в HTML:
Здесь /path/to/script.js – это абсолютный путь к файлу, содержащему скрипт (из корня сайта).
Браузер сам скачает скрипт и выполнит.
Можно указать и полный URL, например:
Вы также можете использовать путь относительно текущей страницы. Например, src="https://learn.javascript.ru/lodash.js" обозначает файл из текущей директории.
Чтобы подключить несколько скриптов, используйте несколько тегов:
Как правило, в HTML пишут только самые простые скрипты, а сложные выносят в отдельный файл.
Браузер скачает его только первый раз и в дальнейшем, при правильной настройке сервера, будет брать из своего кеша.
Благодаря этому один и тот же большой скрипт, содержащий, к примеру, библиотеку функций, может использоваться на разных страницах без полной перезагрузки с сервера.
В одном теге SCRIPT нельзя одновременно подключить внешний скрипт и указать код.
Вот так не сработает:
Нужно выбрать: либо SCRIPT идёт с src , либо содержит код. Тег выше следует разбить на два: один – с src , другой – с кодом, вот так:
Тег «script»
Программы на JavaScript могут быть вставлены в любое место HTML-документа с помощью тега .
Вы можете запустить пример, нажав на кнопку «Play» в правом верхнем углу блока с кодом выше.
Тег содержит JavaScript-код, который автоматически выполнится, когда браузер его обработает.
Примечание
В HTML5 атрибут type можно опустить, он является необязательным и принимает значение text/javascript , если не указан явно. В предыдущих версиях HTML атрибут type необходим.
Атрибуты
async Загружает скрипт асинхронно. defer Откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью. language Устанавливает язык программирования на котором написан скрипт. src Адрес скрипта из внешнего файла для импорта в текущий документ. type Определяет тип содержимого тега .
Современная разметка
Тег имеет несколько атрибутов, которые редко используются, но всё ещё могут встретиться в старом коде:
Старый стандарт HTML, HTML4, требовал наличия этого атрибута в теге . Обычно он имел значение type="text/javascript" . На текущий момент этого больше не требуется. Более того, в современном стандарте HTML смысл этого атрибута полностью изменился. Теперь он может использоваться для JavaScript-модулей. Но это тема не для начального уровня, и о ней мы поговорим в другой части учебника.
Атрибут language : language=…>
Этот атрибут должен был задавать язык, на котором написан скрипт. Но так как JavaScript является языком по умолчанию, в этом атрибуте уже нет необходимости.
Обёртывание скрипта в HTML-комментарии.
В очень древних книгах и руководствах вы сможете найти комментарии внутри тега , например, такие:
Этот комментарий скрывал код JavaScript в старых браузерах, которые не знали, как обрабатывать тег . Поскольку все браузеры, выпущенные за последние 15 лет, не содержат данной проблемы, такие комментарии уже не нужны. Если они есть, то это признак, что перед нами очень древний код.
Закрывающий тег
HTML 4.01 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Результат работы скрипта
В данном примере с помощью скрипта выводится таблица, состоящая из пяти строк и столбцов, которая заполняется числами.
HTML5 IE Cr Op Sa Fx
Подсказки
💡 Обычно скрипты, которые должны выполняться первыми, помещают в заголовок страницы.
На практике
Описание
Тег предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке. Скрипты могут располагаться во внешнем файле и связываться с любым HTML-документом. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах.
может располагаться в заголовке или теле HTML-документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа.
Внешние скрипты
Если у вас много JavaScript-кода, вы можете поместить его в отдельный файл.
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
3.0+ | 1.0+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Как пишется
Тег — парный, его всегда нужно закрывать с помощью < / script>. Если ты подключаешь внешние скрипты по ссылке, то внутри тега ничего писать не надо. Но закрыть тег всё равно придётся.
Если добавить скрипты в код, то выглядеть это будет так:
defer
Атрибут defer сообщает браузеру, что он должен продолжать обрабатывать страницу и загружать скрипт в фоновом режиме, а затем запустить этот скрипт, когда DOM дерево будет полностью построено.
Вот тот же пример, что и выше, но с defer :
- Скрипты с defer никогда не блокируют страницу.
- Скрипты с defer всегда выполняются, когда дерево DOM готово, но до события DOMContentLoaded .
Следующий пример это показывает:
- Содержимое страницы отобразится мгновенно.
- Событие DOMContentLoaded подождёт отложенный скрипт. Оно будет сгенерировано, только когда скрипт (2) будет загружен и выполнен.
Отложенные с помощью defer скрипты сохраняют порядок относительно друг друга, как и обычные скрипты.
Поэтому, если сначала загружается большой скрипт, а затем меньшего размера, то последний будет ждать.
Браузеры сканируют страницу на предмет скриптов и загружают их параллельно в целях увеличения производительности. Поэтому и в примере выше оба скрипта скачиваются параллельно. small.js скорее всего загрузится первым.
Но спецификация требует последовательного выполнения скриптов согласно порядку в документе, поэтому он подождёт выполнения long.js .
Атрибут defer будет проигнорирован, если в теге нет src .
Динамически загружаемые скрипты
Мы можем также добавить скрипт и динамически, с помощью JavaScript:
Скрипт начнёт загружаться, как только он будет добавлен в документ (*) .
Динамически загружаемые скрипты по умолчанию ведут себя как «async».
- Они никого не ждут, и их никто не ждёт.
- Скрипт, который загружается первым – запускается первым (в порядке загрузки).
Мы можем изменить относительный порядок скриптов с «первый загрузился – первый выполнился» на порядок, в котором они идут в документе (как в обычных скриптах) с помощью явной установки свойства async в false :
Например, здесь мы добавляем два скрипта. Без script.async=false они запускались бы в порядке загрузки ( small.js скорее всего запустился бы раньше). Но с этим флагом порядок будет как в документе:
Асинхронные скрипты: defer/async
Браузер загружает и отображает HTML постепенно. Особенно это заметно при медленном интернет-соединении: браузер не ждёт, пока страница загрузится целиком, а показывает ту часть, которую успел загрузить.
Если браузер видит тег , то он по стандарту обязан сначала выполнить его, а потом показать оставшуюся часть страницы.
Например, в примере ниже – пока все кролики не будут посчитаны – нижний
не будет показан:
Такое поведение называют «синхронным». Как правило, оно вполне нормально, но есть важное следствие.
Если скрипт – внешний, то пока браузер не выполнит его, он не покажет часть страницы под ним.
То есть, в таком документе, пока не загрузится и не выполнится big.js , содержимое будет скрыто:
И здесь вопрос – действительно ли мы этого хотим? То есть, действительно ли оставшуюся часть страницы нельзя показывать до загрузки скрипта?
Есть ситуации, когда мы не только НЕ хотим такой задержки, но она даже опасна.
Например, если мы подключаем внешний скрипт, который показывает рекламу или вставляет счётчик посещений, а затем идёт наша страница. Конечно, неправильно, что пока счётчик или реклама не подгрузятся – оставшаяся часть страницы не показывается. Счётчик посещений не должен никак задерживать отображение страницы сайта. Реклама тоже не должна тормозить сайт и нарушать его функциональность.
А что, если сервер, с которого загружается внешний скрипт, перегружен? Посетитель в этом случае может ждать очень долго!
Вот пример, с подобным скриптом (стоит искусственная задержка загрузки):
Можно поставить все подобные скрипты в конец страницы – это уменьшит проблему, но не избавит от неё полностью, если скриптов несколько. Допустим, в конце страницы 3 скрипта, и первый из них тормозит – получается, другие два его будут ждать – тоже нехорошо.
Кроме того, браузер дойдёт до скриптов, расположенных в конце страницы, они начнут грузиться только тогда, когда вся страница загрузится. А это не всегда правильно. Например, счётчик посещений наиболее точно сработает, если загрузить его пораньше.
Поэтому «расположить скрипты внизу» – не лучший выход.
Кардинально решить эту проблему помогут атрибуты async или defer :
Поддерживается всеми браузерами, кроме IE9-. Скрипт выполняется полностью асинхронно. То есть, при обнаружении браузер не останавливает обработку страницы, а спокойно работает дальше. Когда скрипт будет загружен – он выполнится.
Поддерживается всеми браузерами, включая самые старые IE. Скрипт также выполняется асинхронно, не заставляет ждать страницу, но есть два отличия от async .
Первое – браузер гарантирует, что относительный порядок скриптов с defer будет сохранён.
То есть, в таком коде (с async ) первым сработает тот скрипт, который раньше загрузится:
А в таком коде (с defer ) первым сработает всегда 1.js , а скрипт 2.js , даже если загрузился раньше, будет его ждать.
Поэтому атрибут defer используют в тех случаях, когда второй скрипт 2.js зависит от первого 1.js , к примеру – использует что-то, описанное первым скриптом.
Второе отличие – скрипт с defer сработает, когда весь HTML-документ будет обработан браузером.
Например, если документ достаточно большой…
…То скрипт async.js выполнится, как только загрузится – возможно, до того, как весь документ готов. А defer.js подождёт готовности всего документа.
Это бывает удобно, когда мы в скрипте хотим работать с документом, и должны быть уверены, что он полностью получен.
При одновременном указании async и defer в современных браузерах будет использован только async , в IE9- – только defer (не понимает async ).
Атрибуты async/defer работают только в том случае, если назначены на внешние скрипты, т.е. имеющие src .
При попытке назначить их на обычные скрипты , они будут проигнорированы.
В современных сайтах скрипты обычно «тяжелее», чем HTML: они весят больше, дольше обрабатываются.
Когда браузер загружает HTML и доходит до тега , он не может продолжать строить DOM. Он должен сначала выполнить скрипт. То же самое происходит и с внешними скриптами : браузер должен подождать, пока загрузится скрипт, выполнить его, и только затем обработать остальную страницу.
Это ведёт к двум важным проблемам:
- Скрипты не видят DOM-элементы ниже себя, поэтому к ним нельзя добавить обработчики и т.д.
- Если вверху страницы объёмный скрипт, он «блокирует» страницу. Пользователи не видят содержимое страницы, пока он не загрузится и не запустится:
Конечно, есть пути, как это обойти. Например, мы можем поместить скрипт внизу страницы. Тогда он сможет видеть элементы над ним и не будет препятствовать отображению содержимого страницы:
Но это решение далеко от идеального. Например, браузер замечает скрипт (и может начать загружать его) только после того, как он полностью загрузил HTML-документ. В случае с длинными HTML-страницами это может создать заметную задержку.
Такие вещи незаметны людям, у кого очень быстрое соединение, но много кто в мире имеет медленное подключение к интернету или использует не такой хороший мобильный интернет.
К счастью, есть два атрибута тега , которые решают нашу проблему: defer и async .
Пример
В этом примере мы подключим скрипты из внешнего файла с расширением . js . Лучше делать именно так, вместо того, чтобы прописывать код скрипта в структуре страницы. Атрибут src указывает путь к файлу.
async
Атрибут async означает, что скрипт абсолютно независим:
Так что если у нас есть несколько скриптов с async , они могут выполняться в любом порядке. То, что первое загрузится – запустится в первую очередь:
- Содержимое страницы отображается сразу же : async его не блокирует.
- DOMContentLoaded может произойти как до, так и после async , никаких гарантий нет.
- Асинхронные скрипты не ждут друг друга. Меньший скрипт small.js идёт вторым, но скорее всего загрузится раньше long.js , поэтому и запустится первым. То есть, скрипты выполняются в порядке загрузки.
Асинхронные скрипты очень полезны для добавления на страницу сторонних скриптов: счётчиков, рекламы и т.д. Они не зависят от наших скриптов, и мы тоже не должны ждать их:
Атрибуты
- async — браузер запускает скрипт асинхронно, то есть не дожидаясь загрузки веб-страницы. Впрочем, и сама страница не будет ждать запуска скрипта и продолжит загружаться, как обычно. Если async не указать, то скрипты будут грузиться по очереди. Этот атрибут работает только когда скрипт задаётся внешним файлом.
- defer — откладывает запуск скрипта, пока веб-страница не загрузится целиком.
- src — указывает путь к файлу со скриптами. Это может быть полный URL-адрес файла или относительный адрес, например, src = " / scripts / browser . js" . Файл должен иметь расширение . js . Когда указываешь src , не пиши ничего внутри . . . < / script>.
Ещё примеры
Попробуем с помощью скрипта сделать так, чтобы текст увеличивался и уменьшался через каждую пару секунд:
Синтаксис
Читайте также: