Ответ
Есть несколько способов подключения скриптов:
- Inline-скрипт (не рекомендуется для больших скриптов):
<script>console.log('Hello!');</script>- Внешний скрипт (обычный способ):
<script src="script.js"></script>- Атрибуты async/defer для управления загрузкой:
<script async src="script.js"></script> <!-- загружается асинхронно -->
<script defer src="script.js"></script> <!-- выполняется после загрузки DOM -->- Динамическое подключение через JavaScript:
const script = document.createElement('script');
script.src = 'script.js';
document.body.appendChild(script);- Модули ES6 (для современных браузеров):
<script type="module" src="module.js"></script>Лучшая практика - подключать скрипты перед закрывающим тегом </body> или использовать defer, чтобы не блокировать отрисовку страницы.
Ответ 18+ 🔞
Да ты посмотри, какие варианты развели, как будто в столовой выбор блюд! Ну ладно, разбираем эту кухню по полочкам.
Вот самый простой, дедовский способ — инлайн-скрипт, прямо в HTML суёшь. Но это как в гостях чавкать — для мелких дел сойдёт, а для чего-то серьёзного выглядит как полный распиздяй.
<script>console.log('Hello!');</script>Нормальные люди так не делают. Берут и выносят в отдельный файл, как порядочные. Красота же!
<script src="script.js"></script>А вот тут начинается магия, блядь. Потому что этот скрипт, сука, по умолчанию — тормоз. Он весь парсер страницы остановит, пока сам не загрузится и не выполнится. Картинки виснут, текст не грузится — пиздец пользователю.
Поэтому умные дяди придумали async и defer. Смотри, в чём фишка:
- async — «Да похуй, грузись параллельно, а как загрузился — сразу в пизду выполняйся, не глядя на очередь». Порядок выполнения? Хуй там, какой загрузился первым, тот и тапки.
<script async src="script.js"></script> - defer — «Грузись спокойно, параллельно, но выполнишься ты, дружок, только когда весь HTML документ будет готов». И порядок скриптов сохранится, что важно, ёпта!
<script defer src="script.js"></script>
Если скрипт от кого-то другого (типа аналитики) и ему похуй на порядок — async. Если это твой родной скрипт и он зависит от структуры страницы — defer. Логично?
А если ты совсем еблан и тебе надо скрипт добавить прямо из другого скрипта — вот тебе динамическое подключение. Создаёшь элемент и тыкаешь его в документ.
const script = document.createElement('script');
script.src = 'script.js';
document.body.appendChild(script);Ну и для продвинутых, у кого браузер не древний как говно мамонта — ES6 модули. Красота, импорты-экспорты, всё чинно.
<script type="module" src="module.js"></script>Итог, блядь, слушай сюда: не пихай скрипты в <head>. Или кидай их прямо перед </body>, или используй defer в голове. Чтобы страница не выглядела, как будто её через хуй тащили, пока твой JS-файл размером с овердохуища качается. Всё, вопрос закрыт.