تقليل نطاق وتعقيد العمليات الحسابية للأنماط

Jeremy Wagner

Paul Lewis

غالبًا ما تكون لغة JavaScript مشغلاً للتغييرات المرئية. في بعض الأحيان يجعل ذلك التغييرات مباشرة من خلال التلاعب بالأنماط، وأحيانًا من خلال العمليات الحسابية تؤدي إلى تغييرات مرئية، مثل البحث عن البيانات أو فرزها. في وقت سيئ أو أن تكون لغة JavaScript لفترة طويلة قد تكون سببًا شائعًا لحدوث مشاكل في الأداء، يجب أن تسعى إلى تقليل تأثيرها حيثما أمكن.

احتساب النمط

فتغيير DOM من خلال إضافة العناصر وإزالتها وتغيير السمات والفئات أو تشغيل الرسوم المتحركة إلى أن يعيد المتصفح حساب أنماط العناصر، في كثير من الحالات، تخطيط الصفحة أو جزء منها. تُسمى هذه العملية احتساب النمط.

يبدأ المتصفّح في احتساب الأنماط من خلال إنشاء مجموعة من أدوات الاختيار المطابقة لتحديد الفئات والمحددات الزائفة والمعرفات التي تنطبق على أي عنصر معين. ثم يعالج قواعد النمط من المحددات المطابقة ويحدد الأنماط النهائية للعنصر.

دور إعادة احتساب الأنماط في وقت استجابة التفاعل

مدى استجابة الصفحة لتفاعلات المستخدم (INP) هو وقت تشغيل يركّز على المستخدم. لمقياس الأداء الذي يقيّم مدى استجابة الصفحة بشكل عام لإدخالات المستخدم. وهو يقيس وقت استجابة التفاعل من وقت تفاعل المستخدم مع الصفحة حتى يرسم المتصفح الإطار التالي الذي يعرض التحديثات المرئية المقابلة واجهة المستخدم.

يتمثل أحد المكونات المهمة للتفاعل في الوقت الذي يستغرقه رسم العنصر الإطار. يتكون عمل العرض الذي يتم إجراؤه لعرض الإطار التالي من أجزاء عديدة، بما في ذلك حساب أنماط الصفحة التي تحدث قبل التخطيط والطلاء وتركيب العمل. يركز هذا الدليل على تكاليف حساب الأسلوب، ولكنه يقلل كما يقلل أي جزء من إجمالي مدة العرض للتفاعل كذلك إجمالي وقت الاستجابة.

تقليل تعقيد أدوات الاختيار

يمكن أن يساعد تبسيط أدوات اختيار لغة CSS في تسريع العمليات الحسابية لأنماط صفحتك. تشير أبسط محددات إلى عنصر في CSS باسم فئة فقط:

.title {
  /* styles */
}

ولكن مع نمو أي مشروع، من المرجح أن يحتاج إلى لغة CSS أكثر تعقيدًا، وقد ينتهي بك باستخدام المحددات التي تبدو كما يلي:

.box:nth-last-child(-n+1) .title {
  /* styles */
}

ولتحديد كيفية تطبيق هذه الأنماط على الصفحة، يجب أن يعتمد المتصفح اسأل "هل هذا عنصر ذو فئة title مع أصل لفئة box هو العنصر الثانوي ناقص nth-plus-1 للعنصر الرئيسي؟ معرفة ذلك قد يستغرق المتصفّح بعض الوقت لتبسيط ذلك، يمكنك تغيير المحدد ليكون اسم فئة أكثر تحديدًا:

.final-box-title {
  /* styles */
}

قد تبدو أسماء الفئات البديلة هذه محرجة، لكنها تجعل تجربة المهمة أسهل كثيرًا. في الإصدار السابق، على سبيل المثال، حتى يعرف المتصفح فإن العنصر هو الأخير من نوعه، فيجب أن يعرف أولاً كل شيء عن جميع والعناصر الأخرى لتحديد ما إذا كانت أي عناصر تأتي بعد ذلك يمكن أن هي nth-last-child. قد يكون هذا مكلفًا من الناحية الحسابية أكثر بكثير من مطابقة محدد مع عنصر على أساس اسم فئته فقط.

تقليل عدد العناصر التي يتم تصميمها

هناك اعتبار آخر متعلّق بالأداء - وغالبًا ما يكون أكثر أهمية من أداة الاختيار التعقيد - هو مقدار العمل الذي يجب أن يحدث عندما يتغير عنصر ما.

بعبارات عامة، تمثّل أسوأ تكلفة لحساب نمط العناصر المحسوبة هو عدد العناصر مضروبًا في عدد المحدد، لأن المتصفح إلى التحقق من كل عنصر مرة واحدة على الأقل مقابل كل نمط لمعرفة ما إذا كان تطابق.

