فهم حلقة الأحداث في JavaScript: استكشاف قوائم المهام وإدارة المهام الدقيقة

\n\n

تتمكن JavaScript، على الرغم من كونها لغة أحادية الخيط، من التعامل مع التزامن والعمليات غير المتزامنة بكفاءة. هذا ممكن بفضل حلقة الأحداث العبقرية. يعد فهم كيفية عملها أمرًا بالغ الأهمية لأي مطور JavaScript يهدف إلى كتابة تطبيقات عالية الأداء وسريعة الاستجابة. سيستكشف هذا الدليل الشامل تعقيدات حلقة الأحداث، مع التركيز على قائمة المهام (المعروفة أيضًا باسم قائمة الاستدعاءات) وقائمة المهام الدقيقة.

\n\n

ما هي حلقة الأحداث في JavaScript؟

\n\n

حلقة الأحداث هي عملية مستمرة تراقب مكدس الاستدعاءات وقائمة المهام. وظيفتها الأساسية هي التحقق مما إذا كان مكدس الاستدعاءات فارغًا. إذا كان كذلك، فإن حلقة الأحداث تأخذ المهمة الأولى من قائمة المهام وتدفعها إلى مكدس الاستدعاءات للتنفيذ. تتكرر هذه العملية إلى أجل غير مسمى، مما يسمح لـ JavaScript بالتعامل مع عمليات متعددة في آن واحد ظاهريًا.

\n\n

تخيلها كعامل مجتهد يتحقق باستمرار من أمرين: "هل أنا أعمل حاليًا على شيء ما (مكدس الاستدعاءات)؟" و "هل هناك أي شيء ينتظر مني القيام به (قائمة المهام)؟" إذا كان العامل خاملًا (مكدس الاستدعاءات فارغًا) وهناك مهام تنتظر (قائمة المهام ليست فارغة)، فإن العامل يلتقط المهمة التالية ويبدأ في العمل عليها.

\n\n

في جوهرها، حلقة الأحداث هي المحرك الذي يسمح لـ JavaScript بأداء عمليات غير حظرية. بدونها، ستقتصر JavaScript على تنفيذ التعليمات البرمجية بشكل تسلسلي، مما يؤدي إلى تجربة مستخدم سيئة، خاصة في متصفحات الويب وبيئات Node.js التي تتعامل مع عمليات الإدخال/الإخراج (I/O)، وتفاعلات المستخدم، والأحداث غير المتزامنة الأخرى.

\n\n

مكدس الاستدعاءات: حيث يتم تنفيذ التعليمات البرمجية

\n\n

مكدس الاستدعاءات هو بنية بيانات تتبع مبدأ "آخر من يدخل، أول من يخرج" (LIFO). إنه المكان الذي يتم فيه تنفيذ تعليمات JavaScript البرمجية فعليًا. عندما يتم استدعاء دالة، يتم دفعها إلى مكدس الاستدعاءات. وعندما تنهي الدالة تنفيذها، يتم إزالتها من المكدس.

\n\n

ضع في اعتبارك هذا المثال البسيط:

\n\n

\n\nfunction firstFunction() {\n  console.log('First function');\n  secondFunction();\n}\n\nfunction secondFunction() {\n  console.log('Second function');\n}\n\nfirstFunction();\n\n

\n\n

إليك كيف سيبدو مكدس الاستدعاءات أثناء التنفيذ:

\n\n

\n
1. في البداية، يكون مكدس الاستدعاءات فارغًا.
\n
2. يتم استدعاء firstFunction() ودفعها إلى المكدس.
\n
3. داخل firstFunction()، يتم تنفيذ console.log('First function').
\n
4. يتم استدعاء secondFunction() ودفعها إلى المكدس (فوق firstFunction()).
\n
5. داخل secondFunction()، يتم تنفيذ console.log('Second function').
\n
6. تكمل secondFunction() عملها وتتم إزالتها من المكدس.
\n
7. تكمل firstFunction() عملها وتتم إزالتها من المكدس.
\n
8. أصبح مكدس الاستدعاءات فارغًا الآن مرة أخرى.
\n

\n\n

إذا استدعت دالة نفسها بشكل متكرر دون شرط خروج مناسب، فقد يؤدي ذلك إلى خطأ تجاوز سعة المكدس (Stack Overflow)، حيث يتجاوز مكدس الاستدعاءات حجمه الأقصى، مما يتسبب في تعطل البرنامج.

