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

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

Paul Lewis

Sam Thorogood

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

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

הוספת אנימציה לנכסים היא לא בחינם, וחלק מהנכסים זולים יותר להנפשה מאחרים. לדוגמה, אנימציה של width ו-height של רכיב מסוים משנה את הגיאומטריה שלו, ויכולה לגרום לרכיבים אחרים בדף לזוז או לשנות את הגודל שלהם. התהליך הזה נקרא פריסה (או זרימה מחדש בדפדפנים מבוססי-Gecko כמו Firefox), והוא עלול להיות יקר אם הדף מכיל הרבה אלמנטים. בכל פעם שהפריסה מופעלת, בדרך כלל צריך לצייר את הדף או חלק ממנו, והפעולה הזו יקרה יותר מהפעולה של הפריסה עצמה.

במידת האפשר, כדאי להימנע משימוש באנימציה של נכסים שמפעילים פריסה או ציור. ברוב הדפדפנים המודרניים, המשמעות היא הגבלת האנימציות ל-opacity או ל-transform, ששניהם יכולים לעבור אופטימיזציה גבוהה בדפדפן. לא משנה אם האנימציה מטופלת על ידי JavaScript או על ידי CSS.

מדריך מלא ליצירת אנימציות עם ביצועים גבוהים

שימוש במאפיין will-change

משתמשים ב-will-change כדי להבטיח שהדפדפן יידע שאתם מתכוונים לשנות את מאפיין האלמנט. כך הדפדפן יכול לבצע את האופטימיזציות המתאימות ביותר לפני ביצוע השינוי. עם זאת, אין לעשות יותר מדי שימוש ב-will-change, מפני שהפעולה הזו עלולה לגרום לדפדפן לבזבז משאבים, וכתוצאה מכך יהיו אפילו יותר בעיות בביצועים.

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

.box {
  will-change: transform, opacity;
}

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

ביצועים של CSS לעומת JavaScript

יש הרבה דפים ושרשורי תגובות באינטרנט שמדברים על היתרונות היחסיים של אנימציות CSS ו-JavaScript מבחינת ביצועים. ריכזנו כאן כמה נקודות שכדאי לזכור:

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

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

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