يبدو أن العديد من المعلمين الذين أعجب بهم في مجال الويب الأمامي إما ينسحبون أو يقللون جهودهم: Axel Rauschmayer، Salma Alam-Naylor، Josh W. Comeau، على سبيل المثال لا الحصر. وقد تحول مشاهير آخرون مثل Kent C. Dodds وAddy Osmani وRachel Nabors وLydia Hallie من الحديث عن تطوير الواجهة الأمامية إلى الحديث عن... حسنًا، خمن.

لم أكن أبدًا أكسب رزقي من الحديث عن تطوير الويب، لكن لدي هذه المدونة، وقد قدمت محادثات في المؤتمرات وبودكاست حول أشياء أنا متحمس لها. مؤخرًا، على سبيل المثال، كان شغفي هو شرح كل تفاصيل أداء CSS: كيف يعمل shadow DOM، وكيف يعمل محرك الأنماط في المتصفح، ومخاطر CSS-in-JS، وما إلى ذلك.

فقط للمتعة، قررت أن أسأل Claude Sonnet كيف سيتعامل مع تتبع Chrome بتكاليف "حساب النمط" العالية. هذا أحد ألغازي المفضلة، لأنه النوع الذي رأيت مطوري الويب – حتى ذوي الخبرة! – يتعثرون فيه مرارًا وتكرارًا. أعطى Claude إجابة جديرة بالإعجاب تمامًا.

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

ابحث عن تعقيد المحدد، ونطاق الإبطال، وتكرار التغييرات، وانتشار الخصائص الموروثة. قم بتمكين "إحصائيات المحددات" في إعدادات أداء Dev Tools لمعرفة المحددات البطيئة وعدد العناصر التي تم اختبارها ضدها – هذا هو القياس التالي الأكثر فائدة.

الكيانات الرئيسية: الأشخاص: Axel Rauschmayer، Salma Alam-Naylor، Josh W. Comeau، Kent C. Dodds، Addy Osmani، Rachel Nabors، Lydia Hallie، Claude Sonnet