JavaScript の非同期の性質(zhì)は、仕組みを詳しく理解するまでは魔法のように感じるかもしれません。秘訣はイベント ループにあり、マイクロタスクとマクロタスクという 2 つの主要なプレーヤーを調(diào)整します。しかし、それらは何で、どのように機(jī)能し、なぜ重要なのでしょうか?この概念をマスターするための詳細(xì)、例、ヒントを使って謎を解き明かしましょう。

イベント ループとタスク キュー

JavaScript エンジンは単一スレッドでコードを?qū)g行します。非同期操作を処理するには、コール スタックとタスク キューの間で調(diào)整を行うイベント ループに依存します。これらのタスク キューは、マイクロタスク と マクロタスク の 2 つのカテゴリに分割されます。

マイクロタスク

マイクロタスクは、現(xiàn)在実行中の JavaScript コードが終了し、コール スタックが空になったらすぐに実行する必要がある優(yōu)先度の高いタスクです。これらにより、迅速なフォローアップ アクションと一貫した狀態(tài)が保証されます。一般的な例は次のとおりです。

• 約束 (.then、async/await)
• MutationObserver コールバック

マクロタスク

マクロタスクは、すべてのマイクロタスクが実行された後にのみイベント ループが処理する優(yōu)先度の低いタスクです。これらは、より大規(guī)模な遅延操作や外部イベントを処理します。一般的な例は次のとおりです。

• タイマー (setTimeout、setInterval)
• MessageChannel コールバック
• I/O 操作

どちらのキューにも含まれない requestAnimationFrame もあります。ブラウザのレンダリング サイクルと同期するため、スムーズなアニメーションに最適です。

仕組み

イベント ループがタスクを処理する方法は次のとおりです。

1. 最初に同期コードを?qū)g行します。
2. マイクロタスクキューをクリアします。
3. マクロタスクキューから 1 つのタスクを?qū)g行します。
4. すべてのタスクが処理されるまで、ステップ 2 と 3 を繰り返します。

この優(yōu)先順位付けにより、Promise などの優(yōu)先度の高いタスクが、タイマーなどの緊急性の低い操作よりも前に解決されます。

実際の例

以下は、同期コード、マイクロタスク、マクロタスク、および 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');

期待される出力

出力シーケンスは優(yōu)先順位を明確にするのに役立ちます:

1. 同期コード: 「同期コードの開始」、「同期コードの終了」
2. マイクロタスク:
   • 「マイクロタスク: 約束して 1」
   • 「マイクロタスク: 約束して 2」
   • 「マイクロタスク: MutationObserver」
3. マクロタスク:
   • 「マクロタスク: setTimeout」
   • 「マクロタスク: MessageChannel」
   • 「マクロタスク: setInterval」
4. requestAnimationFrame: 「タスクキュー外: requestAnimationFrame」

詳細(xì): マイクロタスクとマクロタスク

マイクロタスク: 主な特徴

• 同期コードが完了したらすぐに実行します。
• Promise の解決や DOM の変更への対応など、小規(guī)模で優(yōu)先度の高い更新に最適です。
• 例: Promise、MutationObserver。

マクロタスク: 主な特徴

• すべてのマイクロタスクがクリアされた後にのみ実行します。
• 大規(guī)模で優(yōu)先度の低い操作または外部イベント処理に使用されます。
• 例: タイマー、MessageChannel。

requestAnimationFrame: The Odd One Out

requestAnimationFrame はタスク キューの一部ではありませんが、非同期では獨自の役割を果たします。次のブラウザの再描畫前にコードが実行されるようにスケジュールを設(shè)定し、フレーム ドロップを最小限に抑え、アニメーションをよりスムーズにします。

結(jié)論

マイクロタスク、マクロタスク、およびイベント ループの間の相互作用は、JavaScript の非同期性の中心です。これらの概念を理解して活用することで、より効率的で保守しやすく、パフォーマンスの高いコードを作成できます。覚えておいてください: 最初にマイクロタスク、2 番目にマクロタスク、そして視覚的に磨き??をかけるために requestAnimationFrame を使用します。コーディングを楽しんでください!

以上が非同期の詳細(xì): マイクロタスク、マクロタスク、およびイベント ループの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。