الصور والصور · محول الصور والضاغط
كيف يحافظ Web Workers وOffscreenCanvas على استجابة تحويل الصور
· كيف يعمل
معالجة المتصفح قماش عمال الويب
يستغرق ترميز صورة كبيرة وقتًا حقيقيًا قدره CPU، وسيؤدي القيام بذلك في سلسلة المحادثات الرئيسية إلى تجميد الصفحة. يشرح هذا المنشور كيفية قيام Web Workers وOffscreenCanvas بنقل هذا العمل خارج سلسلة واجهة المستخدم وما تعنيه هذه البنية بالنسبة للخصوصية والحدود.
علامة التبويب التي يمكن أن تتجمد - ماذا يحدث عند تشغيل تشفير ثقيل على مؤشر الترابط الذي يرسم الصفحة أيضًا
يتطلب فك تشفير الدفعة وإعادة رسمها وترميزها CPU العمل وذاكرة البكسل التي تم فك تشفيرها. إذا تم تشغيل كل عملية في نفس حلقة الحدث التي تتعامل مع عناصر التحكم وتحديثات التقدم والرسم، فقد تتوقف الواجهة عن الاستجابة حتى انتهاء الملف. وبالتالي، تقوم اللوحة المركزة بإنشاء عامل وحدة بتكاسل عندما يبدأ التحويل الأول بدلاً من دفع تكلفة بدء التشغيل للزائر الذي لم يقم بالتحويل مطلقًا.
الاستجابة هي هدف معماري، وليس رقم توقيت موعود. لا يزال تحميل الجهاز وأبعاد الصورة وتنفيذ المتصفح وتكوين الدفعة يحدد مدى مرونة الصفحة. التحقق من خلال الملفات التمثيلية الموجودة على الأجهزة المهمة؛ لا تنشر مدة تحويل عالمية أو تدعي أن العامل يجعل العمل باهظ الثمن مجانيًا.
الموضوع الرئيسي وسبب أهميته - موضوع واحد للتخطيط والإدخال والبرامج النصية ومدة حظر المهام الثلاثة
يمتلك الموضوع الرئيسي DOM وعناصر التحكم التي يلمسها الزائر. يستخدمه ToolAcre للتحقق من صحة التحديدات، وفك تشفير أبعاد المصدر لفترة وجيزة، وإعدادات البناء، وحالة العرض، وتنزيل النتائج. توجد عمليات فك التشفير المتكررة ورسم اللوحة القماشية وحلقة التشفير خلف `image.worker.js`، مما يسمح بعودة رسائل التقدم بين الملفات.
لا يقوم العامل بإلغاء كل مهمة ذات مؤشر ترابط رئيسي. يتم في البداية فحص كل ملف محدد وقياسه في اللوحة، ثم يتم تحويل النتائج لاحقًا إلى معاينات وإجراءات تنزيل هناك. يقوم التصميم بنقل التدفق الثقيل المتكرر بعيدًا عن ملكية الواجهة مع الحفاظ على واجهات برمجة تطبيقات المتصفح والعرض التقديمي في السياق الذي ينتمي إليه كل منها.
عمال الويب: سلسلة رسائل ثانية بدون DOM — ما يمكن للعامل وما لا يمكنه لمسه، وكيف تنتقل الملفات إليه
ليس لدى العامل حق وصول عادي DOM. يتلقى أوصاف العناصر القابلة للتسلسل والإعدادات وArrayBuffer لكل ملف. بالنسبة لكل عنصر، يقوم بإنشاء نفس خطة التحويل النقية التي تستخدمها الواجهة، وإنشاء كائن ثنائي كبير الحجم، وتنفيذ فك ترميز السحب، وتحويل كائن ثنائي كبير الحجم الناتج إلى بايت، وتسجيل فشل لكل ملف دون التخلي عن بقية الدفعة.
تشكل هذه العزلة أيضًا معالجة الأخطاء. يمكن أن يدخل الملف التالف إلى مصفوفة الفشل بينما تستمر العناصر اللاحقة. يتحقق العامل من الإلغاء بين العناصر ويبلغ عن التقدم باستخدام اسم الملف الحالي. تترجم واجهة المستخدم مهلة العامل إلى نصيحة لتجربة صور أقل أو أصغر بدلاً من ترك زر معطل بدون أي تفسير.
OffscreenCanvas: الرسم والتشفير بدون عنصر مرئي - كيف يحصل العامل على اللوحة القماشية الخاصة به ويستدعي تحويل ToBlob
`createCanvas` يفضل `OffscreenCanvas` عند وجود المُنشئ. داخل هذا المسار، يستدعي `encodeCanvas` `convertToBlob` بالنوع المستهدف MIME والجودة الاختيارية. يمكن للعارض نفسه أيضًا إنشاء لوحة قماشية HTML واستخدام `toBlob` المستندة إلى رد الاتصال، مع الاحتفاظ بنسخة احتياطية للسياقات التي لا يتوفر فيها OffscreenCanvas.
من المهم وصف الإجراء الاحتياطي بدقة. يُفضل استخدام OffscreenCanvas، وليست اللوحة القماشية الوحيدة الممكنة في المصدر. وبالمثل، يتم التحقق من تشفير المتصفح WebP من خلال نتيجة التشفير النهائية بدلاً من افتراضه من دعم فك التشفير. يعد التطبيق بحدوث خطأ عندما لا يتمكن برنامج التشفير المطلوب من إنتاج التنسيق، وليس الاستبدال الصامت بنوع MIME آخر.
النسخ القابلة للتحويل والنسخ - نقل ImageBitmap أو ArrayBuffer إلى عامل دون تكرار عشرات الميجابايت
قبل استدعاء العامل، تقرأ اللوحة كل ملف في ArrayBuffer وتضمين تلك المخازن المؤقتة في قائمة النقل. تنتقل الملكية إلى العامل بدلاً من استنساخ كل مخزن مؤقت للإدخال. بعد التشفير، يقوم العامل بتغليف بايتات Blob في Uint8Array ويسجل مخزن النسخ الاحتياطي هذا للنقل على مسار الاستجابة.
يؤدي هذا إلى تقليل النسخ الذي يمكن تجنبه، لكن الصور واللوحات القماشية التي تم فك تشفيرها لا تزال تشغل الذاكرة. يقوم `executePlan` بإغلاق كل صورة ImageBitmap في كتلة `finally` بحيث يمكن تحرير وحدات البكسل التي تم فك تشفيرها على الفور. تعالج العناصر القابلة للتحويل والتنظيف الصريح للصور النقطية وحارس ميزانية البكسل مصادر مختلفة للضغط؛ لا شيء يسمح بمطالبة دفعة غير محدودة.
لماذا تعتبر هذه البنية أيضًا قصة الخصوصية - حيث يوجد المسار بأكمله في علامة التبويب الخاصة بك، وتظل لوحة الشبكة صامتة
يستدعي رمز التحويل واجهات برمجة تطبيقات صورة المتصفح وقماش الرسم بدون طلب تحميل ملف. يقوم حراس اختبار الوحدة بالتخطيط لكل مجموعة مدخلات ومخرجات مدعومة مع منع الوصول إلى الشبكة. بيان خصوصية التكوين ضيق بالمثل: لا يقدم كود الأداة أي طلب يحمل الملف أو النص الملصق أو المخرجات التي تم إنشاؤها.
لا يزال بإمكان الصفحة نفسها تحميل أصول الموقع والنصوص البرمجية الخارجية المكشوفة، لذا تحتاج "لوحة الشبكة الصامتة" إلى تفسير. امسح DevTools بعد التحميل وابحث عن اسم ملف اختبار مميز غير ضار أو بايتات الحمولة في الطلبات الجديدة. تدعم مراجعة المصدر ومراقبة وقت التشغيل معًا المطالبة المتعلقة بمسار التحويل؛ ولا يحول بيئة المتصفح بأكملها إلى وضع حماية غير متصل بالإنترنت.
من أين تأتي الحدود - تحل أغطية الذاكرة والقماش محل حدود التحميل، وبالتالي فإن السقف هو جهازك
تستبدل المعالجة المحلية حد التحميل بقيود من التحقق من صحة الإدخال، ووحدات البكسل التي تم فك تشفيرها، وتخصيص اللوحة القماشية، وذاكرة الجهاز المتوفرة. يتم تحديد كل ملف إدخال بـ 40 MB بواسطة اللوحة المركزة. يتم ملاءمة هندسة المخرجات المخططة لميزانية بكسل الجهاز، ويتلقى المستخدم تحذيرًا يذكر الأبعاد المخفضة عندما يقوم هذا الحارس بتغيير الطلب.
لا يوجد عدد دفعات ثابت في التكوين. عشرين رسمًا صغيرًا وعشرين صورة عالية الدقة لا تعتبر مخصصات متساوية. يمكن أن يفشل الهاتف قبل سطح المكتب. النصيحة التشغيلية الصادقة هي معالجة عدد أقل أو أصغر من الملفات بعد انتهاء المهلة أو فشل الذاكرة، وعدم نشر حد أقصى غير مدعوم أو سقف ميغابكسل.
الوجبات الجاهزة: واجهة سهلة الاستخدام وهادئة - كيف يقوم محول الصور والضاغط بإجراء التحويلات خارج الموضوع الرئيسي على جهازك
تظل الواجهة أكثر هدوءًا نظرًا لأن خط الأنابيب المتكرر يعمل في العامل، ويمكن أن تكون اللوحة القماشية الخاصة به خارج الشاشة وتنتقل مخازن البايت المؤقتة الكبيرة كمواد قابلة للتحويل. هذه خصائص مصدر ملموسة، وليست اختزالًا تسويقيًا. يشرحون مكان حدوث العمل وكيف يعود التقدم دون الادعاء بأن كل متصفح يقوم بجدولة العمل بشكل مماثل.
اختبر البنية باستخدام الصور التي يستخدمها سير عملك فعليًا. شاهد عناصر التحكم أثناء التحويل، وتأكد من تقدم كل ملف، وافحص حالات الفشل، وتحقق من لوحة الشبكة بحثًا عن علامة الاختبار. يمنحك تصميم ToolAcre دليلاً يمكن ملاحظته: وحدة عاملة حقيقية، ومخرجات مُقاسة ووحدات بايت للتنزيل المحلي بدلاً من مهمة بعيدة غير شفافة.