React Frontend Developer

Q: Является ли код внутри тега макрозадачей?

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

Q: Event Loop, что относится к микро и макро задачам?

Event Loop управляет выполнением асинхронного кода.Микрозадачи (Promise, queueMicrotask) выполняются сразу после текущего синхронного кода.Макрозадачи (setTimeout, setInterval) выполняются после микрозадач и рендера страницы.

Question 1

Что такое цикл событий (event loop) и как он работает?

Accepted Answer

Цикл событий (event loop) — это механизм в JavaScript, который управляет выполнением кода, обработкой событий и выполнением задач из очереди (callback-ов). Он позволяет JavaScript быть асинхронным, обрабатывая задачи, когда основная программа уже завершена. Когда вызывается асинхронная операция, она отправляется в очередь, а цикл событий отслеживает и выполняет задачи, как только главный поток освобождается.

Question 2

Объясните влияние блокирующих операций на Event Loop и как их избежать.

Accepted Answer

Блокирующие операции в JavaScript — это те, которые останавливают выполнение кода и не позволяют Event Loop обрабатывать другие задачи. Это может привести к зависанию интерфейса пользователя и снижению отзывчивости приложения.

Чтобы избежать блокирующих операций, используйте асинхронные функции, такие как setTimeout, Promise и API, позволяющие выполнять задачи в фоновом режиме, не блокируя основной поток выполнения.

Question 3

Является ли код внутри тега <script> макрозадачей?

Accepted Answer

Код внутри тега

Question 4

Как рендеринг в браузере связан с event loop?

Accepted Answer

Рендеринг в браузере отвечает за отображение веб-страницы, включая разметку, стили и поведение. Event loop управляет выполнением JavaScript-кода и обработкой событий, ставя асинхронные задачи в очередь.

Когда браузер завершает текущий стек выполнения, он проверяет очередь событий и выполняет задачи, что может приостановить рендеринг, если есть тяжелые операции.

Понимание этой связи помогает разработчикам избегать блокировок интерфейса и улучшать отзывчивость приложений.

Question 5

Как event loop влияет на парсинг HTML и как этого избежать?

Accepted Answer

Event loop может приостанавливать парсинг HTML, если JavaScript выполняется во время загрузки страницы. Когда браузер встречает тег <script>, он останавливает парсинг и выполняет скрипт, что может замедлить загрузку страницы. Чтобы избежать этого, разработчики могут использовать атрибуты async или defer, которые позволяют загружать и выполнять скрипты асинхронно, не блокируя парсинг.

Question 6

Расскажи про event loop в React.

Accepted Answer

Event loop — это механизм JavaScript, который позволяет обрабатывать асинхронные задачи. В React event loop используется для обработки событий, таких как клики или запросы данных. Когда происходят изменения в данных или состоянии компонента, React реагирует на это, отправляя обновления в очередь и следуя за event loop для их обработки, не блокируя основной поток.

Question 7

Event Loop, что относится к микро и макро задачам?

Accepted Answer

Event Loop управляет выполнением асинхронного кода.

Микрозадачи (Promise, queueMicrotask) выполняются сразу после текущего синхронного кода.
Макрозадачи (setTimeout, setInterval) выполняются после микрозадач и рендера страницы.

Question 8

Если в useEffect сделать долгий fetch (например, на минуту), заблокирует ли это выполнение JS и интерфейс браузера? Почему он не ждёт ответа?

Accepted Answer

Нет, долгий fetch не заблокирует интерфейс, потому что он выполняется асинхронно. JavaScript не "ждёт" ответа — запрос отправляется в фоне, а основной поток продолжает работать.

Question 9

Почему MutationObserver использует микротаски в Event Loop?

Accepted Answer

MutationObserver выполняет свои колбэки в микротасках, чтобы изменения DOM обрабатывались сразу после текущей задачи, но до рендеринга и макротасков. Это позволяет быстро реагировать на изменения, сохраняя высокую производительность.

Question 10

Как связаны промисы с Event Loop?

Accepted Answer

Промисы тесно связаны с Event Loop. Когда создается промис, его асинхронная операция (например, запрос к серверу) передается браузерному API и выполняется вне основного потока. Event Loop постоянно проверяет, завершилась ли эта операция. Когда она завершается, callback-функции промиса (.then(), .catch()) помещаются в очередь микрозадач (Microtask Queue), которая имеет высший приоритет. Event Loop выполнит все callback'и из этой очереди сразу после выполнения текущего синхронного кода, прежде чем перейти к чему-либо еще.

Вопросы React Frontend Developer