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