مرورگرهای مدرن میتوانند دو ویژگی CSS را با هزینه کم متحرکسازی کنند: transform و opacity . اگر هر چیز دیگری را متحرکسازی کنید، احتمالاً به نرخ فریم 60 فریم در ثانیه (FPS) روان و ابریشمی نخواهید رسید. این پست توضیح میدهد که چرا این مورد صادق است.
عملکرد انیمیشن و نرخ فریم
به طور گسترده پذیرفته شده است که نرخ فریم 60 FPS برای انیمیشن سازی هر چیزی در وب، هدف است. این نرخ فریم تضمین میکند که انیمیشنهای شما روان به نظر برسند. در وب، یک فریم، زمانی است که برای انجام تمام کارهای لازم برای بهروزرسانی و رنگآمیزی مجدد صفحه لازم است. اگر هر فریم در عرض 16.7 میلیثانیه (1000 میلیثانیه / 60 ≈ 16.7) کامل نشود، کاربران این تأخیر را درک خواهند کرد.
خط لوله رندرینگ
برای نمایش چیزی در یک صفحه وب، مرورگر باید مراحل متوالی زیر را طی کند:
- سبک : سبکهایی را که برای عناصر اعمال میشوند محاسبه میکند.
- طرحبندی : هندسه و موقعیت هر عنصر را ایجاد کنید.
- رنگآمیزی : پیکسلهای هر عنصر را پر کنید.
- ترکیب : عناصر را به لایهها تقسیم کنید و لایهها را روی صفحه نمایش بکشید.
این چهار مرحله به عنوان خط لوله رندر مرورگر شناخته میشوند.
وقتی چیزی را در صفحهای که قبلاً بارگذاری شده است، متحرک میکنید، این مراحل باید دوباره اتفاق بیفتند. این فرآیند از مرحلهای شروع میشود که باید تغییر کند تا انیمیشن اجرا شود.
همانطور که قبلاً ذکر شد، این مراحل متوالی هستند. برای مثال، اگر چیزی را که طرحبندی آن تغییر میکند، متحرکسازی کنید، مراحل رنگآمیزی و کامپوزیت نیز باید دوباره اجرا شوند. بنابراین متحرکسازی چیزی که طرحبندی آن تغییر میکند، گرانتر از متحرکسازی چیزی است که فقط ترکیببندی آن تغییر میکند.
متحرکسازی ویژگیهای طرحبندی
تغییرات طرحبندی شامل محاسبه هندسه (موقعیت و اندازه) تمام عناصر تحت تأثیر تغییر است. اگر یک عنصر را تغییر دهید، ممکن است هندسه عناصر دیگر نیاز به محاسبه مجدد داشته باشد. به عنوان مثال، اگر عرض عنصر <html> را تغییر دهید، ممکن است هر یک از فرزندان آن تحت تأثیر قرار گیرند. با توجه به نحوه سرریز شدن عناصر و تأثیر آنها بر یکدیگر، تغییرات در پایین درخت گاهی اوقات میتواند منجر به محاسبات طرحبندی در تمام مسیر تا بالا شود.
هرچه درخت عناصر قابل مشاهده بزرگتر باشد، انجام محاسبات طرحبندی بیشتر طول میکشد.
متحرک سازی ویژگی های رنگ
رنگآمیزی فرآیندی است که در آن مشخص میشود عناصر با چه ترتیبی باید روی صفحه نمایش داده شوند. این فرآیند اغلب طولانیترین کار در بین تمام وظایف موجود در خط تولید است.
بیشتر نقاشی در مرورگرهای مدرن در نرمافزارهای رستر انجام میشود. بسته به اینکه عناصر برنامه شما چگونه در لایهها گروهبندی شدهاند، ممکن است عناصر دیگری علاوه بر عنصری که تغییر کرده است نیز نیاز به نقاشی داشته باشند.
متحرکسازی ویژگیهای کامپوزیت
ترکیببندی فرآیندی است که در آن صفحه به لایهها تقسیم میشود، اطلاعات مربوط به نحوه نمایش صفحه به پیکسلها تبدیل میشود (شطرنجیسازی) و لایهها کنار هم قرار میگیرند تا یک صفحه ایجاد شود (ترکیببندی).
به همین دلیل است که ویژگی opacity در فهرست چیزهایی قرار دارد که متحرکسازی آنها ارزان است. تا زمانی که این ویژگی در لایه خود باشد، تغییرات در آن میتواند توسط GPU در مرحله ترکیب انجام شود. مرورگرهای مبتنی بر Chromium و WebKit برای هر عنصری که دارای انتقال CSS یا انیمیشن روی opacity باشد، یک لایه جدید ایجاد میکنند.
لایه چیست؟
با قرار دادن چیزهایی که قرار است متحرک شوند یا به یک لایه جدید منتقل شوند، مرورگر فقط باید آن موارد را دوباره رنگآمیزی کند و نه چیز دیگری. ممکن است با مفهوم لایه در فتوشاپ که شامل مجموعهای از عناصر است که میتوانند با هم جابجا شوند، آشنا باشید. لایههای رندر مرورگر نیز مشابه این ایده هستند.
اگرچه مرورگر در تصمیمگیری در مورد اینکه چه عناصری باید روی یک لایه جدید باشند، خوب عمل میکند، اما اگر یکی را از قلم بیندازد، راههایی برای ایجاد اجباری لایه وجود دارد. میتوانید در مورد آن در «چگونه انیمیشنهای با کارایی بالا بسازیم» اطلاعات کسب کنید. با این حال، ایجاد لایههای جدید باید با دقت انجام شود زیرا هر لایه از حافظه استفاده میکند. در دستگاههایی با حافظه محدود، ایجاد لایههای جدید ممکن است مشکل عملکردی بیشتری نسبت به مشکلی که سعی در حل آن دارید، ایجاد کند. علاوه بر این، بافتهای هر لایه باید در GPU بارگذاری شوند. بنابراین، ممکن است با محدودیتهای پهنای باند بین CPU و GPU مواجه شوید.
عملکرد CSS در مقابل جاوا اسکریپت
شاید از خود بپرسید: از نظر عملکرد، استفاده از CSS یا جاوا اسکریپت برای انیمیشنها بهتر است؟
انیمیشنهای مبتنی بر CSS و انیمیشنهای وب (در مرورگرهایی که از API پشتیبانی میکنند)، معمولاً روی نخی به نام نخ کامپوزیتور (compositor thread ) مدیریت میشوند. این نخ با نخ اصلی مرورگر که در آن استایلبندی، طرحبندی، نقاشی و جاوا اسکریپت اجرا میشوند، متفاوت است. این بدان معناست که اگر مرورگر در حال اجرای برخی وظایف پرهزینه روی نخ اصلی باشد، این انیمیشنها میتوانند بدون وقفه به کار خود ادامه دهند.
همانطور که در این مقاله توضیح داده شد، در بسیاری از موارد، سایر تغییرات در تبدیلها و شفافیت نیز میتوانند توسط رشته کامپوزیتور مدیریت شوند.
اگر هر انیمیشنی باعث شروع عملیات paint، layout یا هر دو شود، thread اصلی برای انجام کار مورد نیاز خواهد بود. این موضوع هم برای انیمیشنهای CSS و هم برای انیمیشنهای جاوا اسکریپت صادق است و سربار layout یا paint احتمالاً هر کاری که مربوط به اجرای CSS یا جاوا اسکریپت باشد را تحت الشعاع قرار میدهد و این سوال را بیاهمیت میکند.