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