Приведи примеры макротасков

Макротаски (Macrotasks) в JavaScript

Макротаски — это задачи, которые выполняются в главном цикле событий (event loop) браузера. Они имеют более низкий приоритет чем микротаски (microtasks).

Примеры макротасков

1. setTimeout и setInterval

console.log("Start");

setTimeout(() => {
  console.log("Timeout 1000ms");  // макротаск
}, 1000);

console.log("End");

// Вывод:
// Start
// End
// Timeout 1000ms (через 1000ms)

Любой setTimeout, даже с задержкой 0, — это макротаск:

console.log("1");
setTimeout(() => console.log("2"), 0);  // макротаск
console.log("3");

// Вывод: 1, 3, 2

2. setImmediate (Node.js)

// Только в Node.js!
setImmediate(() => {
  console.log("Immediate");  // макротаск
});

3. Обработка UI событий

Обработчики событий вроде click, scroll, resize — макротаски:

document.addEventListener("click", () => {
  console.log("Click handler");  // макротаск
});

4. Отправка HTTP запросов (XMLHttpRequest, fetch)

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => {
    console.log(data);  // микротаск (Promise)
  });

Сам fetch — макротаск (запрос в сеть), но обработка результата в .then() — микротаск.

5. Rendering и repaint

Браузер запускает rendering как макротаск:

const el = document.getElementById("box");

el.style.width = "100px";
el.offsetWidth;  // заставить перерасчёт (reflow)
el.style.width = "200px";

// Браузер выполнит rendering между макротасками

6. messageChannel и postMessage

const channel = new MessageChannel();

channel.port1.onmessage = () => {
  console.log("Message received");  // макротаск
};

channel.port2.postMessage("hello");

Полный пример: макротаски vs микротаски

console.log("1. Script start");

// Микротаск
Promise.resolve()
  .then(() => console.log("2. Promise"));

// Макротаск
setTimeout(() => {
  console.log("3. setTimeout");
}, 0);

// Синхронный код
console.log("4. Script end");

// Вывод:
// 1. Script start
// 4. Script end
// 2. Promise (все микротаски)
// 3. setTimeout (первый макротаск)

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

1. Выполнить синхронный код (call stack)
2. Выполнить все микротаски (Promise, queueMicrotask)
3. Выполнить один макротаск (setTimeout, setInterval, событие)
4. Если изменился DOM → выполнить render
5. Вернуться на шаг 2

Практический пример с анимацией

// Плохо: requestAnimationFrame ПЕРЕД setTimeout
requestAnimationFrame(() => {
  console.log("Frame 1");
});

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

// Вывод: Timeout, Frame 1
// Потому что setTimeout — макротаск, выполнится перед следующим кадром

// Правильно: используй requestAnimationFrame для анимаций
requestAnimationFrame(() => {
  console.log("Animation frame");  // это НЕ макротаск, это особое API
});

Запомни

Макротаски:

• setTimeout / setInterval
• setImmediate (Node.js)
• Обработчики событий (click, scroll)
• Fetch запросы
• Rendering браузера
• requestAnimationFrame (технически отдельный уровень, но ближе к макротаскам)

Микротаски (для сравнения):

• Promise (.then, .catch, .finally)
• queueMicrotask()
• MutationObserver
• async/await (основано на Promise)

Макротаски выполняются медленнее микротасок, поэтому для критичной производительности используй микротаски (Promise вместо setTimeout).