Что такое call-stack, task-queue (приведите примеры работы)?angular-12

Call Stack

Call Stack - это структура данных LIFO (Last In, First Out), которая отслеживает текущее положение выполнения кода. Когда функция вызывается, она помещается в стек, а когда завершается - удаляется из него.

Пример работы:

function greet() {
  console.log('Hello!');
}

function welcome() {
  greet();
  console.log('Welcome!');
}

welcome();

Порядок выполнения:

  1. welcome() добавляется в стек
  2. greet() добавляется в стек (внутри welcome)
  3. console.log('Hello!') добавляется в стек (внутри greet)
  4. console.log('Hello!') выполняется и удаляется из стека
  5. greet() завершается и удаляется из стека
  6. console.log('Welcome!') добавляется в стек
  7. console.log('Welcome!') выполняется и удаляется из стека
  8. welcome() завершается и удаляется из стека

Task Queue

Task Queue (или Callback Queue) - это очередь FIFO (First In, First Out), где хранятся асинхронные callback-функции, ожидающие выполнения.

Пример работы с setTimeout:

console.log('Start');

setTimeout(() => {
  console.log('Timeout callback');
}, 0);

console.log('End');

Порядок выполнения:

  1. console.log('Start') выполняется сразу
  2. setTimeout регистрируется в Web API, таймер начинает отсчет
  3. console.log('End') выполняется
  4. Когда таймер истекает (даже если 0ms), callback попадает в Task Queue
  5. Event Loop перемещает callback из Task Queue в Call Stack только когда стек пуст
  6. console.log('Timeout callback') выполняется

Микротаски

Отдельно существует Microtask Queue для Promise и других микротасок, которые имеют приоритет над Task Queue.

Пример:

console.log('Script start');

setTimeout(() => {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise');
});

console.log('Script end');

Порядок выполнения:

  1. Синхронный код выполняется полностью
  2. Микротаски (Promise) выполняются перед макротасками (setTimeout)
  3. Результат:
    • 'Script start'
    • 'Script end'
    • 'Promise'
    • 'setTimeout'

Event Loop в Angular

В Angular зона (NgZone) отслеживает асинхронные операции и инициирует обнаружение изменений. Важные особенности:

  1. Обновление UI происходит после выполнения микротасок
  2. Change Detection запускается когда:
    • Срабатывают события DOM
    • Завершаются HTTP-запросы
    • Выполняются setTimeout/setInterval
    • Завершаются Promise/async операции

Пример Angular-специфичного поведения:

this.http.get('/data').subscribe(() => {
  console.log('HTTP done'); // Вызовет change detection
});

setTimeout(() => {
  this.value = 'Updated'; // Также вызовет change detection
}, 1000);

Резюмируем

  1. Call Stack - выполняет синхронный код по принципу LIFO
  2. Task Queue - содержит макротаски (setTimeout, setInterval, события)
  3. Microtask Queue - имеет приоритет, содержит Promise, MutationObserver
  4. Event Loop - постоянно проверяет стек и очереди:
    • Сначала выполняет весь Call Stack
    • Затем все Microtasks
    • Затем одну Macrotask
    • Повторяет цикл

Понимание этого механизма критически важно для Angular-разработчика, так как влияет на:

  • Оптимизацию производительности
  • Правильную работу Change Detection
  • Предсказуемость порядка выполнения асинхронных операций

Вопросы

Собеседования