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

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

Paul Lewis

Sam Thorogood

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

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

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

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

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

שימוש בנכס will-change

תמיכה בדפדפנים

• 36
• 79
• 36
• 9.1

מקור

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

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

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

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

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

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

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

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

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