تجنب الطلاء غير الضروري

مقدمة

قد يصبح طلاء عناصر موقع ويب أو تطبيق مكلفًا للغاية، وقد يكون له تأثير سلبي على أداء وقت التشغيل. في هذه المقالة، نلقي نظرة سريعة على ما يمكن أن يؤدي إلى تشغيل الرسم في المتصفح، وكيفية منع حدوث الرسم غير الضروري.

اللوحة: جولة سريعة للغاية

تتمثل إحدى المهام الرئيسية التي يجب أن يقوم بها المتصفح في تحويل نموذج العناصر في المستند (DOM) وCSS إلى وحدات بكسل على الشاشة، ويتم ذلك من خلال عملية معقدة إلى حد ما. تبدأ بقراءة الترميز ثم تنشئ شجرة DOM. وهي تفعل شيئًا مشابهًا مع CSS، حيث تنشئ CSSOM. بعد ذلك، يتم دمج DOM وCSSOM، وصولاً إلى بنية يمكننا البدء من خلالها في رسم بعض وحدات البكسل.

عملية الطلاء نفسها مثيرة للاهتمام. في متصفِّح Chrome، يتم تقسيم شجرة DOM وCSS إلى نقطية باستخدام بعض البرامج التي تُسمّى Skia. إذا سبق لك استخدام العنصر canvas، ستبدو واجهة برمجة التطبيقات Skia's API مألوفة لك، فهناك العديد من الدوال بالنمط moveTo وlineTo، بالإضافة إلى مجموعة من الوظائف الأكثر تقدمًا. بشكل أساسي، يتم استخلاص جميع العناصر التي تحتاج إلى الطلاء إلى مجموعة من استدعاءات Skia التي يمكن تنفيذها، وناتجها هو مجموعة من الصور النقطية. يتم تحميل هذه الصور النقطية إلى وحدة معالجة الرسومات، وتساعد وحدة معالجة الرسومات في تركيبها معًا لمنحنا الصورة النهائية على الشاشة.

الشيء الذي يجب استخلاصه هو أن عبء عمل Skia يتأثر بشكل مباشر بالأنماط التي تطبقها على عناصرك. إذا كنت تستخدم الأنماط الخوارزمية الثقيلة، فسيحتاج Skia إلى المزيد من الجهد للقيام به. لقد كتب Colt McAnlis مقالة حول كيفية تأثير CSS في وزن عرض الصفحات، لذا يجب عليك قراءتها للحصول على مزيد من المعلومات.

مع ذلك، يستغرق تنفيذ أعمال الطلاء بعض الوقت، وإذا لم يتم تقليلها، سنتجاوز ميزانية الإطار التي تبلغ 16 ملي ثانية تقريبًا. سيلاحظ المستخدمون أنّنا لم يكُن هناك إطارات محتمَلة، وبالتالي سيؤثِّر ذلك سلبًا في تجربة استخدام تطبيقنا. نحن لا نريد هذا الإجراء. لذلك، لنتعرّف على كيفية تنفيذ الطلاء بناءً على الإجراءات اللازمة واتّخاذ الإجراءات اللازمة.

الانتقال

عند التمرير لأعلى أو لأسفل في المتصفح، يجب إعادة عرض المحتوى قبل ظهوره على الشاشة. كل شيء على ما يرام سيكون مساحة صغيرة فقط، ولكن حتى لو كان هذا هو الحال، يمكن أن يتم تطبيق أنماط معقدة على العناصر التي تحتاج إلى الرسم. لذا لا يعني مجرد وجود مساحة صغيرة لطلاءها أنها ستحدث بسرعة.

لمعرفة المناطق التي تتم إعادة طلاءها، يمكنك استخدام ميزة "إظهار المستطيلات" في "أدوات مطوري البرامج" في Chrome (ما عليك سوى النقر على الترس الصغير في أسفل يسار الشاشة). بعد ذلك، وعندما تكون أدوات مطوّري البرامج مفتوحة، ما عليك سوى التفاعل مع صفحتك وستشاهد المستطيلات الوامضة تعرض موضع ووقت رسم Chrome جزءًا من صفحتك.

ويُعد أداء التمرير أمرًا بالغ الأهمية لنجاح موقعك، حيث يلاحظ المستخدمون حقًا عندما لا يتم تمرير موقعك أو تطبيقك بشكل جيد، ولا يعجبهم ذلك. ولذلك، لدينا مصلحة راسخة في الحفاظ على إضاءة الطلاء أثناء التمرير حتى لا يرى المستخدمون المحتوى غير المهم.

لقد كتبت سابقًا مقالة حول أداء التمرير، لذا يُرجى الاطّلاع عليها إذا كنت تريد معرفة المزيد عن تفاصيل أداء التمرير.

