برخی از انیمیشن ها در صفحات وب را می توان به طور کامل در مرحله ترکیب بندی خط لوله رندر مدیریت کرد .
انیمیشن‌های غیر ترکیبی به کار بیشتری نیاز دارند و می‌توانند در تلفن‌های ارزان‌قیمت یا زمانی که کارهای سنگین روی موضوع اصلی اجرا می‌شوند، بی‌نقص (نه روان) به نظر برسند.
انیمیشن‌های غیر ترکیبی همچنین می‌توانند تغییر چیدمان تجمعی (CLS) صفحه شما را افزایش دهند، زیرا منجر به حرکت واقعی عناصری می‌شوند که الگوریتم CLS اندازه‌گیری می‌کند، که ممکن است باعث تغییر در عناصر دیگر شود. انیمیشن های ترکیبی منجر به جابجایی عناصر دیگر نمی شوند و بنابراین از CLS حذف می شوند. کاهش CLS امتیاز عملکرد فانوس دریایی شما را بهبود می بخشد.
پس زمینه
الگوریتم‌های مرورگر برای تبدیل HTML، CSS و جاوا اسکریپت به پیکسل در مجموع به عنوان خط لوله رندر شناخته می‌شوند.
اگر متوجه نشدید که هر مرحله از خط لوله رندر چه معنایی دارد، اشکالی ندارد. نکته کلیدی در حال حاضر این است که در هر مرحله از خط لوله رندر، مرورگر از نتیجه عملیات قبلی برای ایجاد داده های جدید استفاده می کند. به عنوان مثال، اگر کد شما کاری انجام می دهد که Layout را فعال می کند، مراحل Paint و Composite باید دوباره اجرا شوند. انیمیشن غیر ترکیبی به هر انیمیشنی گفته می‌شود که یکی از مراحل اولیه در خط لوله رندر (سبک، طرح‌بندی یا رنگ) را راه‌اندازی کند. انیمیشن های غیر ترکیبی عملکرد بدتری دارند زیرا مرورگر را مجبور به انجام کارهای بیشتر می کنند.
منابع زیر را بررسی کنید تا در مورد خط لوله رندر عمیق بدانید:
- نگاهی به مرورگرهای وب مدرن (قسمت 3)
- پیچیدگی رنگ را ساده کنید و مناطق رنگ را کاهش دهید
- به ویژگی‌های فقط compositor پایبند باشید و تعداد لایه‌ها را مدیریت کنید
چگونه Lighthouse انیمیشن های غیر ترکیبی را تشخیص می دهد
وقتی یک انیمیشن را نمی توان ترکیب کرد، کروم دلایل شکست را به DevTools trace گزارش می دهد، چیزی که Lighthouse می خواند. Lighthouse گره‌های DOM را فهرست می‌کند که دارای انیمیشن‌هایی هستند که ترکیب نشده‌اند، همراه با دلایل شکست برای هر انیمیشن.
چگونه از ترکیب شدن انیمیشن ها اطمینان حاصل کنیم
رجوع کنید به ویژگی‌های فقط کامپوزیتور پایبند باشید و تعداد لایه‌ها و انیمیشن‌های با کارایی بالا را مدیریت کنید.