Какие атрибуты существуют у тега script для управления загрузкой скриптов
Что проверяют
Понимаете ли вы, как скрипт блокирует разбор HTML и отрисовку, и умеете ли этим управлять. Уточнение почти всегда одно: в каком порядке выполнятся скрипты с async и defer и когда сработает DOMContentLoaded.
Как отвечать
Начните с поведения по умолчанию: обычный <script src> останавливает парсер, пока файл не загрузится и не выполнится. Дальше атрибуты:
defer: загрузка параллельно с разбором, выполнение после разбора документа, строго в порядке следования и доDOMContentLoaded. Подходит для скриптов, которые работают с DOM и зависят друг от друга;async: загрузка параллельно, выполнение сразу по готовности, порядок не гарантирован, на время выполнения парсер останавливается. Для независимых скриптов вроде аналитики;type="module": модуль по умолчанию ведёт себя какdefer, сasyncвыполняется по готовности. Модули всегда в строгом режиме и загружаются через CORS;nomodule: скрипт для браузеров без поддержки модулей, сегодня почти не нужен;crossorigin: запрос в режиме CORS. Нужен дляintegrityна чужом домене и для подробного текста ошибок вwindow.onerror;integrity: хэш SRI, браузер не выполнит файл, если он изменился на CDN;fetchpriority: подсказка приоритета загрузки,highилиlow;referrerpolicy: какой реферер уйдёт с запросом.
Добавьте, что defer на обычном инлайн-скрипте игнорируется, а скрипт, созданный через document.createElement('script'), по умолчанию асинхронный, порядок ему возвращает script.async = false. Для раннего старта загрузки есть <link rel="preload" as="script"> и modulepreload.
Где спотыкаются
Говорят, что async не блокирует страницу вообще. Загрузка действительно не блокирует, а выполнение останавливает парсер.
Вешают async на скрипты, зависящие друг от друга, например библиотеку и плагин к ней. Порядок выполнения становится случайным, и ошибка ловится только на медленной сети.
Считают, что defer ждёт события load. Он выполняется раньше, до DOMContentLoaded, картинки к этому моменту могут ещё грузиться.