הביצועים של האנימציות צריכים להיות טובים, אחרת הם ישפיעו לרעה על חוויית המשתמש.
בכל פעם שיוצרים אנימציה, מומלץ לשמור על 60fps, כי אם יהיו פחות גמומים או תאי מודעות שיהיו גלויים למשתמשים וישפיעו לרעה על החוויות שלהם.
- ודאו שהאנימציות לא גורמות לבעיות בביצועים. ודאו שאתם יודעים מה ההשפעה של הוספת אנימציה לנכס CSS מסוים.
- הוספת אנימציות של מאפיינים שמשנים את הגיאומטריה של הדף (פריסה) או גורמים לצביעה היא יקרה במיוחד.
- במקומות שבהם זה אפשרי, השתמשו בשינויים ובשקיפות.
- אפשר להשתמש ב-
will-changeכדי לוודא שהדפדפן ילמד את התוכן שמתכננים ליצור.
הוספת מאפיינים אינה כרוכה בתשלום, ויש נכסים זולים יותר להנפשה. לדוגמה, אנימציה של width ו-height של אלמנט משנה את הגיאומטריה שלו ועשויה לגרום לרכיבים אחרים בדף להזיז או לשנות את הגודל. התהליך הזה נקרא פריסה (או הזרמה חוזרת בדפדפנים המבוססים על שממית כמו Firefox), והוא עשוי להיות יקר אם הדף כולל הרבה רכיבים. בכל פעם שהפריסה מופעלת, בדרך כלל צריך לצבוע את הדף או חלק ממנו, והפעולה הזו בדרך כלל יקרה יותר מפעולת הפריסה עצמה.
כשאפשר, מומלץ להימנע מהוספת אנימציה של מאפיינים שמפעילים פריסה או ציור. ברוב הדפדפנים המודרניים, המשמעות היא הגבלת האנימציות ל-opacity או ל-transform, ושניהם יכולים לבצע אופטימיזציה גבוהה של האנימציות. לא משנה אם האנימציה מטופלת על ידי JavaScript או CSS.
מומלץ לקרוא את המדריך המלא ליצירת אנימציות עם ביצועים גבוהים.
שימוש בנכס will-change
משתמשים ב-will-change כדי לוודא שהדפדפן יידע שאתם מתכוונים לשנות את המאפיין של רכיב מסוים. כך הדפדפן יכול לבצע את האופטימיזציות המתאימות ביותר לפני ביצוע השינוי. עם זאת, אין לעשות שימוש יתר ב-will-change, מפני שהפעולה הזו עלולה לגרום לדפדפן לבזבז משאבים, וכתוצאה מכך יהיו אפילו יותר בעיות בביצועים.
ככלל, אם האנימציה עשויה להיות מופעלת במהלך 200 האלפיות הבאות, בין אם על ידי אינטראקציה של משתמש או בגלל מצב האפליקציה שלכם, מומלץ להוסיף will-change לאלמנטים של אנימציה. לכן ברוב המקרים, צריך להפעיל את will-change בכל רכיב בתצוגה הנוכחית של האפליקציה שאתם מתכוונים לשנות. לדוגמה של דוגמת התיבה שבה השתמשנו במדריכים הקודמים, הוספת will-change עבור טרנספורמציות ושקיפות נראית כך:
.box {
will-change: transform, opacity;
}
הדפדפנים שתומכים בו, כרגע רוב הדפדפנים המודרניים, יבצעו את האופטימיזציה המתאימה כדי לתמוך בשינוי או באנימציה של המאפיינים האלה.
ביצועי CSS לעומת JavaScript
יש באינטרנט שרשורים רבים של תגובות ודפים שדנים ביתרונות היחסיים של אנימציות CSS ו-JavaScript מבחינת ביצועים. כמה נקודות שכדאי לזכור:
אנימציות מבוססות CSS ואנימציות באינטרנט שבהן יש תמיכה במקור, מטופלות בדרך כלל בשרשור שנקרא 'שרשור היצירה'. הוא שונה מ'ה-thread הראשי' של הדפדפן, שבו מתבצעים עיצוב, פריסה, ציור ו-JavaScript. כלומר, אם הדפדפן מפעיל משימות יקרות בשרשור הראשי, האנימציות האלו ימשיכו לפעול בלי הפרעה.
במקרים רבים, ניתן לטפל גם בשינויים אחרים בטרנספורמציות ובשקיפות באמצעות ה-thread של המרכיב.
אם אנימציה כלשהי מפעילה צבע, פריסה או את שניהם, יש צורך ב "שרשור הראשי" כדי לבצע את הפעולה. הדבר נכון גם לגבי אנימציות המבוססות על CSS וגם עבור אנימציות המבוססות על JavaScript, והתקורה של הפריסה או הציור יגמדת ככל הנראה כל עבודה הקשורה לביצוע של CSS או JavaScript, וכתוצאה מכך תתעורר השאלה הנכונה.