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

Jeremy Wagner

Paul Lewis

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

احتساب النمط

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

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

ملاحظة: يتم استخدام نصف الوقت تقريبًا في Blink (محرك العرض المستخدَم في Chromium والمتصفحات المُشتقة) لحساب النمط المحسوب لأحد العناصر هو ويُستخدم لمطابقة المحددات، بينما يُستخدم النصف الآخر لإنشاء للنمط من القواعد المتطابقة. رون ليلسفين، أوبرا / إيقاف النمط في Blink

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

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

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

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

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

.title {
  /* styles */
}

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

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

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

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

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

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

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

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

ملاحظة: كانت هذه الحالة هي أنه إذا غيّرت فئة في عنصر واحد، سيتم الأطفال إلى إعادة حساب أنماطهم المحسوبة. والآن، بعض المتصفحات وبدلاً من ذلك، تحتفظ بمجموعة صغيرة من القواعد الفريدة لكل عنصر من شأنه أن أنماط العنصر المراد إعادة احتسابها إذا تغيرت. وهذا يعني أن قد يلزم إعادة حساب العنصر اعتمادًا على مكانه في الشجرة، وما الذي تغيّر؟

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

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

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

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

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

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

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

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

اللقطات طويلة الأمد في نشاط "أدوات مطوري البرامج" ملخّص

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

إنّ عملية إعادة حساب الأنماط على المدى الطويل أكثر من 25 ملي ثانية في ملخّص "أدوات مطوري البرامج"

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

استخدام القالب والعنصر والمعدِّل

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

.list {
  /* Styles */
}

.list__list-item {
  /* Styles */
}

إذا كنت بحاجة إلى مفتاح تعديل، كما في المثال الأخير الأخير، يمكنك إضافة ما يلي: التالي:

.list__list-item--last-child {
  /* Styles */
}

يعتبر BEM نقطة انطلاق جيدة لتنظيم لغة CSS، سواء من خلال بنية من المنظور، وبسبب تبسيط البحث عن الأنماط، الذي يروج له.

إذا لم يعجبك BEM، هناك طرق أخرى للتعامل مع CSS، ولكن عليك في تقييم أدائها وهيكلتها قبل أن تبدأ.

الموارد

• إيقاف النمط في Blink
• BEM (الحظر والعنصر والمعدِّل)

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