JavaScript? ???? ??? ????? ?? ???? ???? ?? ???? ??? ? ????. ?? ??? ???????? ???????? ? ?? ?? ??? ???? ??? ??? ????. ???? ???? ????, ??? ????, ? ?????? ? ??? ??? ?? ?? ??, ??, ?? ?? ????? ???????.

---

??? ??? ?? ???

JavaScript ??? ?? ????? ??? ?????. ??? ??? ???? ?? ? ??? ?? ??? ??? ???? ??? ??? ?????. ??? ?? ???? ???????? ??????? ? ?? ??? ????.

???????

???????? ?? ?? ?? JavaScript ??? ???? ?? ??? ?? ?? ?? ????? ?? ????? ?? ?????. ??? ?? ??? ??? ??? ?????. ???? ?? ??? ????.

• ?? (.then, async/await)
• MutationObserver ??

??????

??????? ?? ???????? ??? ??? ??? ??? ???? ????? ?? ?????. ? ?? ??? ??? ?? ???? ?????. ???? ?? ??? ????.

• ???(setTimeout, setInterval)
• MessageChannel ??
• I/O ??

? ???? ??? ?? requestAnimationFrame? ????. ????? ??? ??? ????? ???? ?????? ??????.

---

?? ??

??? ??? ??? ???? ??? ??? ????.

1. ?? ??? ?? ?????.
2. ??????? ???? ????.
3. ?????? ????? ??? ??? ?????.
4. ?? ??? ??? ??? 2??? 3??? ?????.

??? ???? ??? ??? ?? ????? ?? ??? ???? ?? ? ??? ???? ?? ????? ?????.

---

?? ??

??? ?? ??, ???????, ?????? ? requestAnimationFrame ?? ?? ??? ???? ???? ?? ?????.

console.log('Synchronous code starts');

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

// Macrotask: setInterval
const intervalId = setInterval(() => {
  console.log('Macrotask: setInterval');
  clearInterval(intervalId);
}, 100);

// Microtask: Promise
Promise.resolve().then(() => {
  console.log('Microtask: Promise then 1');
  Promise.resolve().then(() => {
    console.log('Microtask: Promise then 2');
  });
});

// Microtask: MutationObserver
const observer = new MutationObserver(() => {
  console.log('Microtask: MutationObserver');
});
const targetNode = document.createElement('div');
observer.observe(targetNode, { attributes: true });
targetNode.setAttribute('data-test', 'true');

// Macrotask: MessageChannel
const channel = new MessageChannel();
channel.port1.onmessage = () => {
  console.log('Macrotask: MessageChannel');
};
channel.port2.postMessage('Test');

// requestAnimationFrame
requestAnimationFrame(() => {
  console.log('Outside task queues: requestAnimationFrame');
});

console.log('Synchronous code ends');

---

?? ??

?? ??? ????? ??? ?? ? ??? ???.

1. ?? ??: “?? ?? ??”, “?? ?? ??”
2. ???????:
   • “???????: ??? 1”
   • “???????: ?? ?? 2”
   • “???????: ???????”
3. ??????:
   • “??????: setTimeout”
   • “??????: MessageChannel”
   • “??????: setInterval”
4. requestAnimationFrame: "?? ?? ???: requestAnimationFrame"

?? ??: ???????? ??????

???????: ?? ??

• ?? ?? ?? ? ?? ??
• ???? ???? DOM ????? ?? ??? ?? ???? ????? ?? ????? ?????.
• ?: ??, MutationObserver.

??????: ?? ??

• ?? ???????? ??? ??? ?????.
• ???, ????? ?? ?? ?? ?? ??? ??? ?????.
• ?: ???, MessageChannel.

requestAnimationFrame: The Odd One Out

?? ???? ??? ???? requestAnimationFrame? ????? ??? ??? ???. ?? ????? ?? ??? ?? ??? ????? ???? ??? ??? ????? ?????? ?? ???? ????.

---

??

???????, ??????, ??? ?? ?? ?? ??? JavaScript ????? ?????. ??? ??? ???? ???? ?? ????? ?? ??? ???? ??? ??? ??? ??? ? ????. ?????: ???? ??? ?? ???? ??? ??? ? ??? ???? ??? ??? ?? requestAnimationFrame? ?????. ??? ?????!

? ??? ????? ?? ?? ??: ???????, ?????? ? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!