Существует ли ресурс где можно посмотреть все генераторы микро/макро задач?

Ссылка скопирована
1 ответ

По вводным: например, является ли вызов макро/микро задачей:
https://developer.mozilla.org/en-US/docs/Web/API/M...

Или этот:
https://developer.mozilla.org/en-US/docs/Web/API/W...

По вводным: методом тыка? - устану тыкать.

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Игорь Волков Ответ

Единого “полного списка всех генераторов microtask/macrotask” для браузера нет, потому что это определяется спецификациями HTML, ECMAScript и конкретных Web API. Но есть устойчивое правило: microtasks - это Promise jobs, queueMicrotask и MutationObserver; macrotasks/tasks - это события, таймеры, I/O, postMessage, MessageChannel, UI events и большинство callback-ов Web API.

Базовая схема event loop:

  • Выполняется текущий JS stack.
  • После него очищается очередь microtasks.
  • Потом браузер берет следующую task/macrotask.
  • Между tasks браузер может сделать render.

Типичные microtasks:

Promise.resolve().then(() => console.log('promise'));
queueMicrotask(() => console.log('microtask'));
new MutationObserver(() => console.log('mutation'));

Promise.resolve().then(() => console.log('promise')); queueMicrotask(() => console.log('microtask')); new MutationObserver(() => console.log('mutation'));

Типичные tasks/macrotasks:

setTimeout(() => console.log('timeout'), 0);
setInterval(() => console.log('interval'), 1000);
window.addEventListener('click', () => console.log('event'));
postMessage('x', '*');

setTimeout(() => console.log('timeout'), 0); setInterval(() => console.log('interval'), 1000); window.addEventListener('click', () => console.log('event')); postMessage('x', '*');

MessageChannel часто используют как быстрый task/macro task механизм, но детали могут зависеть от окружения. RequestAnimationFrame - отдельная фаза перед отрисовкой, его не стоит грубо называть обычной macrotask.

Где читать: MDN “Microtask guide”, WHATWG HTML “Event loops”, Jake Archibald “Tasks, microtasks, queues and schedules”. Для конкретного API нужно смотреть раздел спецификации: если там написано queue a task - это task, если queue a microtask - microtask.

Практический способ проверить порядок:

console.log('sync');
 
setTimeout(() => console.log('timeout'), 0);
Promise.resolve().then(() => console.log('promise'));
queueMicrotask(() => console.log('queueMicrotask'));
 
console.log('sync end');

console.log('sync'); setTimeout(() => console.log('timeout'), 0); Promise.resolve().then(() => console.log('promise')); queueMicrotask(() => console.log('queueMicrotask')); console.log('sync end');

Вывод: универсальной таблицы на все Web API нет, но есть надежный метод: смотреть спецификацию и формулировку queue a task / queue a microtask. Для повседневной разработки достаточно помнить, что Promise/queueMicrotask выполняются раньше таймеров и событий следующего цикла.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно