React Frontend Developer

Question 1

Зачем для тега <script> добавляют атрибуты async и defer?

Accepted Answer

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

Question 2

Чем отличаются async и defer при подключении скриптов?

Accepted Answer

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

Question 3

Что происходит при загрузке скрипта без async и defer?

Accepted Answer

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

Вопросы React Frontend Developer