Event Loop في JavaScript: الفهم الذي يغير طريقة تفكيرك

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

Event Loop هو سير عمليات يديرها JavaScript لتنفيذ العمليات بشكل متزامن. يقوم بتشغيل الوظائف وفك الارتباط بالوظائف المنتهية، ويتأكد من أن جميع العمليات تتخذ TURN واحدة في كل مرة. هذا يعني أن JavaScript يمكنه تشغيل العمليات بشكل غير متزامن، مما يزيد من كفاءة تشغيل التطبيقات.

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

لماذا نحتاج إلى Event Loop؟

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

console.log('Hello World');
setTimeout(() => {
  console.log('World is beautiful');
}, 2000);

في المثال أعلاه، يتم تشغيل وظيفة setTimeout بعد مرور 2000 ميللي ثانية. لكن قبل ذلك، يُسمح لـ JavaScript بالاستمرار في تشغيل الشفرة البرمجية التالية، مما يعني أن JavaScript يمكنه تشغيل العمليات بشكل غير متزامن.

مكونات Event Loop

Event Loop تتكون من عدة مكونات رئيسية، وهي Call Stack و Web APIs و Callback Queue و Microtasks Queue.

• •Call Stack: وهو chồng الوظائف التي يتم تشغيلها في الوقت الحالي.
• •Web APIs: وهي واجهات برمجة التطبيقات التي توفرها المتصفحات أو البيئات الأخرى.
• •Callback Queue: وهي قائمة بالوظائف التي يتم تشغيلها بعد انتهاء الوظائف السابقة.
• •Microtasks Queue: وهي قائمة بالوظائف الصغيرة التي يتم تشغيلها بعد انتهاء الوظائف السابقة.

فيما يلي، سنلقي نظرة على كيفية عمل كل من هذه المكونات بشكل أكثر تفصيلاً.

كيفية عمل Event Loop

Event Loop تعمل على تشغيل الوظائف وفك الارتباط بالوظائف المنتهية، ويتأكد من أن جميع العمليات تتخذ TURN واحدة في كل مرة. عندما يتم تشغيل وظيفة، يتم إضافةها إلى Call Stack.

function foo() {
  console.log('foo');
}
foo();

بعد ذلك، يتم فحص Web APIs لتحديد ما إذا كان هناك أي وظائف يجب تشغيلها. إذا كان هناك وظائف، يتم إضافتها إلى Callback Queue.

setTimeout(() => {
  console.log('Timeout');
}, 1000);

بعد ذلك، يتم فحص Microtasks Queue لتحديد ما إذا كان هناك أي وظائف يجب تشغيلها. إذا كان هناك وظائف، يتم إضافتها إلى Call Stack.

Promise.resolve().then(() => {
  console.log('Promise');
});

استخدام Event Loop لتحسين أداء التطبيقات

Event Loop يمكن أن تساعد في تحسين أداء التطبيقات الخاصة بنا. يمكننا استخدامها لتشغيل العمليات بشكل غير متزامن، مما يزيد من كفاءة تشغيل التطبيقات.

function foo() {
  // تشغيل بعض العمليات
  setTimeout(() => {
    // تشغيل بعض العمليات الأخرى
  }, 1000);
}

في المثال أعلاه، يتم تشغيل وظيفة foo، ثم يتم تشغيل بعض العمليات بعد مرور 1000 ميللي ثانية. هذا يتيح لنا تشغيل العمليات بشكل غير متزامن، مما يزيد من كفاءة تشغيل التطبيقات.

خاتمة

Event Loop هي ميزة قوية في JavaScript يمكن أن تساعد في تحسين أداء التطبيقات الخاصة بنا. يمكننا استخدامها لتشغيل العمليات بشكل غير متزامن، مما يزيد من كفاءة تشغيل التطبيقات. في هذا المقال، لقد تعرفنا على كيفية عمل Event Loop وكيف يمكننا استخدامها لتحسين أداء التطبيقات الخاصة بنا.