من المهم تجنُّب عرض عدد اللقطات في الثانية بشكل سلس وجذاب، خاصةً على الأجهزة الجوّالة. ومع ذلك، تظهر الطلاء في بعض الأحيان في الأماكن الأكثر غرابة. تتناول هذه المقالة الأسباب التي قد تؤدي إلى ظهور صور GIF متحركة وغير ضرورية، بالإضافة إلى الحلّ البسيط الذي يمكنك تطبيقه.
طبقات من الذكريات المفضّلة
كما تعلم على الأرجح، قد تعرض المتصفحات الحديثة مجموعات من عناصر DOM في "صور" منفصلة، تسمى الطبقات. ففي بعض الأحيان، تكون هناك طبقة واحدة للصفحة بأكملها، وأحيانًا المئات، أو في حالات نادرة - الآلاف!
عندما يتم تجميع عناصر DOM معًا في طبقة واحدة ويتغير أحد العناصر بشكل مرئي، ينتهي الأمر بنا إلى طلاء العنصر الذي تم تغييره ليس فقط، بل جميع العناصر الأخرى التي تتداخل مع العنصر الذي تم تغييره أيضًا. يؤدي رسم عنصر فوق آخر إلى "فقدان" وحدات البكسل التي تم استبدالها بشكل فعال إلى الأبد؛ إذا كنت تريد استعادة وحدات البكسل الأصلية، فستحتاج إلى إعادة طلاءها.
لهذا السبب، نريد أحيانًا عزل أحد العناصر عن العناصر الأخرى لكي لا نحتاج عند طلاء العناصر الأخرى إلى إعادة عرض العناصر الأخرى التي لم تتغيّر. على سبيل المثال، عند دمج عنوان صفحة ثابت مع المحتوى القابل للتمرير، يجب إعادة عرض العنوان في كل مرة يتم فيها تمرير المحتوى، بالإضافة إلى المحتوى المرئي حديثًا. ومن خلال وضع العنوان في طبقة منفصلة، يمكن للمتصفح تحسين عملية التمرير. عند التمرير، يمكن للمتصفح تحريك الطبقات في الأرجاء - ربما بمساعدة وحدة معالجة الرسومات - وتجنب إعادة طلاء أي من الطبقتين.
وكل طبقة إضافية تزيد من استهلاك الذاكرة وتضيف مقدارًا زائدًا من الأداء، وبالتالي فإن الهدف هو تجميع الصفحة في أقل عدد ممكن من الطبقات مع الحفاظ على الأداء الجيد.
ما علاقة ذلك بملفات GIF المتحرّكة؟
حسنًا، لنلقِ نظرة على هذه الصورة:
هذه الطريقة هي إعداد طبقة محتملة لتطبيق بسيط. هناك أربع طبقات هنا: ثلاث منها (الطبقات من 2 إلى 4) عبارة عن عناصر للواجهة، والطبقة الخلفية هي أداة تحميل، في شكل صورة GIF متحركة. في التدفق العادي، تعرض برنامج التحميل (الطبقة 1) أثناء تحميل التطبيق، وعند انتهاء كل شيء، ستعرض الطبقات الأخرى. ولكن إليك المفتاح: يجب إخفاء صورة GIF المتحركة.
ولكن لماذا أحتاج إلى إخفاءه؟!
سؤال جيد. في عالم مثالي، سيتحقق المتصفح ببساطة من ظهور ملف GIF لك ويتجنب الرسم تلقائيًا. إنّ التحقّق ممّا إذا كانت صورة GIF المتحركة محجوبة أو مرئية على الشاشة عادةً ما تكون أعلى تكلفة من رسمها فحسب، لذا يتم طلاءها.
في أفضل حال، يكون ملف GIF في طبقته الخاصة ولا يحتاج المتصفح إلا إلى تلوينه وتحميله إلى وحدة معالجة الرسومات. ولكن في أسوأ الحالات، قد يتم تجميع كل العناصر في طبقة واحدة وسيكون على المتصفّح إعادة صياغة كل عنصر. وعند انتهاء هذه العملية، ستظل بحاجة إلى تحميل كل البيانات إلى وحدة معالجة الرسومات. يتم العمل على كل إطار GIF، على الرغم من أن المستخدم لا يمكنه رؤية ملف GIF!
على أجهزة سطح المكتب، ربما يمكنك الابتعاد عن هذا النوع من سلوكيات الرسم لأنّ وحدات المعالجة المركزية (CPU) ووحدة معالجة الرسومات (GPU) تكون أكثر فعالية، بالإضافة إلى توفُّر مقدار كبير من معدل نقل البيانات لنقل البيانات بينهما. ومع ذلك، يكون الرسم مكلفًا للغاية على الهاتف المحمول، لذا عليك توخي الحذر الشديد.
ما هي المتصفحات التي يؤثر فيها هذا الأمر؟
وكما هي الحال غالبًا، تختلف السلوكيات من المتصفحات. اليوم، تتم إعادة عرض Chrome وSafari وOpera بالكامل، حتى مع إخفاء ملف GIF. من ناحية أخرى، اكتشفَ Firefox أنّ ملف GIF محجوب ولا يحتاج إلى إعادة تلوين. ما زال المتصفح Internet Explorer يشبه الصندوق الأسود، وحتى في IE11، بما أنّ أدوات F12 لا تزال في مرحلة التطوير، فليس هناك ما يشير إلى ما إذا كان سيتم إعادة الرسم أم لا.
كيف يمكنني معرفة ما إذا كانت لديّ هذه المشكلة؟
أسهل طريقة هي استخدام "إظهار مستطيلات الطلاء" في "أدوات مطوري البرامج في Chrome". حمِّل "أدوات مطوري البرامج" واضغط على الترس في أسفل يسار الصفحة (
) واختَر إظهار مستطيلات الطلاء ضمن قسم العرض.
الآن كل ما عليك فعله هو البحث عن مستطيل أحمر مثل هذا:
يُظهر المربّع الأحمر الصغير الذي يظهر على الشاشة أنّ Chrome يعيد رسم شيءٍ ما. وعلمت أنّ هناك ملف GIF لبرنامج تحميل مخفي خلف العناصر الأخرى، لذا عندما ترى مربّعًا أحمر مثل هذا، يجب إخفاء العناصر المرئية والتحقق مما إذا كنت قد تركت ملف GIF المتحركة بعيدًا. إذا كان لديك بعد ذلك، يجب تثبيت بعض CSS أو JavaScript لتطبيق display: none أو visibility: hidden عليها أو على عنصرها الرئيسي. وبالطبع، إذا كانت الصورة خلفية فحسب، فاحرص على إزالتها.
إذا كنت تريد الاطّلاع على مثال على هذا السلوك في موقع إلكتروني متاح، اطّلِع على Allegro، حيث تحتوي صورة كل منتج على ملف GIF لأداة تحميل محجوب بدلاً من إخفاءه بشكل واضح.
الخلاصة
ويعني الوصول إلى 60 لقطة في الثانية تنفيذ الإجراءات المطلوبة فقط لعرض الصفحة وليس المزيد. تُعد إزالة الطلاء الزائد خطوة مهمة في تحقيق هذا الهدف. يمكن أن تؤدي ملفات GIF المتحركة المتبقية إلى عرض رسومات غير ضرورية، وهو شيء يمكنك العثور عليه وتصحيح أخطائه بسهولة باستخدام أداة "إظهار المستطيلات" في أدوات مطوّري البرامج.
بما أنّك توقّفت عن تشغيل ملف GIF الخاص بجرس القطط هذا، أليس كذلك؟