ترکیب بندی جایی است که قسمت های رنگ شده صفحه برای نمایش روی صفحه در کنار هم قرار می گیرند. انیمیشن‌های غیر ترکیبی به کار بیشتری نیاز دارند و می‌توانند در تلفن‌های ارزان‌قیمت یا زمانی که کارهای سنگین روی موضوع اصلی اجرا می‌شوند، بی‌نقص (نه روان) به نظر برسند.
دو عامل کلیدی در این زمینه وجود دارد که بر عملکرد صفحه تأثیر می گذارد: تعداد لایه های ترکیبی که باید مدیریت شوند و ویژگی هایی که برای انیمیشن ها استفاده می کنید.
خلاصه
- به تغییر تبدیل و کدورت برای انیمیشن های خود بچسبید.
- عناصر متحرک را با
will-changeیاtranslateZتبلیغ کنید. - اجتناب از استفاده بیش از حد از قوانین تبلیغات؛ لایه ها به حافظه و مدیریت نیاز دارند.
از تغییرات تبدیل و شفافیت برای انیمیشن ها استفاده کنید
بهترین نسخه خط لوله پیکسل از طرح و رنگ اجتناب می کند و فقط به تغییرات ترکیبی نیاز دارد:
برای رسیدن به این هدف، باید به ویژگی‌های در حال تغییری که می‌تواند توسط کامپوزیتور به تنهایی مدیریت شود، پایبند باشید. امروزه تنها دو ویژگی وجود دارد که برای آنها صادق است - transform s و opacity :
اخطار برای استفاده از transform s و opacity این است که عنصری که این ویژگی ها را روی آن تغییر می دهید باید روی لایه ترکیب کننده خودش باشد. برای ایجاد یک لایه باید عنصر را تبلیغ کنید که در ادامه به آن خواهیم پرداخت.
عناصری را که قصد دارید متحرک کنید، تبلیغ کنید
همانطور که در بخش " ساده کردن پیچیدگی رنگ و کاهش مناطق رنگ " ذکر کردیم، باید عناصری را که قصد دارید آنها را متحرک کنید (در حد منطق، زیاده روی نکنید!) را در لایه خود تبلیغ کنید:
.moving-element {
will-change: transform;
}
یا برای مرورگرهای قدیمی یا مرورگرهایی که از تغییر اراده پشتیبانی نمی کنند:
.moving-element {
transform: translateZ(0);
}
لایه ها را مدیریت کنید و از انفجار لایه ها جلوگیری کنید
بنابراین، شاید وسوسه انگیز باشد که بدانید لایه ها اغلب به عملکرد کمک می کنند، همه عناصر صفحه خود را با چیزی شبیه به موارد زیر تبلیغ کنید:
* {
will-change: transform;
transform: translateZ(0);
}
این روشی است برای گفتن اینکه می‌خواهید تک تک عناصر صفحه را تبلیغ کنید. مشکل اینجاست که هر لایه ای که ایجاد می کنید نیاز به حافظه و مدیریت دارد و این رایگان نیست. در واقع، در دستگاه‌هایی با حافظه محدود، تأثیر بر عملکرد می‌تواند بسیار بیشتر از هر مزیتی از ایجاد یک لایه باشد. بافت‌های هر لایه باید در GPU آپلود شوند، بنابراین محدودیت‌های بیشتری از نظر پهنای باند بین CPU و GPU و حافظه موجود برای بافت‌های GPU وجود دارد.
از Chrome DevTools برای درک لایه‌های برنامه خود استفاده کنید
برای درک درستی از لایه‌ها در برنامه‌تان و اینکه چرا یک عنصر دارای لایه است، باید نمایه‌ساز Paint را در Timeline Chrome DevTools فعال کنید:
با روشن بودن این دستگاه باید ضبط کنید. وقتی ضبط به پایان رسید، می‌توانید روی فریم‌های جداگانه کلیک کنید، که بین نوارهای فریم در ثانیه و جزئیات یافت می‌شود:
با کلیک بر روی این گزینه یک گزینه جدید در جزئیات در اختیار شما قرار می دهد: یک برگه لایه.
این گزینه نمای جدیدی را نشان می‌دهد که به شما امکان می‌دهد تمام لایه‌ها را در طول آن فریم، اسکن و زوم کنید، همراه با دلایل ایجاد هر لایه.
با استفاده از این نما می توانید تعداد لایه های خود را ردیابی کنید. اگر در طول اقدامات حیاتی عملکرد مانند پیمایش یا انتقال زمان زیادی را صرف ترکیب کردن می‌کنید (باید حدود 4 تا 5 میلی‌ثانیه را هدف بگیرید)، می‌توانید از اطلاعات اینجا استفاده کنید تا ببینید چند لایه دارید، چرا ایجاد شده‌اند، و از آنجا تعداد لایه ها را در برنامه خود مدیریت کنید.