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

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

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

خلاصه‌ی مبحث:

  • برای انیمیشن‌ها فقط ویژگی‌های transform و opacity را تغییر دهید.
  • از ویژگی‌های will-change یا translateZ برای ارتقا دادن انیمیشن استفاده کنید.
  • تعداد عناصری که ارتقا می‌دهید بیش از اندازه زیاد نشود، زیرا لایه‌ها باید مدیریت شوند و نیاز به حافظه دارند.

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

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

پیکسل پایپلاین بدون layout و paint

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

ویژگی‌های بدون نیاز به paint و layout

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

نکته: اگر نگرانید که نمی‌توانید انیمیشن‌های خود را محدود به همین دو ویژگی کنید، نگاهی به قانون FLIP بیندازید که کمکتان می‌کند در بیشتر مواقع انیمیشن‌هایی را که قرار بود با ویژگی‌های سنگین CSS به وجود بیاورید، فقط با تغییر transform یا opacity ایجاد کنید.

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

عنصرهایی را که قصد دارید به آن‌ها انیمیشن بدهید ارتقا دهید تا در لایه‌ای مجزّا قرار بگیرند. ارتقا دادن عنصرها باید دلیل داشته باشد، بدون دلیل عنصری را ارتقا ندهید. برای ارتقای یک عنصر می‌توانید ویژگی 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

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *