Expensive Style Recalculations چیه؟!

سلام دوستان، من علی هستم، نویسنده جدید دیتی. 👋

احتمالاً برای شما هم پیش اومده که موقع بررسی Performance یک پروژه، داخل Chrome DevTools با عبارتی مثل Recalculate Style روبه‌رو بشید و از خودتون بپرسید: «این دیگه چیه و چرا اینقدر زمان گرفته؟»

امروز قراره سراغ یکی از دلایل رایج افت Performance در فرانت‌اند بریم؛ یعنی Expensive Style Recalculations. با هم می‌بینیم این مفهوم دقیقاً چیه، چرا به وجود میاد و چه کارهایی می‌تونیم انجام بدیم تا اثرش رو روی پروژه‌هامون کمتر کنیم.

وقتی یک وب‌سایت کند می‌شه، اغلب ذهنمون به سمت JavaScript یا درخواست‌های شبکه میره. اما در بعضی از مواقع، عامل اصلی افت عملکرد جایی پنهان شده که کمتر به آن توجه می‌کنیم: Style Recalculation.

اگر در Chrome DevTools با پیام‌هایی مثل Recalculate Style یا Forced Reflow مواجه شدید، احتمالاً با یکی از رایج‌ترین مشکلات Performance در فرانت‌اند سروکار دارید.

در این مقاله بررسی می‌کنیم که Expensive Style Recalculations چیه، چرا اتفاق می‌افته و چطور میتونیم از آن جلوگیری کنیم.

مرورگر چجوری صفحه رو رندر میکنه؟!
 

خوب بیاید قبل این که بریم سر اصل مطلب در مورد این بحث کنیم که مرورگر برای نمایش یک صفحه چه راهی رو طی میکنه...
اگر بخوایم وارد جزئیات نشیم فرایند کلی رندر یک صفحه به این شکله:

• تبدیل HTML به DOM
• تبدیل CSS به CSSOM
• ساخت Render Tree
• محاسبه Layout یا Reflow
• Paint
• Composite

در مرحله ساخت Render Tree، مرورگر باید تشخیص بده که هر عنصر چه استایل‌هایی داره و کدام قوانین CSS روی آن اعمال میشه.

همین فرآیند رو Style Recalculation می‌نامیم.
 

Style Recalculation دقیقاً چیه؟

فرض کنید این CSS را داریم:

.button {
  background: blue;
}

.button.active {
  background: red;
}

و این HTML:

<button class="button active">
  Click Me
</button>

مرورگر باید تشخیص بده:

• چه selectorهایی روی این دکمه اعمال میشه
• اولویت هر selector چیه
• مقدار نهایی هر property چه میشه

این محاسبات همان Style Recalculation هستند.