تابز مدیا | آموزش قدم به قدم برنامه نویسی

Will Change

📌 مفهوم

ویژگی will-change به مرورگر اطلاع می‌دهد که چه ویژگی‌هایی از یک عنصر قرار است در آینده تغییر کنند.
این کار باعث می‌شود مرورگر بهینه‌سازی‌های لازم برای رندر سریع‌تر و روان‌تر انیمیشن‌ها و تغییرات را قبل از وقوع تغییر انجام دهد.

⚡ کاربرد اصلی: افزایش کارایی انیمیشن‌ها و ترنزیشن‌ها، جلوگیری از لگ یا تأخیر در تغییرات CSS.

📑 مقادیر CSS

مقدار	توضیح
`auto`	پیش‌فرض، هیچ بهینه‌سازی خاصی انجام نمی‌شود
`scroll-position`	پیش‌بینی تغییرات مربوط به اسکرول
`contents`	پیش‌بینی تغییر محتوای داخلی عنصر
`<property>`	هر ویژگی CSS که قرار است تغییر کند، مثلاً: `opacity`, `transform`, `top`, `left` و غیره

مثال CSS:


.box {
  will-change: transform, opacity;
}

مرورگر برای transform و opacity آماده‌سازی می‌کند تا تغییرات روان‌تر اجرا شوند.

🏷 Tailwind CSS

Tailwind کلاس‌های آماده برای will-change دارد:

کلاس	توضیح
`will-change-auto`	مقدار پیش‌فرض مرورگر (`auto`)
`will-change-scroll`	آماده‌سازی برای تغییرات مربوط به اسکرول
`will-change-contents`	آماده‌سازی برای تغییر محتوا
`will-change-transform`	آماده‌سازی برای تغییرات transform
`will-change-opacity`	آماده‌سازی برای تغییرات opacity

مثال Tailwind:


<div class="will-change-transform will-change-opacity">
  این عنصر برای ترنزیشن transform و opacity بهینه شده است
</div>

💡 نکته: استفاده بیش از حد از will-change می‌تواند باعث مصرف زیاد حافظه شود، بنابراین فقط روی عناصر مهم و تغییرپذیر استفاده کنید.