الحقيقة حول أداء CSS Selector

الجيز ، اتركه باتريك بروسيت يتحدث عن أداء CSS بأقرب طريقة ممكنة وعملية. لا يعني ذلك أن CSS دائمًا ما الذي يرفع السرعة، أو حتى الفاكهة المعلقة الأدنى عندما يتعلق الأمر بتحسين الأداء.

لكن if كنت تبحث عن مكاسب من جانب CSS للأشياء ، لدى Patrick طريقة لطيفة لاستكشاف أغلى المحددات باستخدام Edge DevTools:

• الكراك افتح DevTools.
• توجه إلى علامة تبويب الأداء.
• تأكد من تمكين الخيار "تمكين أدوات العرض المتقدمة". هذا أوقفني في هذه العملية.
• سجل تحميل الصفحة.
• افتح علامة التبويب "من أسفل إلى أعلى" في التقرير.
• تحقق من حجم الأنماط المعاد حسابها.

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

ترى الآن جميع المحددات التي تمت معالجتها ويمكن فرزها حسب المدة التي استغرقتها وعدد مرات المطابقة وعدد محاولات المطابقة وشيء يسمى "حساب الرفض السريع" والذي لقد تعلمت هو عدد العناصر التي كان من السهل والسريع إزالتها من المطابقة.

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

رابط مباشر →

• محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
• بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. الوصول هنا.
• المصدر https://css-tricks.com/the-truth-about-css-selector-performance/