بهینه‌سازی مرحله‌ی Composite

مرحله‌ی Composite یا ترکیب، مرحله‌ایست که در آن قسمت‌های مختلف صفحه که قبلاً ترسیم شده‌اند با هم ترکیب می‌شوند. به هر کدام از این قسمت‌ها یک لایه می‌گوییم.

دو عامل مهم در بهینه‌سازی این بخش تأثیر دارند: یکی تعداد لایه‌ها و دیگر ویژگی‌های CSS که برای انیمیشن از آن‌ها استفاده می‌کنید.

برای انیمیشن فقط transform و opacity را تغییر دهید

در pixel pipeline بهترین حالت ممکن از لحاظ بهینه بودن، آن حالتی بود که مرحله‌ی صفحه‌آرایی و همچنین ترسیم حذف می‌شدند و فقط مرحله‌ی ترکیب انجام می‌شد.

برای رسیدن به این حالت باید از ویژگی‌هایی در CSS استفاده کنید که مرحله‌ی ترکیب بتواند به تنهایی آن‌ها را انجام دهد. در حال حاضر فقط دو ویژگی در CSS این خصوصیّت را دارند: transform و opacity.

نکته‌ی خیلی مهمّی که باید در نظر گرفته شود این است که این ویژگی‌ها فقط در صورتی باعث می‌شوند به بهترین حالت pixel pipeline برسیم که در لایه‌ای مجزّا از سایر عناصر قرار داشته‌باشند. در این صورت تنها کاری که انجام می‌شود این است که در مرحله‌ی ترکیب، آن لایه‌ی خاص در هنگام ترکیب با سایر لایه‌ها transform می‌خورد (جابجا می‌شود، می‌چرخد، تغییر اندازه می‌دهد و…) یا شفّافیّتش تغییر می‌کند. برای این‌که بتوانیم عنصری را به لایه‌ای مجزّا ببریم باید آن را ارتقا دهیم که در ادامه بحث می‌شود.

عنصرهایی را که قرار است انیمیشن داشته باشند ارتقا دهید

عنصرهایی را که قصد دارید به آن‌ها انیمیشن بدهید ارتقا دهید تا در لایه‌ای مجزّا قرار بگیرند. ارتقا دادن عنصرها باید دلیل داشته باشد، بدون دلیل عنصری را ارتقا ندهید. برای ارتقای یک عنصر می‌توانید ویژگی css زیر را به آن بدهید:

.moving-element {
    will-change: transform;
}

این کار باعث می‌شود که مرورگر از قبل خبر داشته باشد که چه تغییراتی قرار است در کدام ویژگی‌های css اعمال شود، تا تدارکات لازم برای این تغییر را پیش‌بینی کند، مثلاً عنصر را به لایه‌ای مجزّا ببرد.

برای مرورگرهای قدیمی‌تر که ویژگی will-change را پشتیبانی نمی‌کنند می‌توانید به این صورت بنویسید:

.moving-element {
    transform: translateZ(0);
}

زیرا transformهای سه‌بعدی به صورت خودکار باعث می‌شوند عنصر به لایه‌ای جداگانه برود.

مدیریت لایه‌ها و جلوگیری از انفجار آن‌ها

شاید بعد از اینکه متوجّه شدید لایه‌ها تا چه اندازه در بهینه‌سازی و روان بودن انیمیشن‌ها تأثیر دارند وسوسه شده باشید که تمام عنصرهای صفحه را ارتقا دهید تا در لایه‌ای مجزّا قرار بگیرند، مثلاً این طوری بنویسید:

* {
    will-change: transform;
    transform: translateZ(0);
}

مشکل اینجاست هر لایه‌ای که ایجاد می‌شود باید مدیریت شود و حافظه‌ای را نیز اشغال می‌کند، پس این کار بی‌هزینه نیست. در واقع در دستگاه‌هایی که حافظه‌ی RAM محدودی دارند، تأثیر منفی کمبود حافظه بیشتر از مزایای ایجاد لایه‌ی جدید است. ضمناً تکسچرهای هر لایه باید به GPU فرستاده شود، بنابراین محدودیت‌های بیشتری نیز از لحاظ محدودیت پهنای باند بین CPU و GPU و همچنین مقدار حافظه‌ی لازم در GPU برای تکسچرها ممکن است به وجود بیاید.

استفاده از DevTools مرورگر کروم برای فهمیدن لایه‌های موجود در صفحه

برای اینکه بتوانید لایه‌های موجود در صفحه‌ی وب خود را ببینید، و دلیل قرار گرفتن عنصرها در لایه‌های مجزّا را متوجّه شوید لازم است سربرگ Layers را در DevTools خود فعّال کنید. برای این منظور DevTools کروم را باز کنید، سپس کلیدهای Ctrl + Shift + P را بفشارید، و بعد عبارت layers را تایپ کنید و روی Show Layers کلیک کنید، مشابه تصویر زیر:

سپس سربرگ Layers به DevTools شما اضافه می‌شود که از طریق آن می‌توانید تعداد لایه‌های موجود در صفحه و دلایل ایجاد آن‌ها را ببینید.