معالجة الصور عالية الأداء من جهة العميل
أصبحت معالجة الصور في المتصفح الآن متطلباً أساسياً. قد تقوم ببناء محررات صور، أو مجموعات أدوات الأصول، أو فلاتر إمكانية الوصول. وللحفاظ على استجابة واجهة المستخدم (UI)، فأنت بحاجة إلى زمن انتقال منخفض (low latency).
إحدى المهام البسيطة هي عكس الألوان (color inversion). وهذا يعني قلب قيم RGB إلى قيمها السالبة. إذا استخدمت النهج التقليدي على صور بدقة 4K، فستواجه اختناقات في الأداء (hardware bottlenecks).
المشكلة: التكرار الساذج (Naive Iteration)
يستخدم معظم المطورين طريقة getImageData(). تعيد هذه الطريقة Uint8ClampedArray. يخزن هذا المصفوفة البكسلات كقنوات أحمر، وأخضر، وأزرق، وشفافية (RGBA).
يبدو التكرار القياسي كالتالي:
- الدوران عبر كل بايت على حدة.
- طرح كل قيمة لون من 255.
- تخطي قناة الشفافية (Alpha).
هذا يعمل مع الصور الصغيرة، لكنه يفشل مع أصول الـ 4K. تحتوي صورة 4K على أكثر من 8 ملايين بكسل. يقوم التكرار القياسي بأكثر من 33 مليون عملية كتابة منفصلة، مما يؤدي إلى حظر الخيط الرئيسي (main thread)، ويسبب تعثراً في المتصفح وفقدان الإطارات (drops frames).
الحل: التلاعب بالمخزن المؤقت (Buffer) بنظام 32 بت
يمكنك التوقف عن التعامل مع البكسلات كأربع قنوات منفصلة. بدلاً من ذلك، قم بوضع Uint32Array فوق مخزن البيانات (data buffer).
باستخدام عرض 32 بت، تقوم بتجميع R و G و B و A في عدد صحيح واحد. الآن، يقوم التكرار الخاص بك بـ 8.2 مليون تكرار فقط بدلاً من 33 مليوناً. أنت تعالج عملية واحدة لكل بكسل بدلاً من أربع عمليات.
عكس الألوان السريع عبر عملية XOR المنطقية (Bitwise XOR)
لعكس الألوان دون المساس بالشفافية (Alpha)، استخدم عامل XOR المنطقي (^). استخدم القناع (mask) 0x00FFFFFF.
كيف يعمل:
- يستهدف القناع بتات الألوان فقط.
- تبقى بتات الشفافية (Alpha) كما هي.
- تعالج وحدة المعالجة المركزية (CPU) هذا في دورة واحدة.
النتائج:
- أصول 1080p: أسرع بـ 3.8 مرة.
- قوالب 2K: أسرع بـ 4.1 مرة.
- خلفيات 4K: أسرع بـ 4.4 مرة.
نصيحة احترافية: استخدم Web Workers إذا كنت تعالج العديد من الملفات عالية الدقة، فحتى عمليات الـ 32 بت يمكن أن تبطئ واجهة المستخدم. انقل المنطق البرمجي إلى Web Worker. استخدم الكائنات القابلة للنقل (Transferable Objects) لتمرير المخزن المؤقت (buffer). هذا يتجنب نسخ البيانات ويحافظ على الخيط الرئيسي (main thread) حراً.
توقف عن استخدام حلقات التكرار الثقيلة. استخدم كلمات (words) بحجم 32 بت وعلامات منطقية (bitwise flags) لبناء مسارات معالجة صور (image pipelines) رشيقة وسريعة.