عناصر قابلة للنقل - بسرعة فائقة

Eric Bidelman

أتاح الإصدار 13 من Chrome إرسال ArrayBuffer إلى Web Worker أو تلقّيها منه باستخدام خوارزمية تُعرف باسم النمذجة المُنسّقة. سمح ذلك لواجهة برمجة التطبيقات postMessage() API بقبول الرسائل التي لم تكن سلاسل فقط، بل أنواعًا معقّدة مثل File وBlob وArrayBuffer وعناصر JSON. تتوفّر ميزة "النمذجة المُنسّقة" أيضًا في الإصدارات الأحدث من Firefox.

الأسرع أفضل

إنّ ميزة "النمذجة المنظَّمة" رائعة، ولكنّها لا تزال عملية نسخ. يمكن أن تبلغ تكلفة نقل ArrayBuffer بحجم 32 ميغابايت إلى Worker مئات المللي ثانية. تحتوي الإصدارات الجديدة من المتصفّحات على تحسين كبير في الأداء لعملية تمرير الرسائل، والتي تُعرف باسم العناصر القابلة للنقل.

باستخدام العناصر القابلة للنقل، يتم نقل البيانات من سياق إلى آخر. لا يتم نسخ البيانات، ما يؤدي إلى تحسين أداء إرسال البيانات إلى Worker بشكل كبير. يمكنك اعتبارها عملية تمرير بالإشارة إذا كنت من مستخدمي لغة C/C++. ومع ذلك، على عكس طريقة "الاستناد إلى المراجع"، لم يعُد الإصدار من سياق الاستدعاء متاحًا بعد نقله إلى السياق الجديد. على سبيل المثال، عند نقل ArrayBuffer من تطبيقك الرئيسي إلى Worker، يتم محو ArrayBuffer الأصلي ولن يعود قابلاً للاستخدام. ويتم نقل محتوياته (بشكل حرفي) إلى سياق Worker.

للعب باستخدام العناصر القابلة للنقل، يتوفّر إصدار جديد من postMessage() يتيح استخدام هذه العناصر:

worker.postMessage(arrayBuffer, [transferableList]);
window.postMessage(arrayBuffer, targetOrigin, [transferableList]);

بالنسبة إلى حالة العامل، تكون الوسيطة الأولى هي رسالة ArrayBuffer. الوسيطة الثانية هي قائمة بالعناصر التي يجب نقلها. في هذا المثال، يمكنك تحديد arrayBuffer في القائمة القابلة للنقل.

عرض توضيحي لمقياس الأداء

للاطّلاع على التحسينات في الأداء التي تحقّقها العناصر القابلة للنقل، أنشأت عرضًا توضيحيًا.

يُرسِل العرض التوضيحي ArrayBuffer بحجم 32 ميغابايت إلى عامل وعكسه باستخدام postMessage(). إذا كان متصفحك لا يتيح استخدام العناصر القابلة للنقل، سيعود النموذج إلى استخدام ميزة "النمذجة المنظَّمة". في ما يلي النتائج التي حصلنا عليها بعد إجراء 5 عمليات تشغيل في متصفّحات مختلفة:

على جهاز MacBook Pro/10.6.8/2.53 GHz/Intel Core 2 Duo، كان FF هو الأسرع باستخدام ميزة "النمذجة المنظَّمة". في المتوسّط، استغرق إرسال ArrayBuffer بحجم 32 ميغابايت إلى عامل وإعادة نشره إلى سلسلة المحادثات الرئيسية (RRT - مدة الذهاب والعودة) 302 ملي ثانية. وبالمقارنة مع العناصر القابلة للنقل، استغرق الاختبار نفسه 6.6 ملي ثانية. هذا تحسن كبير في الأداء.

تتيح هذه الأنواع من السرعات نقل مواد WebGL أو الشبكات بشكل سلس بين Worker والتطبيق الرئيسي.

رصد الميزات

إنّ رصد العناصر في هذا الفيديو أمر صعب بعض الشيء. أنصحك بإرسال ArrayBuffer صغير إلى العامل. إذا تم نقل المخزن المؤقت بدون نسخه، ستصبح قيمة .byteLength 0:

var ab = new ArrayBuffer(1);
worker.postMessage(ab, [ab]);
if (ab.byteLength) {
    alert('Transferables are not supported in your browser!');
} else {
    // Transferables are supported.
}

التوافق: يتوافق التطبيق حاليًا مع الإصدار 17 من Chrome والإصدارات الأحدث، وFirefox وOpera وSafari وIE10 والإصدارات الأحدث.

تم التعديل (13-12-2011): يختلف مقتطف الرمز لعرض توقيع webkitPostMessage() في النافذة والعامل. تم التعديل (03‏-11‏-2016): تمت إزالة بادئات المورّدين وتعديل مقتطفات الرموز