يتوفّر الآن وضع الطلاء المستمر لإعداد ملف تعريف الطلاء في Chrome Canary. توضّح هذه المقالة كيفية تحديد مشكلة في وقت عرض الصفحة وكيفية استخدام هذه الأداة الجديدة لرصد نقاط التوقف في أداء العرض.
التحقيق في وقت الرسم على صفحتك
لقد لاحظت أنّ الانتقال للأعلى أو للأسفل في صفحتك لا يتم بسلاسة. هذه هي الطريقة التي يمكنك بها بدء معالجة المشكلة. في المثال التالي، سنستخدم الصفحة التجريبية Things We Left On The Moon من تأليف Dan Cederholm.
فتحت "أداة فحص الويب"، وبدأت تسجيلًا للمخطط الزمني، وسرّعت الصفحة صعودًا وهبوطًا. بعد ذلك، يمكنك الاطّلاع على المخططات الزمنية العمودية التي تعرض لك ما حدث في كل إطار.
إذا لاحظت أنّ معظم الوقت يُستغرَق في الرسم (أشرطة خضراء كبيرة فوق 60 لقطة في الثانية)، عليك الاطّلاع عن كثب على سبب حدوث ذلك. للتحقيق في ألوان الطلاء، استخدِم الإعداد إظهار مستطيلات ألوان الطلاء في "أداة فحص الويب" (رمز الترس في الزاوية السفلية اليمنى من "أداة فحص الويب"). سيعرض لك هذا المناطق التي يرسم فيها Chrome.
هناك أسباب مختلفة تدفع Chrome إلى إعادة رسم أجزاء من الصفحة:
- يتم تغيير عقد DOM في JavaScript، ما يتسبب في إعادة Chrome احتساب تنسيق الصفحة.
- يتم تشغيل صور متحركة يتم تعديلها في دورة مستندة إلى الإطارات.
- يؤدي تفاعل المستخدم، مثل التمرير بمؤشر الماوس، إلى تغييرات في الأنماط على عناصر معيّنة.
- أي عملية أخرى تؤدي إلى تغيير تنسيق الصفحة
بصفتك مطوّرًا، عليك أن تكون على دراية بعمليات إعادة الرسم التي تحدث على صفحتك.
ويمكنك الاطّلاع على مستطيلات الطلاء لمعرفة ذلك. في المثال التالي
لقطة الشاشة أعلاه، يمكنك أن ترى أنّ الشاشة بأكملها مغطاة بمثلث هائل
مرسوم. وهذا يعني أنّه تتم إعادة رسم الشاشة بأكملها أثناء الانتقال في الصفحة، ما ليس
جيدًا. في هذه الحالة تحديدًا، يرجع ذلك إلى أسلوب CSS
background-attachment:fixed الذي يتسبب في بقاء صورة الخلفية للصفحة
في الموضع نفسه بينما يتحرك محتوى الصفحة فوقها أثناء التمرير.
إذا تبيّن لك أنّ عمليات إعادة الطلاء تغطي مساحة كبيرة و/أو تستغرق وقتًا طويلاً، أمامك خياران:
- يمكنك محاولة تغيير تنسيق الصفحة لتقليل مقدار الرسم. يرسم Chrome الصفحة المرئية مرة واحدة فقط إذا أمكن، ويضيف الأجزاء التي لم تكن مرئية أثناء الانتقال للأسفل. ومع ذلك، هناك حالات يحتاج فيها Chrome إلى إعادة طلاء مناطق معيّنة. على سبيل المثال، يمكن أن تؤدي قاعدة CSS
position:fixed، التي تُستخدَم غالبًا لعناصر التنقّل التي تبقى في الموضع نفسه، إلى عمليات إعادة الرسم هذه. - إذا أردت الاحتفاظ بتنسيق الصفحة، يمكنك محاولة تقليل تكلفة طلاء المناطق التي تتم إعادة طلاؤها. لا تُطبَّق تكلفة الرسم نفسها على كل أنماط CSS، فبعضها يؤثر قليلاً، والبعض الآخر يؤثر كثيرًا. قد يكون من الصعب تحديد تكاليف طلاء أنماط معيّنة. يمكنك إجراء ذلك من خلال تبديل الأنماط في لوحة "العناصر" والاطّلاع على الفرق في تسجيل "المخطط الزمني"، ما يعني التبديل بين اللوحات وإجراء الكثير من التسجيلات. وهنا يأتي دور وضع الرسم المستمر.
وضع الرسم المستمر
وضع الرسم المستمر هو أداة تساعدك في تحديد العناصر التي تستهلك موارد كثيرة في الصفحة. ويؤدي ذلك إلى وضع الصفحة في حالة إعادة الطلاء دائمًا، ويعرِض عدادًا لعدد عمليات الطلاء التي تتم. بعد ذلك، يمكنك إخفاء العناصر وتغيير الأنماط، مع مراقبة المقياس لمعرفة ما هو بطيء.
ضبط إعدادات الجهاز
لاستخدام وضع الرسم المستمر، عليك استخدام Chrome Canary.
على أنظمة Linux (وبعض أجهزة Mac)، عليك التأكّد من تشغيل Chrome في
وضع الدمج. ويمكن تفعيل هذه الميزة بشكل دائم باستخدام الإعداد استخدام وحدة معالجة الرسومات في تركيب جميع الصفحات في about:flags.
كيفية البدء
يمكن تفعيل وضع الرسم المستمر من خلال مربّع الاختيار تفعيل إعادة رسم الصفحة باستمرار في إعدادات "أداة فحص الويب" (رمز الترس في أسفل يسار "أداة فحص الويب").
تعرض الشاشة الصغيرة في أعلى يسار الشاشة أوقات الرسم المقاسة بالملي ثانية. ويعرض التقرير على وجه التحديد ما يلي:
- آخر وقت تم قياسه لعرض الصفحة على يمين الصفحة
- الحد الأدنى والحد الأقصى للرسم البياني الحالي على يسار الصفحة
- رسم بياني شريطي يعرض سجلّ آخر 80 لقطة في أسفل الشاشة (يشير الخط في الرسم البياني إلى 16 ملي ثانية كنقطة مرجعية).
تعتمد قياسات وقت الرسم على درجة دقة الشاشة وحجم النافذة و الأجهزة التي يعمل عليها Chrome. يُرجى العِلم أنّ هذه العناصر قد تختلف بالنسبة إلى المستخدمين.
سير العمل
في ما يلي كيفية استخدام وضع الطلاء المستمر لتتبُّع العناصر و الأنماط التي تزيد من تكلفة الطلاء كثيرًا:
- افتح إعدادات Web Inspector (مدقّق الويب) وضَع علامة في المربّع بجانب تفعيل إعادة رسم الصفحة باستمرار.
- انتقِل إلى لوحة "العناصر" وانتقِل في شجرة DOM باستخدام مفاتيح الأسهم أو من خلال اختيار عناصر في الصفحة.
- استخدِم اختصار لوحة المفاتيح H، وهو مساعد تم طرحه مؤخرًا، لتبديل مستوى ظهور عنصر.
- اطّلِع على الرسم البياني لوقت التلوين وحاول رصد عنصر يضيف الكثير من وقت التلوين.
- راجِع أنماط CSS لهذا العنصر، وفعِّلها أو أوقِفها أثناء الاطّلاع على الرسم البياني، للعثور على النمط الذي يتسبب في البطء.
- غيِّر هذا النمط وقم بتسجيل مخطط زمني آخر لمعرفة ما إذا كان هذا الإجراء قد حسّن أداء صفحتك.
تعرض الصورة المتحركة أدناه تبديل الأنماط وتأثيرها في وقت الرسم:
يوضّح هذا المثال كيف أنّ إيقاف أحد أنماط CSS box-shadow
أو border-radius يقلل من وقت الرسم بقدر كبير. يؤدي استخدام كلّ من box-shadow وborder-radius على عنصر إلى عمليات مُكلفة جدًا لرسم
العناصر، لأنّ Chrome لا يمكنه تحسين الأداء من أجل ذلك. لذلك، إذا كان لديك عنصر
يحتاج إلى إعادة الطلاء كثيرًا، كما هو موضّح في المثال، عليك تجنُّب استخدام هذين المكوّنين
معًا.
ملاحظات
يعيد وضع الرسم المستمر رسم الصفحة المرئية بالكامل. لا يحدث ذلك عادةً عند تصفُّح صفحة ويب. لا يرسم الانتقال للأعلى أو للأسفل عادةً سوى الأجزاء التي لم تكن مرئية من قبل. بالنسبة إلى التغييرات الأخرى على الصفحة، تتم إعادة رسم أصغر منطقة ممكنة فقط. لذا، تحقّق من تسجيل مخطط زمني آخر لمعرفة ما إذا كانت تحسينات الأنماط قد أثّرت فعلاً في أوقات عرض الصفحة.
عند استخدام continuous painting mode، قد تكتشف أنّ أسلوبَي CSS
border-radius وbox-shadow مثلاً يزيدان من وقت الرسم كثيرًا. لا ننصحك بالتوقف عن استخدام هذه الميزات بشكل عام، فهي رائعة ويسعدنا أنّها أصبحت متاحة الآن. ولكن من المهم معرفة وقت ومكان استخدامها.
تجنَّب استخدامها في المناطق التي يتم فيها إعادة الطلاء كثيرًا وتجنَّب الإفراط في استخدامها بشكلٍ عام.
عرض توضيحي مباشر
انقر أدناه لمشاهدة عرض توضيحي يستخدم فيه "بول آيرش" ميزة "الطلاء المستمر" لتحديد عملية طلاء باهظة التكلفة بشكل فريد.