120- دروس جافا سكربت – Web Worker API

## مقدمة إلى Web Worker API في JavaScript

مع تطور تطبيقات الويب وزيادة تعقيدها، أصبحت الحاجة إلى معالجة العمليات الثقيلة والمعقدة دون التأثير على أداء واجهة المستخدم أمراً ملحاً. هنا يأتي دور **Web Worker API** في JavaScript، الذي يسمح بتشغيل أجزاء من الشيفرة في خيوط منفصلة عن الخيط الرئيسي للمتصفح.

### ما هو Web Worker؟

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

### إنشاء Web Worker

لإنشاء Web Worker، تحتاج أولاً إلى ملف JavaScript منفصل يحتوي على الشيفرة التي تريد تشغيلها في الخلفية. بعد ذلك، يمكنك إنشاء كائن Worker في الشيفرة الرئيسية.

#### مثال بسيط

1. **ملف العامل (worker.js):**

// worker.js
onmessage = function(e) {
    console.log('Message received from main script:', e.data);
    let result = e.data * 2;
    postMessage(result);
}

2. **الملف الرئيسي (main.js):**

// main.js
if (window.Worker) {
    const myWorker = new Worker('worker.js');

    myWorker.postMessage(10);

    myWorker.onmessage = function(e) {
        console.log('Message received from worker:', e.data);
    };
} else {
    console.log('Your browser doesn't support web workers.');
}

في هذا المثال، نقوم بإنشاء عامل يقوم بمضاعفة الرقم المرسل إليه، ثم يعيد النتيجة إلى الشيفرة الرئيسية.

### التعامل مع البيانات في Web Worker

يمكن لـ Web Workers التعامل مع أنواع مختلفة من البيانات مثل النصوص، الأرقام، الكائنات، وحتى كائنات الـ JSON. ومع ذلك، لا يمكنهم الوصول إلى كائنات DOM مباشرة.

#### مثال على إرسال كائنات

1. **ملف العامل (worker.js):**

// worker.js
onmessage = function(e) {
    const data = e.data;
    console.log('Data received:', data);
    data.result = data.num1 + data.num2;
    postMessage(data);
}

2. **الملف الرئيسي (main.js):**

// main.js
if (window.Worker) {
    const myWorker = new Worker('worker.js');
    const message = { num1: 5, num2: 15 };

    myWorker.postMessage(message);

    myWorker.onmessage = function(e) {
        console.log('Result received from worker:', e.data.result);
    };
}

### إنهاء Web Worker

يمكنك إنهاء العامل يدويًا باستخدام دالة `terminate()`. هذا مفيد لتحرير الموارد عندما لا تكون بحاجة إلى العامل بعد الآن.

myWorker.terminate();

### القيود [شركة برمجة مصرية] والملاحظات

– **نطاق الأمان:** لا يمكن لـ Web Workers الوصول إلى الكائنات في DOM، مما يعني أنه لا يمكنهم تعديل محتوى [شركة برمجة مصرية] الصفحة مباشرة.
– **نفس الأصل:** يجب أن تكون الشيفرة البرمجية للعامل موجودة في نفس النطاق (origin) أو على الخادم.
– **الأداء:** رغم أن Web Workers يحسنون من أداء التطبيقات، إلا أن إنشاء الكثير من العمال يمكن أن يؤدي إلى استهلاك زائد للموارد.

### الخلاصة

Web Worker API هو أداة قوية لتحسين أداء تطبيقات الويب من خلال معالجة المهام الثقيلة في الخلفية دون التأثير على تجربة المستخدم. من خلال توزيع العمل على خيوط متعددة، يمكن لمطوري الويب إنشاء تطبيقات أكثر استجابة وسلاسة.

الوسوم: javascriptWeb Workersالأداءتطبيقات الويبخيوط متعددةمعالجة غير متزامنةواجهة برمجة التطبيقات