\n\n

قائمة المهام (قائمة الاستدعاءات): التعامل مع العمليات غير المتزامنة

\n\n

قائمة المهام (المعروفة أيضًا باسم قائمة الاستدعاءات أو قائمة المهام الكبيرة) هي قائمة انتظار للمهام التي تنتظر معالجتها بواسطة حلقة الأحداث. تُستخدم للتعامل مع العمليات غير المتزامنة مثل:

\n\n

\n
• استدعاءات setTimeout و setInterval
\n
• مستمعي الأحداث (مثل، أحداث النقر، أحداث ضغط المفاتيح)
\n
• استدعاءات XMLHttpRequest (XHR) و fetch (لطلبات الشبكة)
\n
• أحداث تفاعل المستخدم
\n

\n\n

عندما تكتمل عملية غير متزامنة، يتم وضع دالة الاستدعاء الخاصة بها في قائمة المهام. ثم تلتقط حلقة الأحداث هذه الاستدعاءات واحدة تلو الأخرى وتنفذها على مكدس الاستدعاءات عندما يكون فارغًا.

\n\n

دعنا نوضح هذا بمثال setTimeout:

\n\n

\n\nconsole.log('Start');\n\nsetTimeout(() => {\n  console.log('Timeout callback');\n}, 0);\n\nconsole.log('End');\n\n

\n\n

قد تتوقع أن يكون الناتج:

\n\n

\n\nStart\nTimeout callback\nEnd\n\n

\n\n

ومع ذلك، فإن الناتج الفعلي هو:

\n\n

\n\nStart\nEnd\nTimeout callback\n\n

\n\n

إليك السبب:

\n\n

\n
1. يتم تنفيذ console.log('Start') ويسجل "Start".
\n
2. يتم استدعاء setTimeout(() => { ... }, 0). على الرغم من أن التأخير 0 مللي ثانية، إلا أن دالة الاستدعاء لا يتم تنفيذها فورًا. بدلاً من ذلك، يتم وضعها في قائمة المهام.
\n
3. يتم تنفيذ console.log('End') ويسجل "End".
\n
4. أصبح مكدس الاستدعاءات فارغًا الآن. تتحقق حلقة الأحداث من قائمة المهام.
\n
5. يتم نقل دالة الاستدعاء من setTimeout من قائمة المهام إلى مكدس الاستدعاءات ويتم تنفيذها، وتسجل "Timeout callback".
\n

\n\n

يوضح هذا أنه حتى مع تأخير 0 مللي ثانية، يتم دائمًا تنفيذ استدعاءات setTimeout بشكل غير متزامن، بعد انتهاء تشغيل الكود المتزامن الحالي.

\n\n

قائمة المهام الدقيقة: أولوية أعلى من قائمة المهام

\n\n

قائمة المهام الدقيقة هي قائمة انتظار أخرى تديرها حلقة الأحداث. لقد تم تصميمها للمهام التي يجب تنفيذها في أقرب وقت ممكن بعد اكتمال المهمة الحالية، ولكن قبل أن تقوم حلقة الأحداث بإعادة العرض أو التعامل مع أحداث أخرى. فكر فيها كقائمة انتظار ذات أولوية أعلى مقارنة بقائمة المهام.

\n\n

المصادر الشائعة للمهام الدقيقة تشمل:

\n\n

\n
• الوعود (Promises): يتم إضافة استدعاءات .then() و .catch() و .finally() للوعود إلى قائمة المهام الدقيقة.
\n
• MutationObserver: يستخدم لمراقبة التغييرات في DOM (نموذج كائن المستند). يتم إضافة استدعاءات مراقب التغيير أيضًا إلى قائمة المهام الدقيقة.
\n
• process.nextTick() (Node.js): يجدول دالة استدعاء ليتم تنفيذها بعد اكتمال العملية الحالية، ولكن قبل أن تستمر حلقة الأحداث. على الرغم من قوتها، يمكن أن يؤدي الإفراط في استخدامها إلى تجويع عمليات الإدخال/الإخراج (I/O).
\n
• queueMicrotask() (واجهة برمجة تطبيقات متصفح جديدة نسبيًا): طريقة موحدة لإضافة مهمة دقيقة إلى قائمة الانتظار.
\n

\n\n

