← Назад ко всем вопросам

Что такое атрибут defer у скрипта

1️⃣ Как кратко ответить

Атрибут defer у тега <script> указывает браузеру загружать скрипт асинхронно, но выполнять его только после того, как весь HTML-документ будет полностью загружен и обработан. Это позволяет избежать блокировки рендеринга страницы.

2️⃣ Подробное объяснение темы

Когда браузер загружает HTML-документ, он обрабатывает его сверху вниз. Если в процессе обработки встречается тег <script>, браузер по умолчанию останавливает парсинг HTML и загружает и выполняет скрипт. Это может замедлить загрузку страницы, особенно если скрипт большой или загружается с удаленного сервера.

Атрибут defer решает эту проблему. Он указывает браузеру загружать скрипт параллельно с обработкой HTML, но откладывать его выполнение до тех пор, пока весь HTML-документ не будет полностью загружен и обработан. Это позволяет браузеру продолжать рендеринг страницы, не дожидаясь выполнения скрипта.

Пример использования:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Defer Example</title>
    <!-- Скрипт будет загружен асинхронно, но выполнен после полной загрузки HTML -->
    <script src="script.js" defer></script>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a simple example of using the defer attribute.</p>
</body>
</html>
  • <script src="script.js" defer></script>: Эта строка указывает браузеру загрузить файл script.js асинхронно. Атрибут defer гарантирует, что скрипт будет выполнен только после полной загрузки и обработки HTML-документа.
  • <h1>Hello, World!</h1> и <p>This is a simple example of using the defer attribute.</p>: Эти элементы будут отображены пользователю без задержки, так как рендеринг страницы не блокируется загрузкой и выполнением скрипта.

Преимущества использования defer:

  • Улучшение времени загрузки страницы, так как HTML и скрипты загружаются параллельно.
  • Скрипты выполняются в порядке их появления в документе, что важно для зависимых скриптов.
  • Обеспечение того, что скрипты будут иметь доступ ко всем элементам DOM, так как они выполняются после полной загрузки HTML.

Атрибут defer особенно полезен для скриптов, которые не зависят от других скриптов и не изменяют DOM до его полной загрузки.

Тема: Основы веба и браузера
Стадия: Tech

🔒 Подпишись на бусти автора и стань Алигатором, чтобы получить полный доступ к функционалу сайта и отслеживать свой прогресс!

Твои заметки