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