Чтобы скрипты не блокировали рендеринг, используют атрибуты async и defer у тега . async загружает и выполняет скрипт сразу после загрузки, не дожидаясь парсинга HTML, но может нарушить порядок выполнения. defer загружает скрипт параллельно с парсингом, но выполняет его только после завершения парсинга, сохраняя порядок. Также можно размещать скрипты в конце body или использовать динамическую загрузку через JavaScript.

Вопрос про JavaScript: async, defer, render blocking, script loading, performance

Какие есть опции, чтобы скрипты не были блокирующими при рендеринге страницы?

Вопрос проверяет знание способов отложенной загрузки JavaScript для ускорения рендеринга страницы.

Короткий ответ

Чтобы скрипты не блокировали рендеринг, используют атрибуты async и defer у тега

Длинный ответ

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

Атрибут async

Атрибут async позволяет браузеру загружать скрипт асинхронно, параллельно с парсингом HTML. Как только скрипт загружен, он выполняется немедленно, прерывая парсинг. Это полезно для независимых скриптов, например аналитики, где порядок выполнения не важен. Однако если скрипты зависят друг от друга, async может нарушить порядок.

Атрибут defer

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

Другие подходы

Размещение скриптов в конце <body> — простой способ, но не всегда эффективен для больших скриптов.
Динамическая загрузка через document.createElement('script') и добавление на страницу после события DOMContentLoaded.
Использование type="module", который по умолчанию ведёт себя как defer.

Пример кода

<!-- Блокирующий скрипт -->
<script src="script.js"></script>

<!-- Асинхронная загрузка -->
<script async src="analytics.js"></script>

<!-- Отложенное выполнение -->
<script defer src="app.js"></script>

<!-- Динамическая загрузка -->
<script>
  window.addEventListener('DOMContentLoaded', function() {
    var s = document.createElement('script');
    s.src = 'lazy.js';
    document.body.appendChild(s);
  });
</script>

Вывод: для критически важных скриптов, которые должны выполняться после загрузки DOM, используйте defer. Для независимых скриптов, таких как счётчики или реклама, подойдёт async. Это значительно улучшает скорость рендеринга и пользовательский опыт.

Frontend developer

Ментор по Frontend

Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства

Записаться на консультацию

Уровень

Рейтинг:
4
Сложность:
3

Навыки

JavaScript
HTML

Ключевые слова

#async

#defer

#render blocking

#script loading

#performance

Подпишись на React Developer в телеграм

Frontend developer

Ментор по Frontend

Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства

Записаться на консультацию

Какие есть опции, чтобы скрипты не были блокирующими при рендеринге страницы?

Вопрос проверяет знание способов отложенной загрузки JavaScript для ускорения рендеринга страницы.

Короткий ответ

Чтобы скрипты не блокировали рендеринг, используют атрибуты async и defer у тега

Длинный ответ

Атрибут async

Атрибут defer

Другие подходы

Размещение скриптов в конце <body> — простой способ, но не всегда эффективен для больших скриптов.
Динамическая загрузка через document.createElement('script') и добавление на страницу после события DOMContentLoaded.
Использование type="module", который по умолчанию ведёт себя как defer.

Пример кода

<!-- Блокирующий скрипт -->
<script src="script.js"></script>

<!-- Асинхронная загрузка -->
<script async src="analytics.js"></script>

<!-- Отложенное выполнение -->
<script defer src="app.js"></script>

<!-- Динамическая загрузка -->
<script>
  window.addEventListener('DOMContentLoaded', function() {
    var s = document.createElement('script');
    s.src = 'lazy.js';
    document.body.appendChild(s);
  });
</script>

Frontend developer

Ментор по Frontend

Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства

Записаться на консультацию

Уровень

Рейтинг:
4
Сложность:
3

Навыки

JavaScript
HTML

Ключевые слова

#async

#defer

#render blocking

#script loading

#performance

Подпишись на React Developer в телеграм

Frontend developer

Ментор по Frontend

Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства

Записаться на консультацию