הישארו עם מאפיינים של קומפוזיציה בלבד וניהול ספירת השכבות

בתהליך הרכבת התמונה, החלקים שצוירו בדף מורכבים יחד כדי להציג אותם במסך.

בתהליך הרכבת התמונה, החלקים שצוירו בדף מורכבים יחד כדי להציג אותם במסך.

יש שני גורמים מרכזיים בתחום הזה שמשפיעים על ביצועי הדף: מספר השכבות של ה-Compositor שצריך לנהל והמאפיינים שבהם אתם משתמשים לצורך אנימציות.

סיכום

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

שימוש בשינויי טרנספורמציה ושקיפות ליצירת אנימציות

הגרסה עם הביצועים הטובים ביותר של צינור עיבוד הנתונים של הפיקסל מונעת גם פריסה וגם צביעה, ומחייבת רק שינויים ביצירת קומפוזיציה:

כדי לעשות זאת, צריך להשתמש רק בנכסים שאפשר לשנות באמצעות המאגר. היום יש רק שני נכסים שבהם הדבר נכון – transform ו-opacity:

האזהרה לגבי השימוש ב-transform וב-opacity היא שהרכיב שבו משנים את המאפיינים האלה צריך להיות בשכבת עיבוד גרפי משלו. כדי ליצור שכבה, צריך לקדם את הרכיב. נרחיב על כך בהמשך.

קידום רכיבים שאתם מתכננים להוסיף להם אנימציה

כפי שהזכרנו בקטע "פשטו את המורכבות של ציור והפחיתו את אזורי הצבע", עליכם לקדם רכיבים שאתם מתכוונים להוסיף לאנימציה (סביר להניח, לא להגזים!) לשכבה משלהם:

.moving-element {
  will-change: transform;
}

לחלופין, בדפדפנים ישנים או שלא תומכים בדפדפנים חדשים, ישתנו:

.moving-element {
  transform: translateZ(0);
}

ניהול השכבות ומניעת התפוצצות שכבות

לאחר מכן, מפתה לדעת ששכבות בדרך כלל עוזרות לשפר את הביצועים, וכך לקדם את כל הרכיבים בדף באמצעות משהו כזה:

* {
  will-change: transform;
  transform: translateZ(0);
}

כלומר, אתם רוצים לקדם כל רכיב בדף. הבעיה היא שכל שכבה שיוצרים דורשת זיכרון וניהול, וזה לא בחינם. למעשה, במכשירים עם זיכרון מוגבל, ההשפעה על הביצועים עשויה לעלות בהרבה על כל תועלת שתקבלו מיצירת שכבה. צריך להעלות את המרקמים של כל שכבה ל-GPU, כך שיש מגבלות נוספות מבחינת רוחב הפס בין מעבד (CPU) ל-GPU, והזיכרון הזמין למרקמים ב-GPU.

שימוש בכלי הפיתוח ל-Chrome כדי להבין את השכבות באפליקציה

כדי להבין את השכבות באפליקציה ולגלות למה לרכיב מסוים יש שכבה, צריך להפעיל את הכלי לניתוח זמן הכתיבה (Paint profiler) בציר הזמן של הכלים למפתחים ב-Chrome:

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

לחיצה עליו תציג לכם אפשרות חדשה בפרטים: כרטיסיית שכבה.

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

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