5 ноября 2025 г.
Базовый тег script
<!-- Блокирующая загрузка -->
<script src="script.js"></script>
Атрибут async
Атрибут async используется в HTML для асинхронной загрузки скриптов. Это означает, что браузер начнет загрузку скрипта сразу же, но не остановит рендеринг страницы в ожидании завершения загрузки. Скрипт выполняется немедленно после окончания своей загрузки, независимо от порядка элементов на странице.
Характеристики:
- Не блокирует парсинг HTML
- Выполняется сразу после загрузки
- Не сохраняет порядок выполнения
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Async Example</title>
<script async src="analytics.js"></script>
<script async src="advertisement.js"></script>
<script async src="tracker.js"></script>
</head>
<body>
<h1>Заголовок страницы</h1>
<!-- Скрипты выполнятся как только загрузятся, порядок не гарантирован -->
</body>
</html>
Атрибут defer
Атрибут defer также предназначен для оптимизации загрузки скриптов. Браузер начинает загрузку скрипта сразу, но откладывает его выполнение до тех пор, пока весь документ не будет полностью проанализирован и построен DOM.
Характеристики:
- Не блокирует парсинг HTML
- Выполняется после полного парсинга DOM
- Сохраняет порядок выполнения скриптов
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Defer Example</title>
<script defer src="script1.js"></script>
<script defer src="script2.js"></script>
<script defer src="script3.js"></script>
</head>
<body>
<h1>Заголовок страницы</h1>
<div id="content">Контент страницы</div>
<!-- Скрипты выполнятся после полной загрузки DOM -->
</body>
</html>