جاوا اسکریپت اغلب محرکی برای تغییرات بصری است. گاهی اوقات این تغییرات را مستقیماً از طریق دستکاریهای سبک و گاهی اوقات از طریق محاسباتی که منجر به تغییرات بصری میشوند، مانند جستجو یا مرتبسازی دادهها، ایجاد میکند. جاوا اسکریپت با زمانبندی نامناسب یا اجرای طولانی مدت میتواند یکی از دلایل رایج مشکلات عملکردی باشد و شما باید تا حد امکان به دنبال به حداقل رساندن تأثیر آن باشید.
محاسبه سبک
تغییر DOM با اضافه کردن و حذف عناصر، تغییر ویژگیها، کلاسها یا پخش انیمیشنها باعث میشود مرورگر سبکهای عناصر و در بسیاری از موارد، طرحبندی بخشی یا تمام صفحه را دوباره محاسبه کند. این فرآیند محاسبه سبک نامیده میشود.
مرورگر با ایجاد مجموعهای از انتخابگرهای منطبق، محاسبهی سبکها را آغاز میکند تا مشخص کند کدام کلاسها، شبهانتخابگرها و شناسهها برای هر عنصر معین اعمال میشوند. سپس، قوانین سبک را از انتخابگرهای منطبق پردازش میکند و متوجه میشود که عنصر در نهایت چه سبکهایی دارد.
نقش محاسبه مجدد سبک در تأخیر تعامل
تعامل تا رنگآمیزی بعدی (INP) یک معیار عملکرد زمان اجرا با محوریت کاربر است که میزان پاسخگویی کلی صفحه به ورودی کاربر را ارزیابی میکند. این معیار، تأخیر تعامل را از زمانی که کاربر با صفحه تعامل میکند تا زمانی که مرورگر فریم بعدی را که بهروزرسانیهای بصری مربوطه را در رابط کاربری نشان میدهد، رنگآمیزی میکند، اندازهگیری میکند.
یکی از اجزای مهم یک تعامل، زمان لازم برای ترسیم فریم بعدی است. کار رندرینگ انجام شده برای ارائه فریم بعدی از بخشهای زیادی تشکیل شده است، از جمله محاسبه سبکهای صفحه که درست قبل از طرحبندی، ترسیم و کارهای ترکیببندی رخ میدهد. این راهنما بر هزینههای محاسبه سبک تمرکز دارد، اما کاهش هر بخشی از کل مدت زمان رندرینگ تعامل، تأخیر کل آن را نیز کاهش میدهد.
پیچیدگی انتخابگرهای خود را کاهش دهید
سادهسازی انتخابگرهای CSS میتواند به سرعت بخشیدن به محاسبات سبک صفحه شما کمک کند. سادهترین انتخابگرها به عنصری در CSS با فقط یک نام کلاس اشاره میکنند:
.title {
/* styles */
}
اما، با رشد هر پروژه، احتمالاً به CSS پیچیدهتری نیاز دارد و ممکن است در نهایت با انتخابگرهایی شبیه به این مواجه شوید:
.box:nth-last-child(-n+1) .title {
/* styles */
}
برای تعیین اینکه چگونه این استایلها در صفحه اعمال میشوند، مرورگر باید عملاً بپرسد «آیا این عنصری با کلاس title و والد آن کلاس box است که فرزند منفی n ام به علاوه ۱ عنصر والد خود است؟» فهمیدن این موضوع میتواند برای مرورگر کمی زمان ببرد. برای سادهسازی این کار، میتوانید انتخابگر را به نام کلاس خاصتری تغییر دهید:
.final-box-title {
/* styles */
}
این نامهای کلاس جایگزین ممکن است عجیب به نظر برسند، اما کار مرورگر را بسیار سادهتر میکنند. برای مثال، در نسخه قبلی، برای اینکه مرورگر بداند یک عنصر آخرین نوع از آن است، ابتدا باید همه چیز را در مورد تمام عناصر دیگر بداند تا مشخص کند که آیا عناصری که بعد از آن میآیند میتوانند nth-last-child باشند یا خیر. این میتواند از نظر محاسباتی بسیار پرهزینهتر از تطبیق یک انتخابگر با یک عنصر تنها بر اساس نام کلاس آن باشد.
تعداد عناصری که استایلدهی میشوند را کاهش دهید
یکی دیگر از ملاحظات عملکردی - و اغلب مهمتر از پیچیدگی انتخابگر - میزان کاری است که باید هنگام تغییر یک عنصر انجام شود.
به طور کلی، بدترین حالت هزینه محاسبه سبک عناصر محاسبه شده، تعداد عناصر ضربدر تعداد انتخابگرها است، زیرا مرورگر باید هر عنصر را حداقل یک بار در برابر هر سبک بررسی کند تا ببیند آیا مطابقت دارد یا خیر.
محاسبات سبک میتوانند به جای نامعتبر کردن کل صفحه، مستقیماً چند عنصر را هدف قرار دهند. در مرورگرهای مدرن، این مشکل کمتر پیش میآید زیرا مرورگر همیشه نیازی به بررسی تمام عناصری که یک تغییر ممکن است روی آنها تأثیر بگذارد، ندارد. از سوی دیگر، مرورگرهای قدیمیتر همیشه برای چنین کارهایی بهینه نشدهاند. در صورت امکان، باید تعداد عناصر نامعتبر را کاهش دهید .
هزینه محاسبه مجدد سبک خود را اندازهگیری کنید
چند روش برای اندازهگیری هزینه محاسبه مجدد استایل در مرورگر وجود دارد. هر یک از آنها بستگی به این دارد که آیا میخواهید آن را در مرورگر در محیط توسعه خود اندازهگیری کنید، یا اینکه میخواهید مدت زمان این فرآیند را برای کاربران واقعی در وبسایت خود اندازهگیری کنید.
هزینه محاسبه مجدد استایل را در Chrome DevTools اندازهگیری کنید
یکی از راههای اندازهگیری هزینه محاسبات مجدد استایل، استفاده از پنل عملکرد در Chrome DevTools است. برای شروع، مراحل زیر را انجام دهید:
- ابزار توسعه (DevTools) را باز کنید.
- به برگه عملکرد بروید.
- کادر انتخاب آمار (اختیاری) را علامت بزنید.
- روی ضبط کلیک کنید.
- با صفحه تعامل داشته باشید.
وقتی ضبط را متوقف کنید، چیزی شبیه به تصویر زیر خواهید دید:
نوار بالایی یک نمودار شعلهای مینیاتوری است که تعداد فریمها در ثانیه را نیز نشان میدهد. هرچه فعالیت به پایین نوار نزدیکتر باشد، مرورگر فریمهای سریعتری را رسم میکند. اگر نمودار شعلهای را در بالا با نوارهای قرمز در بالای آن مشاهده کردید، پس کاری دارید که باعث فریمهای طولانی مدت میشود.
فریمهای طولانی مدت در طول تعاملی مانند پیمایش، ارزش بررسی دقیقتری را دارند. اگر یک بلوک بنفش بزرگ میبینید، روی فعالیت زوم کنید و هر کاری را که با عنوان «محاسبه مجدد سبک» مشخص شده است انتخاب کنید تا اطلاعات بیشتری در مورد کار محاسبه مجدد سبک که احتمالاً پرهزینه است، به دست آورید.
کلیک روی این رویداد، پشته فراخوانی آن را نشان میدهد. اگر کار رندرینگ ناشی از تعامل کاربر باشد، جاوا اسکریپتی را که باعث تغییر سبک شده است، فراخوانی میکند. همچنین تعداد عناصری را که این تغییر روی آنها تأثیر میگذارد - در این مورد کمی بیش از ۹۰۰ عنصر - و مدت زمان محاسبه سبک را نشان میدهد. میتوانید از این اطلاعات برای شروع تلاش برای یافتن راه حلی در کد خود استفاده کنید.
اگر قبل از انجام ردیابی، کادر انتخاب آمار را در تنظیمات پنل عملکرد علامت زده باشید، پنل پایین در ردیابی یک برگه اضافی با همین نام خواهد داشت.
این پنل دادههای مفیدی در مورد هزینه نسبی هر انتخابگر ارائه میدهد و به شما امکان میدهد انتخابگرهای CSS گرانقیمت را شناسایی کنید.
برای اطلاعات بیشتر، به مستندات CSS Selector Stats مراجعه کنید.
هزینه محاسبه مجدد سبک را برای کاربران واقعی اندازهگیری کنید
اگر کنجکاو هستید که بدانید محاسبه مجدد سبک برای کاربران واقعی وبسایت شما چقدر طول میکشد، API فریمهای انیمیشن طولانی ابزارهای لازم برای انجام این کار را در اختیار شما قرار میدهد. دادههای این API، از جمله زمان محاسبه مجدد سبک، به کتابخانه جاوا اسکریپت web-vitals اضافه شده است.
اگر گمان میکنید که تأخیر در ارائه یک تعامل، عامل اصلی در INP یک صفحه است، باید بفهمید که چه مقدار از آن زمان صرف محاسبه مجدد سبکها در صفحه میشود. برای اطلاعات بیشتر، در مورد نحوه اندازهگیری زمان محاسبه مجدد سبک در این زمینه مطالعه کنید.