حقیقت در مورد عملکرد انتخابگر CSS

عزیزم، بذارش پاتریک بروست برای صحبت درباره عملکرد CSS به نزدیک ترین و کاربردی ترین شکل ممکن نه اینکه CSS همیشه باشد چه چیزی سرعت را بالا می برد، یا حتی پایین ترین میوه آویزان در هنگام بهبود عملکرد.

اما if شما به دنبال دستاوردهایی در بخش CSS هستید، پاتریک راه خوبی برای شناسایی گران‌ترین انتخابگرهای شما با استفاده از Edge DevTools دارد:

• DevTools را باز کنید
• به برگه عملکرد بروید.
• اطمینان حاصل کنید که گزینه "فعال کردن ابزار دقیق رندر پیشرفته" را فعال کرده اید. این من را در این روند به هم ریخت.
• بارگذاری صفحه را ضبط کنید.
• برگه «پایین به بالا» را در گزارش باز کنید.
• اندازه سبک های محاسبه شده مجدد خود را بررسی کنید.

از اینجا، روی یکی از رویدادهای سبک محاسبه مجدد در نمای اصلی آبشار کلیک کنید و یک تب جدید "Selector Stats" دریافت خواهید کرد. به این همه خوبی های بد نگاه کن!

اکنون همه انتخابگرهایی را می‌بینید که پردازش شده‌اند و می‌توانید آنها را بر اساس مدت زمان، تعداد دفعات مطابقت، تعداد تلاش‌های تطبیق و چیزی به نام «شمارش سریع رد کردن» مرتب کنید. یاد گرفتم تعداد عناصری است که به راحتی و سریع از تطبیق حذف می شدند.

اگر CSS واقعاً گلوگاهی است که نیاز به بررسی دارد، بینش های زیادی در اینجا وجود دارد. اما پست کامل پاتریک را در بلاگ مایکروسافت اج بخوانید زیرا او عمیق‌تر به چرایی‌ها و چگونگی‌ها می‌پردازد و یک مطالعه موردی کامل را بررسی می‌کند.

لینک مستقیم →

• محتوای مبتنی بر SEO و توزیع روابط عمومی. امروز تقویت شوید.
• پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی به اینجا.
• منبع: https://css-tricks.com/the-truth-about-css-selector-performance/