التفاعلات

التفاعلات هي سبب آخر لتأثير الطلاء: التمرير والنقرات واللمسات والسحب. عندما ينفذ المستخدم أحد هذه التفاعلات، لنفترض أنه يتم تمرير مؤشر الماوس فوقه، وسيتعين على Chrome إعادة عرض العنصر المتأثر. وكما هي الحال عند التمرير، إذا تطلّب الأمر طلاءًا كبيرًا ومعقدًا، ستلاحظ انخفاضًا في عدد اللقطات في الثانية.

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

تركيبة سيئة

ماذا يحدث إذا قمت بالتمرير وحركت الماوس في نفس الوقت؟ من الممكن تمامًا بالنسبة لي "التفاعل" بدون قصد مع عنصر أثناء التمرير عبره، ما يؤدي إلى عرض سعر مكلف. يمكن أن يؤدي ذلك بدوره إلى دفعني خلال ميزانية الإطار التي تبلغ 16.7 ملي ثانية تقريبًا (الوقت الذي نحتاج فيه إلى البقاء أقل من ذلك للوصول إلى 60 لقطة في الثانية). لقد لقد أنشأت عرضًا توضيحيًا لتوضيح ما أعنيه بالضبط. نأمل أن تظهر تأثيرات التمرير أثناء الانتقال والتحرك بالماوس، ولكن لنطّلع على ما تستفيد منه "أدوات مطوري البرامج" في Chrome:

في الصورة أعلاه، يظهر في "أدوات مطوري البرامج" أنّ "أدوات مطوري البرامج" تسجّل أعمال الطلاء عندما أقوم بالتمرير فوق إحدى الكتل. لذلك استخدمتُ بعض الأنماط الثقيلة للغاية في العرض التوضيحي الذي نشرته لتوضيح قصدكِ، لذا أدفع بجهدي إلى أن تصل إلى ميزانية الإطار وأحيانًا أحيانًا. آخر شيء أريده هو أن أضطر للقيام بهذا الطلاء بدون داعٍ، وبشكل خاص أثناء التمرير عندما يكون هناك عمل آخر يجب القيام به!

إذًا كيف يمكننا منع ذلك؟ أثناء حدوث ذلك، يسهل تنفيذ هذا الحلّ. تكمن الحيلة هنا في إرفاق معالج scroll لإيقاف تأثيرات التمرير وضبط موقّت لتفعيلها مرة أخرى. وهذا يعني أننا نضمن أنّنا لن نحتاج عند الانتقال للأسفل إلى تنفيذ أيّ عمليات نسخ باهظة الثمن. عندما تتوقف عن المشاهدة لفترة كافية، نرى أنه من الآمن إعادة تشغيلها مرة أخرى.

ها هو الرمز:

// Used to track the enabling of hover effects
var enableTimer = 0;

/*
 * Listen for a scroll and use that to remove
 * the possibility of hover effects
 */
window.addEventListener('scroll', function() {
  clearTimeout(enableTimer);
  removeHoverClass();

  // enable after 1 second, choose your own value here!
  enableTimer = setTimeout(addHoverClass, 1000);
}, false);

/**
 * Removes the hover class from the body. Hover styles
 * are reliant on this class being present
 */
function removeHoverClass() {
  document.body.classList.remove('hover');
}

/**
 * Adds the hover class to the body. Hover styles
 * are reliant on this class being present
 */
function addHoverClass() {
  document.body.classList.add('hover');
}

يتّضح لنا أنّنا نستخدم فئة في النص الأساسي لتتبُّع ما إذا كانت تأثيرات التمرير "مسموح بها" أم لا، وتعتمد الأنماط الأساسية على وجود هذه الفئة:

/* Expect the hover class to be on the body
 before doing any hover effects */
.hover .block:hover {
 …
}

وهذا كل ما في الأمر!

الخلاصة

يعد عرض الأداء أمرًا بالغ الأهمية للمستخدمين الذين يستمتعون بتطبيقك، وعليك دائمًا إبقاء أعباء عمل الرسم أقل من 16 ملي ثانية. لمساعدتك في ذلك، يجب دمج "أدوات مطوري البرامج" خلال عملية التطوير لتحديد المؤثِّرات السلبية وحلّها عند ظهورها.

إنّ التفاعلات غير المقصودة، لا سيما مع العناصر الملوّنة بالطلاء، يمكن أن تكون مكلفة للغاية وتؤدّي إلى إيقاف أداء العرض. كما رأيت، يمكننا استخدام جزء صغير من الرمز لإصلاح ذلك.

ألقِ نظرة على مواقعك وتطبيقاتك، وهل يمكنك فعل ذلك باستخدام القليل من الحماية للطلاء؟