غالبًا ما يكون JavaScript هو العامل المشغِّل للتغييرات المرئية. في بعض الأحيان، تُجري هذه التغيُّرات مباشرةً من خلال عمليات التلاعب بالأنماط، وفي بعض الأحيان من خلال العمليات الحسابية التي تؤدي إلى تغييرات مرئية، مثل البحث في البيانات أو ترتيبها. يمكن أن يكون JavaScript الذي يستغرق وقتًا طويلاً أو الذي يتم تشغيله في وقت غير مناسب سببًا شائعًا لمشاكل الأداء، ويجب محاولة تقليل تأثيره قدر الإمكان.
احتساب النمط
يؤدي تغيير بنية DOM من خلال إضافة عناصر وإزالتها أو تغيير السمات أو الفئات أو تشغيل الرسوم المتحرّكة إلى أن يعيد المتصفّح احتساب أنماط العناصر، ويعيد في العديد من الحالات تصميم جزء من الصفحة أو كلّها. تُعرف هذه العملية باسم حساب الأنماط.
يبدأ المتصفّح احتساب الأنماط من خلال إنشاء مجموعة من المحدّدات المطابقة لتحديد الفئات والمحدّدات الزائفة والمعرّفات التي تنطبق على أي عنصر معيّن. بعد ذلك، تعالج قواعد الأنماط من المحدّدات المطابقة وتعرِض الأنماط النهائية التي يتضمّنها العنصر.
دور إعادة احتساب الأنماط في وقت استجابة التفاعل
مدى استجابة الصفحة لتفاعلات المستخدم (INP) هو مقياس أداء أثناء التشغيل يستند إلى المستخدِم يقيّم مدى استجابة الصفحة بشكل عام للبيانات التي يُدخلها المستخدِم. يقيس هذا المقياس وقت استجابة التفاعل من وقت تفاعل المستخدم مع الصفحة إلى أن يعرض المتصفّح الإطار التالي الذي يعرض التعديلات المرئية المقابلة لواجهة المستخدم.
من المكونات المهمة للتفاعل هو الوقت المستغرَق لعرض الإطار التالي. يتألّف عمل التقديم الذي يتم إجراؤه لعرض الإطار التالي من العديد من الأجزاء، بما في ذلك احتساب أنماط الصفحة التي تحدث قبل وضع التصميم والتلوين وعمل الدمج مباشرةً. يركز هذا الدليل على تكاليف احتساب الأنماط، ولكنّ تقليل أي جزء من إجمالي مدة عرض التفاعل يقلل أيضًا من إجمالي وقت الاستجابة.
تقليل تعقيد أدوات الاختيار
يمكن أن يساعد تبسيط أدوات اختيار لغة CSS في تسريع العمليات الحسابية لأنماط صفحتك. تشير أبسط محددات إلى عنصر في CSS باسم فئة فقط:
.title {
/* styles */
}
ولكن مع نمو أي مشروع، من المحتمل أن يحتاج إلى CSS أكثر تعقيدًا، وقد تنتهي باستخدام أدوات اختيار تبدو على النحو التالي:
.box:nth-last-child(-n+1) .title {
/* styles */
}
لتحديد كيفية تطبيق هذه الأنماط على الصفحة، على المتصفّح أن يطرح بشكل فعّال سؤالاً مفاده "هل هذا عنصر ينتمي إلى فئة title مع عنصر رئيسي ينتمي إلى فئة
box وهو العنصر الفرعي رقم minus-nth-plus-1 للعنصر الرئيسي؟ قد يستغرق المتصفّح بعض الوقت لمعرفة ذلك. لتبسيط ذلك، يمكنك تغيير
أداة الاختيار لتكون اسم فئة أكثر تحديدًا:
.final-box-title {
/* styles */
}
قد تبدو أسماء الفئات البديلة هذه غير ملائمة، ولكنها تسهّل مهمة المتصفّح. في الإصدار السابق مثلاً، لكي يعرف المتصفّح أنّ أحد العناصر هو الأخير من نوعه، يجب أن يعرف أولاً كل المعلومات عن جميع العناصر الأخرى لتحديد ما إذا كانت أي عناصر ستأتي بعده هي nth-last-child. يمكن أن يكون هذا الإجراء أكثر تكلفة من الناحية الحسابية مقارنةً بمحاولة مطابقة محدد مع عنصر استنادًا إلى اسم الفئة فقط.
تقليل عدد العناصر التي يتمّ تطبيق أسلوب عليها
من الاعتبارات الأخرى المتعلقة بالأداء، والتي غالبًا ما تكون أكثر أهمية من تعقيد المقترِح، هي مقدار العمل الذي يجب أن يتم عند تغيير عنصر.
بشكل عام، تكلفة أسوأ حالة لاحتساب أسلوب العناصر المحسوبة هي عدد العناصر مضروبًا في عدد المحدّدات، لأنّ المتصفّح يحتاج إلى التحقّق من كل عنصر مرة واحدة على الأقل مقارنةً بكل أسلوب لمعرفة ما إذا كان يتطابق.
يمكن أن تستهدف عمليات حساب الأنماط بعض العناصر مباشرةً بدلاً من إلغاء صلاحية الصفحة بأكملها. في المتصفّحات الحديثة، لا يشكّل ذلك مشكلة كبيرة لأنّه لا يحتاج المتصفّح دائمًا إلى التحقّق من جميع العناصر التي قد يؤثر فيها التغيير. وفي المقابل، لا تكون المتصفحات القديمة محسّنة دائمًا لمثل هذه المهام. عليك تقليل عدد العناصر التي تم إلغاء صلاحيتها كلما أمكن ذلك.
قياس تكلفة إعادة احتساب الأنماط
هناك طريقتان يمكنك من خلالهما قياس تكلفة إعادة احتساب الأنماط في browser. يعتمد كلّ منهما على ما إذا كنت تريد قياسه في المتصفّح في بيئة التطوير، أو إذا كنت تريد قياس مدّة هذه العملية للمستخدمين الفعليين على موقعك الإلكتروني.
قياس تكلفة إعادة احتساب الأنماط في "أدوات مطوّري البرامج في Chrome"
من بين الطرق لقياس تكلفة إعادة احتساب الأنماط استخدام لوحة الأداء في "أدوات مطوّري البرامج في Chrome". يُرجى اتّباع الخطوات التالية للبدء:
- افتح "أدوات مطوري البرامج".
- انتقِل إلى علامة التبويب الأداء.
- ضَع علامة في مربّع الاختيار إحصاءات أداة الاختيار (اختياري).
- انقر على تسجيل.
- تفاعل مع الصفحة.
عند إيقاف التسجيل، ستظهر لك صورة مشابهة للصورة التالية:
الشريط في الجزء العلوي هو مخطط لهب مصغّر يرسم أيضًا إطارات في الثانية. كلما اقترب النشاط من أسفل الشريط، يتم رسم الإطارات الأسرع بواسطة المتصفح. إذا رأيت الرسم البياني للّهب يزداد ثباتًا في أعلى الصفحة مع ظهور أشرطة حمراء فوقه، هذا يعني أنّ هناك عملًا يتسبب في عرض لقطات تستغرق وقتًا طويلاً.
إنّ اللقطات التي تستمرّ لفترة طويلة أثناء التفاعل، مثل الانتقال إلى أسفل الصفحة، تستحق أن نلقي عليها نظرة عن كثب. إذا ظهرت لك كتلة كبيرة باللون الأرجواني، يمكنك تكبير النشاط واختيار أي عمل يحمل التصنيف إعادة احتساب النمط للحصول على مزيد من المعلومات عن العمل الذي قد يكون مكلفًا لإعادة احتساب الأنماط.
يؤدي النقر على الحدث إلى عرض تسلسل استدعاء الدوال البرمجية. إذا كان عمل العرض ناتجًا عن تفاعل المستخدِم، يتمّ استدعاء JavaScript الذي أدّى إلى تغيير النمط. ويعرِض أيضًا عدد العناصر التي يؤثر فيها التغيير، أي أكثر من 900 عنصر في هذه الحالة، ومدة احتساب التصميم. يمكنك استخدام هذه المعلومات لبدء محاولة إيجاد حل في التعليمات البرمجية الخاصة بك.
إذا وضعت علامة في مربّع الاختيار إحصاءات أداة الاختيار في إعدادات لوحة الأداء قبل إجراء عملية تتبُّع، ستتضمّن اللوحة في أسفل الشاشة في عملية التتبُّع علامة تبويب إضافية بالاسم نفسه.
تقدّم هذه اللوحة بيانات مفيدة عن التكلفة النسبية لكلّ أداة اختيار، ما يتيح لك تحديد أدوات اختيار CSS باهظة التكلفة.
لمزيد من المعلومات، يُرجى الاطّلاع على مستندات إحصاءات أدوات اختيار CSS.
قياس تكلفة إعادة احتساب الأنماط للمستخدمين الفعليين
إذا أردت معرفة الوقت الذي تستغرقه عملية إعادة احتساب الأنماط
للمستخدمين الفعليين لموقعك الإلكتروني، تمنحك Long Animation Frames API
الأدوات اللازمة لإجراء ذلك. وقد أضفت بيانات من واجهة برمجة التطبيقات هذه إلى مكتبة JavaScript web-vitals،
بما في ذلك وقت إعادة احتساب الأنماط.
إذا كنت تشتبه في أنّ تأخُّر عرض التفاعل هو السبب الأساسي في ارتفاع مقياس INP للصفحة، عليك معرفة مقدار الوقت الذي يتم خلاله إعادة احتساب الأنماط على الصفحة. لمزيد من المعلومات، يمكنك الاطّلاع على مقالة كيفية قياس وقت إعادة احتساب الأنماط في الحقل.