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

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

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

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

סיכום

• מקפידים על טרנספורמציה ושינויי שקיפות של האנימציות.
• קידום רכיבים נעים באמצעות 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 כדי להבין את השכבות באפליקציה

כדי להבין את השכבות באפליקציה ולמה צריך להוסיף שכבה, צריך להפעיל את ה- Paintr profiler בציר הזמן של כלי הפיתוח ב-Chrome:

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

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

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

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