سلام دوستان عزیز.امروز میخوام براتون از بررسی پرفورمنس انیمیشن پیاده سازی شده با TranslateX و left رو انجام بدیم.
فک کنین یه انیمیشن ساده میخوایم پیاده سازی کنیم که یه باکس زمانی که روش کلیک شد ازجایی که هست ۳۰۰ پیکسل به سمت راست حرکت کنه و وایسه.
خب دوتا روش رو بررسی کردیم : یکیش اینه که با استفاده از keyframes , animation
پراپرتیه left المنت رو از ۰ به ۳۰۰ تغییر بدیم حالت دیگه اینه که با استفاده از transform و transition پراپرتیه translateX المنت رو از ۰ به ۳۰۰ تغییر بدیم.
استایل های حالت اول :
بعد از اینکه روی باکس کلیک شد، کلاس move رو به المنتمون میدیم.
حالا بیاین خروجیش رو در حالت ضعیف شده CPU بررسی کنیم:
کد حالت دوم رو بررسی کنیم:
بعد از اینکه روی باکس کلیک شد، کلاس move رو به المنتمون میدیم
حالا بیاین خروجیش رو در حالت ضعیف شده CPU بررسی کنیم:
فرقش رو دیدین؟
توی حالت دوم ۲ تا مرحله layout و paint مرورگر که مراحل سنگینی هم هستن و main thread رو بلاک میکنن،skip شدن.
دلیلش چیه ؟ وقتی از transform استفاده می‌کنیم باعث میشه مرورگر یک لایه جدا برای المنتمون بسازه و برای اجرای انیمیشن دیگه main thread درگیر layout و paint نمیشه و صرفا compositor thread کار جابجایی لایه و اجرای انیمیشن رو انجام میده.
ممنون میشم اگر نظری داشتین باهام به اشتراک بذارین?
