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