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

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

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

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

סיכום

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

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

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

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

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

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