وضع الرسم المستمر لتحليل الطلاء متاح الآن في Chrome Canary. تشرح هذه المقالة كيفية تحديد مشكلة في وقت عرض الصفحة وكيف يمكنك استخدام هذه الأداة الجديدة لاكتشاف المؤثِّرات السلبية في أداء الطلاء.
جارٍ التحقّق من وقت الرسم على صفحتك
لذلك لاحظت أن صفحتك لا يتم تمريرها بسلاسة. هذه هي الطريقة التي ستبدأ بها في معالجة المشكلة. على سبيل المثال، سنستخدم صفحة العرض التوضيحي Things We Left On The Moon لـ دان سيدرهولم كمثال.
تفتح Web Inspector (أداة فحص الويب) وتبدأ تسجيل "المخطط الزمني" وتنتقل إلى صفحتك للأعلى وللأسفل. ثم تنظر إلى المخططات الزمنية الرأسية التي توضح لك ما حدث في كل إطار.
إذا لاحظت أن معظم الوقت تقضي في الرسم (أشرطة خضراء كبيرة تزيد عن 60 لقطة في الثانية)، فستحتاج إلى إلقاء نظرة فاحصة على سبب حدوث ذلك. لفحص عمليات الرسم، استخدم إعداد إظهار مستطيلات الرسم في Web Inspector (رمز الترس في أسفل الجانب الأيسر من Web Inspector). سيعرض لك المناطق التي يتم فيها رسم Chrome.
هناك أسباب مختلفة تجعل Chrome يعيد عرض أجزاء من الصفحة:
- تتغير عُقد DOM في JavaScript، ما يتسبب في إعادة حساب Chrome لتنسيق الصفحة.
- يتم تشغيل الرسوم المتحركة التي يتم تحديثها في دورة تستند إلى إطار.
- يؤدي تفاعل المستخدم، مثل التمرير، إلى تغيير نمط عناصر معيّنة.
- أي عملية أخرى تؤدي إلى تغيير تنسيق الصفحة
بصفتك مطورًا، يجب أن تكون على دراية بعمليات إعادة التصميم التي تحدث على صفحتك.
يعد النظر إلى مستطيلات الطلاء طريقة رائعة للقيام بذلك. في مثال لقطة الشاشة أعلاه، يمكنك أن ترى أن الشاشة بأكملها مغطاة بمستطيل
رسم كبير. هذا يعني إعادة طلاء الشاشة بالكامل أثناء التمرير، وهذا ليس
جيدًا. في هذه الحالة تحديدًا، يحدث ذلك بسبب نمط CSS
background-attachment:fixed الذي يجعل صورة الخلفية
للصفحة في الموضع نفسه بينما يتحرك محتوى الصفحة فوقها
أثناء التمرير.
إذا حددت أن إعادة الطلاء تغطي منطقة كبيرة و/أو تستغرق وقتًا طويلاً، فلديك خياران:
- يمكنك محاولة تغيير تخطيط الصفحة لتقليل مقدار الرسم. يرسم Chrome الصفحة المرئية مرة واحدة فقط، إذا أمكن، ويضيف الأجزاء غير المرئية أثناء التمرير لأسفل. ومع ذلك، هناك حالات يحتاج فيها Chrome إلى إعادة عرض مناطق معيَّنة. على سبيل المثال، يمكن أن تؤدي قاعدة CSS
position:fixed، التي يتم استخدامها غالبًا لعناصر التنقّل التي تبقى في الموضع نفسه، إلى إعادة عرض تلك العناصر. - إذا كنت تريد الاحتفاظ بتخطيط صفحتك، فيمكنك محاولة تقليل تكلفة طلاء المناطق التي تتم إعادة رسمها. ليس كل نمط CSS له نفس تكلفة الطلاء، وبعضها له تأثير ضئيل، والبعض الآخر له تأثير كبير. يمكن أن يكون معرفة تكاليف الطلاء لأنماط معينة عملاً كبيرًا. يمكنك إجراء ذلك من خلال التبديل بين الأنماط في لوحة "العناصر" (Elements) والاطّلاع على الفرق في تسجيل المخطط الزمني (المخطط الزمني)، ما يعني التبديل بين اللوحات وإجراء العديد من التسجيلات. وهنا يأتي دور وضع الرسم المستمر.
وضع الرسم المستمر
وضع الرسم المستمر هو أداة تساعدك في تحديد العناصر المكلفة على الصفحة. حيث يضع الصفحة في حالة إعادة طلاء دائمًا، مما يُظهر عدادًا لمقدار أعمال الطلاء التي تحدث. بعد ذلك، يمكنك إخفاء العناصر وتغيير الأنماط، ومشاهدة العدّاد، لمعرفة ما هو بطيء.
ضبط إعدادات الجهاز
لاستخدام وضع الرسم المستمر، يجب استخدام Chrome Canary.
عليك التأكد من تشغيل Chrome في
وضع التركيب على أنظمة Linux (وبعض أجهزة Mac). يمكن تفعيل هذا الإعداد نهائيًا باستخدام إعداد التركيب على كل الصفحات في about:flags.
كيفية البدء
يمكنك تفعيل وضع الرسم المستمر من خلال مربّع الاختيار تفعيل إعادة طلاء الصفحات باستمرار في إعدادات 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 يضيفان الكثير من الوقت لطلاء الصفحة. لا يُنصح باستخدام هذه الميزات بشكل عام، فهي رائعة وسعداء بانضمامهم أخيرًا. ولكن من المهم معرفة متى وأين يتم استخدامها.
تجنَّب استخدامها في المناطق التي تتم إعادة طلاءها كثيرًا وتجنَّب الإفراط في استخدامها
بشكل عام.
عرض توضيحي مباشر
انقر أدناه لمشاهدة عرض توضيحي حيث يستخدم بول أيرش الرسم المستمر لتحديد عملية الطلاء المكلفة بشكل فريد.