یه ترفند CSS هست که خیلی‌ها وقتی انیمیشن سایت لگ می‌زنه سریع میرن سراغش:
.element {
will-change: transform;
}و فکر می‌کنن:
«خب، به مرورگر گفتم قراره تغییر کنه؛ پس حتماً سریع‌تر میشه.»
ولی قضیه این‌قدر ساده نیست.
حالا will-change به مرورگر می‌گه:
«خودت رو برای تغییر احتمالی این property آماده کن.»
اما اگر روی ده‌ها المان استفاده بشه، ممکنه مصرف منابع و حافظه بیشتر بشه و حتی Performance رو بدتر کنه.
پس این کار رو نکن:
* {
will-change: transform;
}😐
بهتره فقط برای المان‌هایی استفاده بشه که واقعاً قرار هست تغییر کنن؛ مخصوصاً در سناریوهای مشخص مثل Animation.
حتی در خیلی از موارد، اول باید ببینی مشکل واقعاً از کجاست و آیا transform
، opacity یا ساختار انیمیشن درست استفاده شده یا نه.قضیه Performance یعنی بهینه استفاده کردن از منابع، نه فعال کردن تمام گزینه‌های بهینه‌سازی.
@CodeVerse_dev