تقدم هذه المقالة بشكل أساسي البرنامج التعليمي حول استخدام قماش الطبقات لتحسين عرض HTML5. إنه يأتي من المستندات الفنية لمطور موقع IBM الرسمي. يمكن للأصدقاء الذين يحتاجون إليها الإشارة إلى المقدمة التالية
عادةً ، عند تشغيل الألعاب ثنائية الأبعاد أو تقديم قماش HTML5 ، يلزم إجراء تحسينات لاستخدام طبقات متعددة لإنشاء مشهد اصطناعي. في العروض ذات المستوى المنخفض مثل OpenGL أو WebGL ، يتم إجراء التقديم عن طريق تنظيف ورسم إطار المشهد حسب الإطار. بعد تنفيذ التقديم ، يجب تحسين اللعبة لتقليل مقدار التقديم ، وتختلف التكلفة المطلوبة من وضع إلى آخر. نظرًا لأن القماش هو عنصر DOM ، فإنه يمكّنك من طبقة اللوحات المتعددة كطريقة تحسين.
الاختصارات الشائعة
DOM: نموذج كائن المستند
HTML: لغة ترميز النص التشعبي (لغة ترميز النص التشعبي)
سوف تستكشف هذه المقالة عقلانية اللوحات الطبقات. فهم إعدادات DOM لتمكين قماش الطبقات. يتطلب استخدام التحسين الهرمي ممارسات مختلفة. سوف تستكشف هذه المقالة أيضًا بعض المفاهيم والتقنيات لاستراتيجيات التحسين التي تمتد على النهج الهرمي.
يمكنك تنزيل الكود المصدري للأمثلة المستخدمة في هذه المقالة.
حدد استراتيجية التحسين
يمكن أن يكون اختيار أفضل استراتيجية تحسين. عند اختيار سيناريو هرمي ، تحتاج إلى التفكير في كيفية تأليف السيناريو. غالبًا ما يتطلب تقديم الأشياء الثابتة على الشاشات الكبيرة إعادة استخدام العديد من المكونات ، والتي تعد مرشحين ممتازين للبحث. غالبًا ما تتطلب تأثيرات مثل المنظر أو كيانات الرسوم المتحركة الكثير من مساحة الشاشة المختلفة. من الأفضل الانتباه إلى هذه المواقف عند استكشاف أفضل استراتيجيات التحسين الخاصة بك. على الرغم من أن التحسين الهرمي للقماش يتطلب عدة تقنيات مختلفة ، إلا أنه سيتم تحسين الأداء بشكل كبير بعد التطبيق الصحيح لهذه التقنيات.
طبقة الإعدادات
عند استخدام الطريقة الهرمية ، فإن الخطوة الأولى هي تعيين القماش على DOM. عادة ، هذا بسيط ، فقط حدد عنصر القماش ووضعه في DOM ، ولكن طبقة القماش قد تتطلب بعض النمط الإضافي. عند استخدام CSS ، هناك متطلبات لتنفيذ التسلسل الهرمي بنجاح:
يجب أن يتعايش كل عنصر من عناصر قماش في نفس الموقف في منفذ العرض.
يجب أن تكون كل قماش مرئيًا تحت قماش آخر.
يوضح الشكل 1 مفهوم التداخل العام وراء إعدادات الطبقة.
الشكل 1. مثال طبقة
خطوات إعداد الطبقة هي كما يلي:
أضف أنماط تحديد موقع عنصر القماش لدعم التسلسل الهرمي.
نمط عناصر قماش لتوليد خلفية شفافة.
اضبط مكدس تداخل القماش
قد يتطلب إنشاء مكدس تراكب في CSS كمية صغيرة من الأساليب. هناك العديد من الطرق للتداخل باستخدام HTML و CSS. تستخدم الأمثلة في هذه المقالة علامة <viv> لاحتواء قماش. تحدد علامة <viv> معرفًا فريدًا يطبق النمط على عناصر Canvas HTML5 ، كما هو موضح في القائمة 1.
سرد 1. أنماط تحديد موقع قماش
CSS رمز نسخ المحتوى إلى الحافظة