يمكن أن تستهدف العمليات الحسابية للأنماط بضعة عناصر مباشرةً بدلاً من إيقافها الصفحة بأكملها. في المتصفحات الحديثة، لا مشكلة في ذلك غالبًا لأن لا يحتاج المتصفح دائمًا إلى التحقق من جميع العناصر التي قد يؤثر فيها التغيير. وعلى الجانب الآخر، لا تكون المتصفحات القديمة دائمًا محسَّنة لتنفيذ هذه المهام. أين يمكنك تقليل عدد العناصر التي تم إلغاء صلاحيتها.

قياس تكلفة إعادة احتساب النمط

هناك طريقتان يمكنك من خلالهما قياس تكلفة إعادة حساب الأنماط في المتصفح. يعتمد كلٌّ منها على ما إذا كنت تريد قياسها في المتصفح في بيئة التطوير لديك، أو إذا كنت تريد قياس مدة هذه العملية يستغرقها المستخدمون الحقيقيون على موقع الويب لديك.

قياس تكلفة إعادة احتساب الأنماط في "أدوات مطوري البرامج في Chrome"

ومن الطرق المستخدمة لقياس تكلفة عمليات إعادة احتساب الأنماط استخدام تقرير أداء في "أدوات مطوري البرامج في Chrome" قم بما يلي للبدء:

1. افتح "أدوات مطوري البرامج".
2. انتقِل إلى علامة التبويب الأداء.
3. ضع علامة في مربّع الاختيار إحصاءات أداة الاختيار (اختياري).
4. انقر على تسجيل.
5. التفاعل مع الصفحة

عند إيقاف التسجيل، ستظهر لك الصورة التالية:

الشريط في الجزء العلوي هو مخطط لهب مصغر يرسم أيضًا إطارات لكل ثانيًا. كلما اقترب النشاط من أسفل الشريط، زادت سرعة يتم عرض الإطارات بواسطة المتصفح. إذا رأيت أنّ "مخطط اللهب" يستقر، بالجزء العلوي مع وجود أشرطة حمراء فوقها، فحينئذٍ يكون لديك عمل يتسبب في الإطارات الطويلة المدى.

الإطارات التي تعمل لفترة طويلة أثناء تفاعل مثل التمرير تستحق نظافة. إذا رأيت كتلة أرجوانية كبيرة، يمكنك تكبير النشاط واختيار أي منها المسمى إعادة حساب النمط للحصول على مزيد من المعلومات حول أعمال إعادة حساب النمط الباهظة الثمن.

يؤدي النقر على الحدث إلى عرض حزمة الاتصال الخاصة به. إذا كان عرض العمل ناتجًا عن إلى تفاعل المستخدم، فإنه يستدعي JavaScript الذي أدى إلى تغيير النمط. كما يوضح أيضًا عدد العناصر التي يؤثر فيها التغيير - أكثر من 900 فقط العناصر في هذه الحالة - والمدة التي استغرقها حساب النمط. يمكنك استخدام هذه الصفحة المعلومات لبدء محاولة إيجاد حل في التعليمات البرمجية.

في حال وضع علامة في مربّع مربّع الاختيار إحصاءات أداة الاختيار في إعدادات لوحة الأداء قبل إجراء عملية التتبُّع، عند تنفيذ الخطوات في أسفل لوحة التتبع في علامة تبويب إضافية بالاسم نفسه.

توفر هذه اللوحة بيانات مفيدة عن التكلفة النسبية لكل أداة اختيار، مما يسمح تحديد أدوات اختيار لغة CSS باهظة الثمن.

لمزيد من المعلومات، اطّلِع على مستندات إحصاءات أداة اختيار لغة CSS.

قياس تكلفة إعادة احتساب الأنماط للمستخدمين

إذا كنت مهتمًا بمعرفة المدة التي تستغرقها إعادة حساب الأنماط المستخدمين الفعليين لموقعك الإلكتروني، وهي Long Animation Frames API الأدوات اللازمة للقيام بذلك. تمّت إضافة بيانات من واجهة برمجة التطبيقات هذه إلى web-vitals مكتبة JavaScript، بما في ذلك وقت إعادة حساب الأنماط.

إذا كنت تشك في أن تأخير العرض التقديمي للتفاعل هو مساهمًا في مقياس INP لإحدى الصفحات، فإنك تحتاج إلى معرفة مقدار الوقت في إعادة حساب الأنماط على الصفحة. لمزيد من المعلومات، يُرجى الاطّلاع على كيفية قياس وقت إعادة احتساب الأنماط في الحقل.

الموارد

• إحصاءات أدوات الاختيار في "أدوات مطوري البرامج في Chrome"
• إيقاف النمط في Blink
• مدى استجابة الصفحة لتفاعلات المستخدم (INP)
• مكتبة JavaScript web-vitals
• قياس وقت إعادة احتساب الأنماط في الحقل

صورة رئيسية من Unسباش، بقلم ماركوس سبسكي.