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-элементам, расположенным выше по коду.

Question 4

Что происходит при встрече тега <script> во время парсинга HTML?

Accepted Answer

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

Question 5

Что такое useDeferredValue и как он помогает при работе с поиском?

Accepted Answer

useDeferredValue — это хук React, который позволяет отложить обновление части UI, сохраняя отзывчивость интерфейса. Он принимает значение и возвращает его отложенную версию, которая обновляется с задержкой, если есть более приоритетные обновления. Это полезно для поиска: ввод текста остаётся плавным, а результаты отображаются с небольшой задержкой, не блокируя ввод.

Вопросы React Frontend Developer