JavaScript Academy · درس

الكائنات القابلة للنقل

انقلوا البيانات بكفاءة دون نسخها.

الكائنات القابلة للنقل درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

تكلفة الاستنساخ

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

ما يمكن نقله

هناك أنواع محددة فقط من الكائنات القابلة للنقل، وأهمها ArrayBuffer. وتشمل الأنواع الأخرى MessagePort وImageBitmap وOffscreenCanvas.

ArrayBuffer — ذاكرة ثنائية خام
MessagePort — نقطة نهاية لقناة
ImageBitmap — بيانات صورة مفكوكة الترميز

قائمة النقل

تقبل postMessage وسيطًا ثانيًا: قائمة بالكائنات القابلة للنقل. تُنقل الكائنات الموجودة في هذه القائمة ولا تُنسخ.

const buffer = new ArrayBuffer(1024 * 1024); // 1 MB
worker.postMessage(buffer, [buffer]); // transfer it

انتقال الملكية

بعد النقل، لا يعود بإمكان الطرف المُرسل استخدام المخزن المؤقت؛ إذ يصبح منفصلًا (byteLength 0). ويمتلك الطرف المستقبِل الآن الذاكرة الأساسية نفسها، من دون إجراء أي نسخ.

const buffer = new ArrayBuffer(8);
worker.postMessage(buffer, [buffer]);
console.log(buffer.byteLength); // 0 - now detached

نقل المصفوفات المعرّفة النوع

تنقلون ArrayBuffer الأساسي لمصفوفة معرّفة النوع عبر خاصيتها .buffer. أما العرض نفسه فلا يمكن نقله، لكن يمكن نقل المخزن المؤقت الخاص به.

const data = new Float64Array(100000);
worker.postMessage(data, [data.buffer]);
// data is now detached on this side.

استقبال عملية نقل

يقرأ الطرف المستقبِل الكائن المنقول من event.data تمامًا كما يقرأ رسالة مستنسخة. والاختلاف الوحيد هو عدم حدوث أي نسخ.

// worker.js
self.onmessage = (e) => {
  const buffer = e.data; // we now own this memory
  const view = new Uint8Array(buffer);
  view[0] = 255;
};

إعادة إرسال النتائج

يمكن للعامل نقل المخزن المؤقت مرة أخرى بعد المعالجة، دون نسخ أيضًا، لإعادة الملكية إلى الخيط الرئيسي.

// worker.js
self.onmessage = (e) => {
  const buffer = e.data;
  // ...process the bytes...
  self.postMessage(buffer, [buffer]); // transfer back
};

أداء النقل مقارنة بالاستنساخ

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

تجنب أخطاء الاستخدام بعد النقل

من الأخطاء الشائعة قراءة المخزن المؤقت بعد نقله. تعاملوا دائمًا مع المخزن المؤقت على أنه لم يعد موجودًا بمجرد ظهوره في قائمة النقل.

worker.postMessage(buffer, [buffer]);
// BUG: buffer is detached here; this reads zero length.
// const len = buffer.byteLength; // 0

الجمع بين البيانات المستنسخة والمنقولة

يمكنكم إرسال كائن يحتوي على مخزن مؤقت ونقل ذلك المخزن المؤقت وحده. يُستنسخ الكائن، بينما يُنقل المخزن المؤقت المدرج في القائمة.

const msg = { type: 'frame', pixels: buffer };
worker.postMessage(msg, [buffer]);
// msg.type is cloned; buffer is transferred.

متى تستخدمون النقل

استخدموا الكائنات القابلة للنقل لمعالجة الصور والصوت والفيديو، وللحسابات العددية الكبيرة، ولأي مسار ينقل كتلًا ثنائية كبيرة بين الخيوط. أما البيانات الصغيرة الشبيهة بـ JSON، فاستنساخها العادي أبسط وكافٍ.

تحقق سريع

اختبروا مدى فهمكم للكائنات القابلة للنقل.

مراجعة

لقد تعلمتم عن الكائنات القابلة للنقل:

مرّروا قائمة النقل كوسيط ثانٍ إلى postMessage.
يُنقل ArrayBuffer (وبضعة أنواع أخرى) بدلًا من نسخه.
يصبح المخزن المؤقت لدى المُرسل منفصلًا بعد ذلك.
انقلوا المصفوفة المعرّفة النوع عبر .buffer الخاص بها.
استخدموا النقل مع البيانات الثنائية الكبيرة، والاستنساخ مع البيانات الصغيرة.

بعد ذلك، ستتعلمون حالات استخدام العمال وقيودهم.

الأسئلة الشائعة

هل درس «الكائنات القابلة للنقل» مجاني؟

نعم — نص درس «الكائنات القابلة للنقل» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «الكائنات القابلة للنقل»؟

انقلوا البيانات بكفاءة دون نسخها. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «الكائنات القابلة للنقل»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

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

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy