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