الفرق الرئيسي بين قائمة المهام وقائمة المهام الدقيقة هو أن حلقة الأحداث تعالج جميع المهام الدقيقة المتاحة في قائمة المهام الدقيقة قبل التقاط المهمة التالية من قائمة المهام. وهذا يضمن تنفيذ المهام الدقيقة فورًا بعد اكتمال كل مهمة، مما يقلل التأخيرات المحتملة ويحسن الاستجابة.

\n\n

ضع في اعتبارك هذا المثال الذي يتضمن الوعود (Promises) و setTimeout:

\n\n

\n\nconsole.log('Start');\n\nPromise.resolve().then(() => {\n  console.log('Promise callback');\n});\n\nsetTimeout(() => {\n  console.log('Timeout callback');\n}, 0);\n\nconsole.log('End');\n\n

\n\n

الناتج سيكون:

\n\n

\n\nStart\nEnd\nPromise callback\nTimeout callback\n\n

\n\n

إليك التفصيل:

\n\n

\n
1. يتم تنفيذ console.log('Start').
\n
2. يتم إنشاء وعد محلول (resolved Promise) بواسطة Promise.resolve().then(() => { ... }). يتم إضافة استدعاء .then() إلى قائمة المهام الدقيقة.
\n
3. يضيف setTimeout(() => { ... }, 0) استدعاءه إلى قائمة المهام.
\n
4. يتم تنفيذ console.log('End').
\n
5. مكدس الاستدعاءات فارغ. تتحقق حلقة الأحداث أولاً من قائمة المهام الدقيقة.
\n
6. يتم نقل استدعاء الوعد من قائمة المهام الدقيقة إلى مكدس الاستدعاءات ويتم تنفيذه، ويسجل "Promise callback".
\n
7. أصبحت قائمة المهام الدقيقة فارغة الآن. ثم تتحقق حلقة الأحداث من قائمة المهام.
\n
8. يتم نقل استدعاء setTimeout من قائمة المهام إلى مكدس الاستدعاءات ويتم تنفيذه، ويسجل "Timeout callback".
\n

\n\n

يوضح هذا المثال بوضوح أن المهام الدقيقة (استدعاءات الوعد) يتم تنفيذها قبل المهام (استدعاءات setTimeout)، حتى عندما يكون تأخير setTimeout هو 0.

\n\n

أهمية تحديد الأولويات: المهام الدقيقة مقابل المهام

\n\n

تحديد أولوية المهام الدقيقة على المهام أمر بالغ الأهمية للحفاظ على واجهة مستخدم سريعة الاستجابة. غالبًا ما تتضمن المهام الدقيقة عمليات يجب تنفيذها في أقرب وقت ممكن لتحديث DOM أو التعامل مع تغييرات البيانات الهامة. من خلال معالجة المهام الدقيقة قبل المهام، يمكن للمتصفح ضمان أن هذه التحديثات تنعكس بسرعة، مما يحسن الأداء المتصور للتطبيق.

\n\n

على سبيل المثال، تخيل موقفًا تقوم فيه بتحديث واجهة المستخدم بناءً على بيانات تم استلامها من خادم. يضمن استخدام الوعود (التي تستفيد من قائمة المهام الدقيقة) للتعامل مع معالجة البيانات وتحديثات واجهة المستخدم تطبيق التغييرات بسرعة، مما يوفر تجربة مستخدم أكثر سلاسة. إذا كنت ستستخدم setTimeout (التي تستفيد من قائمة المهام) لهذه التحديثات، فقد يكون هناك تأخير ملحوظ، مما يؤدي إلى تطبيق أقل استجابة.

\n\n

التجويع: عندما تحظر المهام الدقيقة حلقة الأحداث

\n\n

بينما تم تصميم قائمة المهام الدقيقة لتحسين الاستجابة، من الضروري استخدامها بحكمة. إذا قمت بإضافة مهام دقيقة باستمرار إلى قائمة الانتظار دون السماح لحلقة الأحداث بالانتقال إلى قائمة المهام أو عرض التحديثات، فيمكنك التسبب في التجويع. يحدث هذا عندما لا تصبح قائمة المهام الدقيقة فارغة أبدًا، مما يؤدي بشكل فعال إلى حظر حلقة الأحداث ومنع تنفيذ المهام الأخرى.

\n\n

ضع في اعتبارك هذا المثال (ينطبق بشكل أساسي في بيئات مثل Node.js حيث يتوفر process.nextTick، ولكنه قابل للتطبيق من حيث المفهوم في أماكن أخرى):

