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

احتمالاً برای شما هم پیش اومده که موقع بررسی 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 هستند.

Expensive Style Recalculations یعنی چه؟

تا اینجا همه چیز طبیعیه.

اما مشکل زمانی شروع میشه که مرورگر مجبور شود این محاسبات را بارها و بارها تکرار کنه.

برای مثال:

document.body.classList.add("dark-mode");

در نگاه اول یک خط ساده است.

اما اگر تعداد زیادی عنصر در صفحه وجود داشته باشه، مرورگر باید بررسی کنه که اضافه شدن کلاس dark-mode روی استایل کدام عناصر تأثیر گذاشته.

در نتیجه:

  • هزاران selector دوباره بررسی می‌شوند.
  • Render Tree به‌روزرسانی می‌شود.
  • احتمالاً Layout جدید محاسبه می‌شود.

در این شرایط با چیزی مواجه میشیم که به آن Expensive Style Recalculations گفته میشه.

یعنی:

مرورگر برای محاسبه مجدد CSS زمان و منابع زیادی مصرف می‌کند.

چه چیزهایی باعث ایجاد این مشکل می‌شوند؟

1. تغییرات مکرر در Style

2. Selectorهای پیچیده

3. تغییر کلاس روی والدهای بزرگ

4. Layout Thrashing

چطور این مشکل را پیدا کنیم؟

بهترین ابزار برای پیدا کردن این مشکل Chrome DevTools است.

  1. وارد تب Performance شید.
  2. روی Record کلیک کنید.
  3. چند تعامل کاربر را انجام بدید.
  4. ضبط را متوقف کنید.

اگر موارد زیر را زیاد مشاهده کردید:

  • Recalculate Style
  • Layout
  • Forced Reflow

احتمالاً با مشکل Performance روبه‌رو هستید.

جمع‌بندی

Expensive Style Recalculations زمانی رخ میده که مرورگر مجبور شه بارها و با هزینه بالا قوانین CSS را دوباره محاسبه کنه.

رایج‌ترین دلایل آن عبارت‌اند از:

  • تغییرات زیاد در DOM
  • تغییر مکرر Styleها
  • Selectorهای پیچیده
  • Layout Thrashing
  • انیمیشن‌های نامناسب

در پروژه‌های React و Next.js، کاهش این محاسبات میتونه مستقیماً باعث اسکرول روان‌تر، FPS بالاتر و تجربه کاربری بهتر شه.

 

و در نهایت ممنون که وقت گذاشتید و امیدوارم براتون مفید و کاربردی بوده باشه.