Как скрипт подгружается с атрибутом defer

Вопрос

Как скрипт подгружается с атрибутом defer

Профессия

Frontend Developer

Что хочет услышать интервьюер

Интервьюер хочет услышать, что кандидат понимает, как defer влияет на загрузку и выполнение скриптов, знает о порядке выполнения и преимуществах использования defer для оптимизации загрузки страницы.

Ключевые тезисы

• Атрибут defer указывает браузеру, что скрипт должен выполняться после полного разбора HTML-документа, но до события DOMContentLoaded.
• Скрипты с defer загружаются асинхронно, но выполняются в порядке их объявления в документе, что важно для зависимостей между скриптами.
• Использование defer предотвращает блокировку парсинга HTML, что ускоряет загрузку страницы.

Подробный ответ

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

Основное отличие defer от async заключается в порядке выполнения. Скрипты с async выполняются сразу после загрузки, независимо от порядка в документе, в то время как defer сохраняет порядок. Это делает defer более предпочтительным для скриптов, которые зависят друг от друга или от DOM.

Использование defer особенно полезно для скриптов, которые должны работать с DOM, но не критичны для первоначального отображения страницы. Например, скрипты аналитики или интерактивные элементы, которые могут быть инициализированы после загрузки основного контента.

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

Практические примеры

Пример 1

Пример 1: Подключение нескольких скриптов с defer, которые зависят друг от друга. Например, библиотека jQuery и скрипт, который её использует. Порядок подключения гарантирует, что jQuery будет загружена и выполнена до скрипта, который от неё зависит.

Пример 2

Пример 2: Использование defer для скриптов аналитики, таких как Google Analytics. Эти скрипты не критичны для первоначального отображения страницы, но должны быть выполнены до того, как пользователь начнет взаимодействовать с контентом.

Частые ошибки

• Ошибка 1: Попытка использовать defer для скриптов, которые должны выполняться немедленно, например, для скриптов, которые изменяют критически важные стили или структуру DOM.
• Ошибка 2: Неправильный порядок подключения скриптов с defer, что может привести к ошибкам, если один скрипт зависит от другого.

Связанные темы

• Атрибут async и его отличия от defer.
• Событие DOMContentLoaded и его роль в загрузке страницы.
• Оптимизация загрузки скриптов для улучшения производительности веб-страниц.

Follow-up вопросы

Чем отличается defer от async?

Уровень: basic

defer сохраняет порядок выполнения скриптов и выполняется после разбора HTML, но до DOMContentLoaded. async загружает и выполняет скрипты асинхронно без сохранения порядка, как только они загружены.

Когда стоит использовать defer, а когда async?

Уровень: intermediate

defer используют, когда скрипты зависят друг от друга или от DOM. async — когда скрипты независимы (например, аналитика) и их порядок выполнения не важен.

Как поведёт себя скрипт с defer, если в документе есть несколько таких скриптов?

Уровень: intermediate

Все скрипты с defer загружаются параллельно, но выполняются строго в порядке их объявления в HTML, после полного разбора документа.

Можно ли использовать defer и async одновременно?

Уровень: advanced

Нет, атрибуты взаимоисключающие. Если указаны оба, браузеры игнорируют defer и используют async (в соответствии со спецификацией HTML5).

Как defer влияет на событие DOMContentLoaded?

Уровень: advanced

Скрипты с defer выполняются после разбора HTML, но до DOMContentLoaded. Если таких скриптов нет, DOMContentLoaded срабатывает сразу после разбора.