\n\n

\n\nfunction starve() {\n  Promise.resolve().then(() => {\n    console.log('Microtask executed');\n    starve(); // Recursively add another microtask\n  });\n}\n\nstarve();\n\n

\n\n

في هذا المثال، تقوم دالة starve() بإضافة استدعاءات وعد جديدة باستمرار إلى قائمة المهام الدقيقة. ستظل حلقة الأحداث عالقة في معالجة هذه المهام الدقيقة إلى أجل غير مسمى، مما يمنع تنفيذ المهام الأخرى وقد يؤدي إلى تجميد التطبيق.

\n\n

أفضل الممارسات لتجنب التجويع:

\n\n

\n
• قلل عدد المهام الدقيقة التي يتم إنشاؤها ضمن مهمة واحدة. تجنب إنشاء حلقات تكرارية للمهام الدقيقة التي يمكن أن تحظر حلقة الأحداث.
\n
• فكر في استخدام setTimeout للعمليات الأقل أهمية. إذا لم تتطلب عملية ما تنفيذًا فوريًا، فإن تأجيلها إلى قائمة المهام يمكن أن يمنع قائمة المهام الدقيقة من التحميل الزائد.
\n
• كن واعيًا للآثار المترتبة على أداء المهام الدقيقة. على الرغم من أن المهام الدقيقة أسرع عمومًا من المهام، إلا أن الاستخدام المفرط لا يزال يؤثر على أداء التطبيق.
\n

\n\n

أمثلة واقعية وحالات استخدام

\n\n

المثال 1: تحميل الصور غير المتزامن باستخدام الوعود (Promises)

\n\n

\n\nfunction loadImage(url) {\n  return new Promise((resolve, reject) => {\n    const img = new Image();\n    img.onload = () => resolve(img);\n    img.onerror = () => reject(new Error(`Failed to load image at ${url}`));\n    img.src = url;\n  });\n}\n\n// Example usage:\nloadImage('https://example.com/image.jpg')\n  .then(img => {\n    // Image loaded successfully.  Update the DOM.\n    document.body.appendChild(img);\n  })\n  .catch(error => {\n    // Handle image loading error.\n    console.error(error);\n  });\n\n

\n\n

في هذا المثال، تعيد دالة loadImage وعدًا يتم حله عند تحميل الصورة بنجاح أو رفضه إذا كان هناك خطأ. يتم إضافة استدعاءات .then() و .catch() إلى قائمة المهام الدقيقة، مما يضمن تنفيذ تحديث DOM ومعالجة الأخطاء فورًا بعد اكتمال عملية تحميل الصورة.

\n\n

المثال 2: استخدام MutationObserver لتحديثات واجهة المستخدم الديناميكية

\n\n

\n\nconst observer = new MutationObserver(mutations => {\n  mutations.forEach(mutation => {\n    console.log('Mutation observed:', mutation);\n    // Update the UI based on the mutation.\n  });\n});\n\nconst elementToObserve = document.getElementById('myElement');\n\nobserver.observe(elementToObserve, {\n  attributes: true,\n  childList: true,\n  subtree: true\n});\n\n// Later, modify the element:\nelementToObserve.textContent = 'New content!';\n\n

\n\n

يسمح لك MutationObserver بمراقبة التغييرات على DOM. عندما يحدث تغيير (على سبيل المثال، يتم تغيير سمة، أو يتم إضافة عقدة فرعية)، يتم إضافة استدعاء MutationObserver إلى قائمة المهام الدقيقة. وهذا يضمن تحديث واجهة المستخدم بسرعة استجابةً لتغييرات DOM.

\n\n

المثال 3: التعامل مع طلبات الشبكة باستخدام Fetch API

\n\n

\n\nfetch('https://api.example.com/data')\n  .then(response => response.json())\n  .then(data => {\n    console.log('Data received:', data);\n    // Process the data and update the UI.\n  })\n  .catch(error => {\n    console.error('Error fetching data:', error);\n    // Handle the error.\n  });\n\n

\n\n

Fetch API هي طريقة حديثة لإجراء طلبات الشبكة في JavaScript. تتم إضافة استدعاءات .then() إلى قائمة المهام الدقيقة، مما يضمن تنفيذ معالجة البيانات وتحديثات واجهة المستخدم بمجرد استلام الاستجابة.

\n\n

اعتبارات حلقة الأحداث في Node.js

\n\n

تعمل حلقة الأحداث في Node.js بشكل مشابه لبيئة المتصفح ولكنها تحتوي على بعض الميزات الخاصة. تستخدم Node.js مكتبة libuv، التي توفر تطبيقًا لحلقة الأحداث جنبًا إلى جنب مع إمكانيات الإدخال/الإخراج (I/O) غير المتزامنة.

\n\n

process.nextTick(): كما ذكرنا سابقًا، process.nextTick() هي دالة خاصة بـ Node.js تتيح لك جدولة استدعاء ليتم تنفيذه بعد اكتمال العملية الحالية، ولكن قبل أن تستمر حلقة الأحداث. يتم تنفيذ الاستدعاءات المضافة باستخدام process.nextTick() قبل استدعاءات الوعد في قائمة المهام الدقيقة. ومع ذلك، نظرًا لاحتمال حدوث التجويع، يجب استخدام process.nextTick() باعتدال. يفضل عمومًا استخدام queueMicrotask() عند توفرها.

\n\n

setImmediate(): تقوم دالة setImmediate() بجدولة استدعاء ليتم تنفيذه في التكرار التالي لحلقة الأحداث. إنها مشابهة لـ setTimeout(() => { ... }, 0)، ولكن setImmediate() مصممة للمهام المتعلقة بالإدخال/الإخراج (I/O). يمكن أن يكون ترتيب التنفيذ بين setImmediate() و setTimeout(() => { ... }, 0) غير متوقع ويعتمد على أداء الإدخال/الإخراج للنظام.

\n\n

أفضل الممارسات لإدارة حلقة الأحداث بكفاءة

\n\n

\n
• تجنب حظر الخيط الرئيسي. العمليات المتزامنة طويلة الأمد يمكن أن تحظر حلقة الأحداث، مما يجعل التطبيق غير مستجيب. استخدم العمليات غير المتزامنة كلما أمكن ذلك.
\n
• حسّن كودك. الكود الفعال ينفذ بشكل أسرع، مما يقلل من الوقت المستغرق في مكدس الاستدعاءات ويسمح لحلقة الأحداث بمعالجة المزيد من المهام.
\n
• استخدم الوعود (Promises) للعمليات غير المتزامنة. توفر الوعود طريقة أنظف وأسهل في الإدارة للتعامل مع الكود غير المتزامن مقارنة بالاستدعاءات التقليدية.
\n
• كن حذرًا من قائمة المهام الدقيقة. تجنب إنشاء مهام دقيقة زائدة قد تؤدي إلى التجويع.
\n
• استخدم Web Workers للمهام التي تتطلب حسابات مكثفة. تسمح Web Workers بتشغيل كود JavaScript في خيوط منفصلة، مما يمنع حظر الخيط الرئيسي. (خاص ببيئة المتصفح)
\n
• قم بتحليل كودك. استخدم أدوات مطور المتصفح أو أدوات تحليل أداء Node.js لتحديد عنق الزجاجة في الأداء وتحسين كودك.
\n
• Debounce و throttle الأحداث. بالنسبة للأحداث التي يتم تشغيلها بشكل متكرر (مثل أحداث التمرير، أحداث تغيير الحجم)، استخدم Debouncing أو Throttling للحد من عدد مرات تنفيذ معالج الحدث. يمكن أن يؤدي هذا إلى تحسين الأداء عن طريق تقليل الحمل على حلقة الأحداث.
\n

\n\n

الخاتمة

\n\n

يعد فهم حلقة الأحداث في JavaScript، وقائمة المهام، وقائمة المهام الدقيقة أمرًا ضروريًا لكتابة تطبيقات JavaScript عالية الأداء وسريعة الاستجابة. من خلال فهم كيفية عمل حلقة الأحداث، يمكنك اتخاذ قرارات مستنيرة حول كيفية التعامل مع العمليات غير المتزامنة وتحسين كودك للحصول على أداء أفضل. تذكر تحديد أولويات المهام الدقيقة بشكل مناسب، وتجنب التجويع، واسعَ دائمًا للحفاظ على الخيط الرئيسي خاليًا من العمليات الحظرية.

\n\n

قدم هذا الدليل نظرة عامة شاملة على حلقة الأحداث في JavaScript. من خلال تطبيق المعرفة وأفضل الممارسات الموضحة هنا، يمكنك بناء تطبيقات JavaScript قوية وفعالة توفر تجربة مستخدم رائعة.