אנימציות וביצועים

הביצועים של האנימציות צריכות להיות טובות, אחרת הן ישפיעו לרעה על חוויית המשתמש.

פול לואיס

סם ת'ורוגוד

מומלץ לשמור על קצב של 60FPS בכל פעם שיוצרים אנימציה, מכיוון שפחות הפרעות גורמות לשיבושים או לחוסר השהיה, שהמשתמשים יבחינו בהם לרעה וישפיעו לרעה על החוויה שלהם.

• ודאו שהאנימציות לא גורמות לבעיות בביצועים. ודאו שאתם יודעים מה ההשפעה של יצירת האנימציה בנכס CSS נתון.
• אנימציה של מאפיינים שמשנים את הגיאומטריה של הדף (פריסה) או גורמים לצביעה יקרות במיוחד.
• אם אפשר, הקפידו להשתמש בטרנספורמציות ובשקיפות.
• צריך להשתמש ב-will-change כדי לוודא שהדפדפן יכיר את התוכן שברצונך להוסיף לאנימציה.

יצירת אנימציות אינה כרוכה בתשלום, ויש נכסים שהאנימציה בהם זולה יותר מאחרים. לדוגמה, אנימציה של width ושל height של אלמנט משנה את הגיאומטריה שלו, ועשויה לגרום לרכיבים אחרים בדף להזיז או לשנות את הגודל. התהליך הזה נקרא פריסה (או הזרמה חוזרת בדפדפנים מבוססי Gecko, כמו 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 הראשי, האנימציות יכולות להמשיך לפעול ללא הפרעה.

• במקרים רבים, גם שינויים אחרים של הטרנספורמציות והאטימות יטופלו על ידי ה-thread של המחבר.

• אם אנימציה כלשהי גורמת להפעלה של הצגת תמונה, פריסה או שניהם, יש צורך ב-"thread הראשי" כדי לבצע את הפעולה. הדבר נכון גם לגבי אנימציות שמבוססות על CSS וגם על JavaScript, והתקורה של הפריסה או הצבעים תגמד כל עבודה המשויכת לביצוע CSS או JavaScript ותהפוך את השאלה לגורם מוחלף.