Что такое Задача в JavaScript

Вопрос

Что такое Задача в JavaScript

Профессия

Frontend Developer

Что хочет услышать интервьюер

Интервьюер хочет убедиться, что кандидат понимает механизм Event Loop и разницу между микро- и макротасками. Важно показать, как это влияет на порядок выполнения асинхронного кода.

Ключевые тезисы

• Задача (Task) в JavaScript — это единица работы, которая выполняется в Event Loop. Это может быть выполнение скрипта, обработка события или callback из очереди.
• Задачи делятся на макротаски (setTimeout, setInterval, I/O) и микротаски (Promise, queueMicrotask). Микротаски имеют приоритет и выполняются между макротасками.
• Event Loop обрабатывает задачи в порядке: выполнение текущего скрипта → микротаски → рендеринг (при необходимости) → макротаски.

Подробный ответ

Задача (Task) в JavaScript — это единица работы, которая выполняется в Event Loop. Event Loop — это механизм, который позволяет JavaScript обрабатывать асинхронные операции, несмотря на его однопоточную природу. Задачи делятся на два основных типа: макротаски и микротаски. Макротаски включают такие операции, как выполнение скрипта, обработка событий, таймеры (setTimeout, setInterval) и I/O операции. Микротаски — это задачи, которые выполняются с более высоким приоритетом, например, обработка промисов (Promise) или вызовы queueMicrotask. Микротаски всегда выполняются между макротасками, что позволяет обрабатывать асинхронные операции более эффективно. Event Loop работает следующим образом: сначала выполняется текущий скрипт, затем все микротаски, после чего при необходимости происходит рендеринг, и только затем начинается обработка макротасок. Этот порядок гарантирует, что асинхронные операции, такие как промисы, выполняются как можно быстрее, что особенно важно для обеспечения отзывчивости веб-приложений.

Практические примеры

Пример 1

setTimeout и Promise. Рассмотрим следующий код: console.log('Start'); setTimeout(() => console.log('Timeout'), 0); Promise.resolve().then(() => console.log('Promise')); console.log('End');. Результат выполнения будет: 'Start', 'End', 'Promise', 'Timeout'. Это происходит потому, что setTimeout является макротаской, а Promise — микротаской, и микротаски выполняются перед макротасками.

Пример 2

Вложенные микротаски. Если в микротаске добавить новую микротаску, она будет выполнена сразу же, до перехода к макротаскам. Например: Promise.resolve().then(() => { console.log('Promise 1'); Promise.resolve().then(() => console.log('Promise 2')); });. Результат: 'Promise 1', 'Promise 2'. Это показывает, что микротаски могут добавлять новые микротаски, и Event Loop будет обрабатывать их до перехода к макротаскам.

Пример 3

setTimeout с нулевой задержкой. setTimeout с нулевой задержкой не гарантирует немедленного выполнения, а лишь добавляет задачу в очередь макротасок. Например: console.log('Start'); setTimeout(() => console.log('Timeout'), 0); console.log('End');. Результат: 'Start', 'End', 'Timeout'. Это демонстрирует, что setTimeout, даже с нулевой задержкой, выполняется после завершения текущего синхронного кода.

Частые ошибки

• Ошибка #1: Неправильное понимание порядка выполнения микротасок и макротасок. Например, ожидание, что setTimeout выполнится перед Promise, хотя на самом деле Promise выполнится первым.
• Ошибка #2: Предположение, что setTimeout с нулевой задержкой выполнится немедленно. На самом деле, он лишь добавляет задачу в очередь макротасок, и она выполнится после завершения текущего синхронного кода и всех микротасок.

Связанные темы

• Event Loop: Механизм, который управляет выполнением задач в JavaScript.
• Promise: Объект, представляющий результат асинхронной операции.
• Асинхронное программирование: Подход к написанию кода, который позволяет выполнять задачи без блокировки основного потока.
• setTimeout и setInterval: Функции для выполнения кода с задержкой или через определенные интервалы времени.

Follow-up вопросы

Какие примеры макротасок и микротасок вы можете назвать?

Уровень: basic

Макротаски включают setTimeout, setInterval и операции ввода-вывода. Микротаски — это обработчики промисов (then/catch/finally) и функции, добавленные через queueMicrotask.

Почему микротаски имеют приоритет перед макротасками?

Уровень: intermediate

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

Как Event Loop обрабатывает задачи в браузере?

Уровень: intermediate

Event Loop сначала выполняет текущий скрипт, затем все микротаски, при необходимости обновляет DOM (рендеринг), после чего переходит к обработке макротасок из очереди.

Что произойдет, если в микротаске добавить новую микротаску?

Уровень: advanced

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

Как setTimeout с нулевой задержкой влияет на выполнение задач?

Уровень: advanced

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