Подключение JS к HTML: внутренний и внешний скрипты, атрибут async и defer

Как JavaScript встречается с HTML: основные способы 🎭

JavaScript без HTML — как гитарист без гитары: звуки извлекать можно, но эффекта не будет. Давай разберёмся, как правильно «подружить» скрипты с разметкой, чтобы всё работало быстро и без ошибок.

1. Внутренний скрипт: когда код живёт прямо в HTML 🏠

Самый простой способ — вставить JavaScript прямо в HTML-файл с помощью тега <script>.

<!DOCTYPE html>
<html>
<head>
    <title>Моя страница</title>
</head>
<body>
    <h1>Привет, мир!</h1>

    <!-- Скрипт прямо в теле документа -->
    <script>
        alert('Это внутренний скрипт!');  
        console.log('Сработало!');
    </script>
</body>
</html>

Плюсы:
- Быстро и просто для маленьких скриптов.
- Не требует дополнительных HTTP-запросов.

Минусы:
- Захламляет HTML.
- Нельзя закешировать отдельно.

💡 Совет: Если скрипт маленький и используется только на одной странице — внутреннее подключение допустимо. Но для больших проектов лучше выносить код в отдельные файлы.

2. Внешний скрипт: когда код выносится в отдельный файл 📂

Оптимальный способ для серьёзных проектов — подключать .js-файлы через атрибут src.

Структура проекта:

project/  
├── index.html  
└── script.js

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Внешний скрипт</title>
</head>
<body>
    <button id="myButton">Нажми меня</button>

    <!-- Подключаем внешний скрипт -->
    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

document.getElementById('myButton').addEventListener('click', () => {
    alert('Кнопка сработала!');
});

Плюсы:
- Чистый и структурированный код.
- Кешируется браузером.
- Можно использовать на нескольких страницах.

Минусы:
- Дополнительный HTTP-запрос (но это решается сжатием и кешированием).

3. Где размещать `<script>`: `<head>` или перед `</body>`? 🤔

Вариант 1: `<script>` в `<head>`

<head>
    <script src="script.js"></script>
</head>

Что происходит:
- Браузер останавливает загрузку HTML, пока не загрузит и не выполнит скрипт.
- Если скрипт большой или медленный — страница будет «тормозить».

Вариант 2: `<script>` перед `</body>`

<body>
    <!-- Весь контент страницы -->

    <script src="script.js"></script>
</body>

Что происходит:
- Скрипт загружается и выполняется после отрисовки HTML.
- Пользователь видит контент быстрее.

⚡ Вывод: Если скрипт не критичен для отображения страницы — клади его перед </body>.

4. Атрибуты `async` и `defer`: ускоряем загрузку страницы 🚀

Обычный `<script>` (без атрибутов)

<script src="script.js"></script>

Браузер останавливает парсинг HTML, загружает скрипт, выполняет его и только потом продолжает.

`async` — «загрузи и выполни, как только сможешь»

<script src="script.js" async></script>

Скрипт загружается параллельно с HTML.
Как только загрузился — сразу выполняется, даже если HTML ещё не распарсен.

Когда использовать:
- Для аналитики, рекламных скриптов, соцсетей (например, Google Analytics).

`defer` — «загрузи заранее, выполни после HTML»

<script src="script.js" defer></script>

Скрипт загружается параллельно с HTML.
Выполняется после полной загрузки страницы, перед событием DOMContentLoaded.

Когда использовать:
- Для скриптов, которым нужен доступ к DOM (например, ваш основной app.js).

5. Сравнение `async`, `defer` и обычного подключения 📊

Способ	Загрузка	Выполнение	Порядок выполнения
`<script>`	❌ Блокирует	❌ Блокирует	По порядку
`<script async>`	✅ Параллельно	⏳ Сразу после загрузки	Как загрузится
`<script defer>`	✅ Параллельно	🕒 После HTML	По порядку

🔥 Важно: Скрипты с defer выполняются строго в порядке объявления в HTML, а async — в случайном порядке (как загрузятся).

6. Пример: подключаем несколько скриптов правильно

Плохо:

<script src="analytics.js" async></script>
<script src="app.js" defer></script>
<script src="jquery.js"></script>

Каждый скрипт будет вести себя по-разному, возможны гонки.

Хорошо:

<!-- Основные библиотеки с defer -->
<script src="jquery.js" defer></script>
<script src="app.js" defer></script>

<!-- Асинхронный скрипт (если не зависит от других) -->
<script src="analytics.js" async></script>

Порядок выполнения предсказуем, страница загружается быстрее.

Итоги: что выбрать? 🏆

✅ <script defer> — для большинства скриптов, которые работают с DOM.
✅ <script async> — для независимых скриптов (аналитика, виджеты).
✅ <script> перед </body> — если не хотите использовать defer.

💡 Золотое правило: Если скрипт не нужен для первоначального отображения страницы — не заставляйте браузер его ждать.

Теперь ты знаешь, как подключать JavaScript эффективно! Попробуй применить эти подходы в своём проекте и почувствуй разницу в скорости загрузки. 🚀

Подключение JS к HTML: внутренний и внешний скрипты, атрибут async и defer

Как JavaScript встречается с HTML: основные способы 🎭

1. Внутренний скрипт: когда код живёт прямо в HTML 🏠

2. Внешний скрипт: когда код выносится в отдельный файл 📂

3. Где размещать <script>: <head> или перед </body>? 🤔

Вариант 1: <script> в <head>

Вариант 2: <script> перед </body>

4. Атрибуты async и defer: ускоряем загрузку страницы 🚀

Обычный <script> (без атрибутов)

async — «загрузи и выполни, как только сможешь»

defer — «загрузи заранее, выполни после HTML»

5. Сравнение async, defer и обычного подключения 📊