תהליך הצביעה הוא תהליך מילוי הפיקסלים שבסופו של דבר משולב במסך של המשתמש. בדרך כלל זו המשימה שנמשכת הכי הרבה זמן מכל המשימות בצינור עיבוד הנתונים, ומומלץ להימנע ממנה אם אפשר.
סיכום
- שינוי של כל נכס מלבד טרנספורמציות או אטימות תמיד מפעיל ציור.
- לרוב, החלק היקר ביותר בצינור עיבוד הנתונים של הפיקסלים הוא שלב הצביעה. נמנעים מכך ככל האפשר.
- צמצום אזורי הציור באמצעות שדרוג שכבות וארגון של אנימציות.
- משתמשים ב-Profiler של ציור ב-Chrome DevTools כדי להעריך את המורכבות והעלות של הציור, ומצמצמים אותם במידת האפשר.
איך מתבצעת ההפעלה של הפריסה והצביעה
אם מפעילים את הפריסה, תמיד מפעילים את תהליך הצביעה, כי שינוי הגיאומטריה של כל אלמנט מחייב תיקון של הפיקסלים שלו.
אפשר גם להפעיל את הצביעה אם משנים מאפיינים לא גיאומטריים, כמו רקעים, צבע טקסט או צללים. במקרים כאלה, לא תצטרכו להשתמש בפריסה והצינור ייראה כך:
איך משתמשים בכלי הפיתוח של Chrome כדי לזהות במהירות צווארי בקבוק ב-paint
אתם יכולים להשתמש בכלים למפתחים של Chrome כדי לזהות במהירות אזורים שמתבצע בהם ציור. פותחים את הכרטיסייה 'עיבוד' ומפעילים את האפשרות הבהוב צבע.
כשהאפשרות הזו מופעלת, המסך של Chrome יהבהב בירוק בכל פעם שתתבצע צביעה. אם כל המסך מהבהב בירוק או אם יש אזורים במסך שלא חשבתם שצריך לצבוע, כדאי להמשיך לבדוק.
קידום רכיבים שזזים או מתעמעם
הציור לא תמיד מתבצע בתמונה אחת בזיכרון. למעשה, אם צריך, הדפדפן יכול לצייר בכמה תמונות או בשכבות של מעבד התמונות.
היתרון של הגישה הזו הוא שאפשר לטפל באלמנטים שמתבצע בהם צביעה מחדש באופן קבוע או באלמנטים שזזים במסך באמצעות טרנספורמציות, בלי להשפיע על אלמנטים אחרים. זהו אותו תהליך כמו בתוכנות גרפיות כמו Sketch, GIMP או Photoshop, שבהן אפשר לטפל בשכבות נפרדות ולשלב אותן זו על גבי זו כדי ליצור את התמונה הסופית.
הדרך הטובה ביותר ליצור שכבה חדשה היא להשתמש במאפיין ה-CSS will-change שזמין בכל מנועי הדפדפנים המודרניים העיקריים. כשמשתמשים בערך transform, will-change יוצר שכבת עיבוד חדשה:
.moving-element {
will-change: transform;
}
עם זאת, חשוב להקפיד לא ליצור יותר מדי שכבות, כי כל שכבה דורשת גם זיכרון וגם ניהול. מידע נוסף מופיע בקטע שימוש בנכסים של רכיב עיבוד גרפי בלבד וניהול מספר השכבות.
אם העלית רכיב לשכבה חדשה, אפשר להשתמש בכלי הפיתוח כדי לוודא שהפעולה הזו השיגה לך שיפור בביצועים. לא לקדם רכיבים ללא יצירת פרופילים
צמצום אזורי הצביעה
עם זאת, לפעמים, למרות רכיבי קידום מכירות, עדיין נדרשת עבודת צביעה. אחד האתגרים הגדולים של בעיות בצביעה הוא שדפדפנים משלבים שני אזורים שצריך לצבוע, וכתוצאה מכך יכול להיות שכל המסך ייצבע מחדש. לדוגמה, אם יש כותרת קבועה בחלק העליון של הדף ומשהו נצבע בחלק התחתון של המסך, יכול להיות שכל המסך ייצבע מחדש.
כדי לצמצם את אזורי הציור, בדרך כלל צריך לתזמור את האנימציות והמעברים כך שלא יהיו חפיפות רבות, או למצוא דרכים להימנע מאינטראקציה של אנימציה עם חלקים מסוימים בדף.
פשטו את המורכבות של הציור
כשמדובר בצביעה, יש דברים יקרים יותר מאחרים. לדוגמה, ציור של כל דבר שמכיל טשטוש (למשל צל) ייקח יותר זמן מאשר ציור של תיבה אדומה. עם זאת, ב-CSS זה לא תמיד ברור: לא בטוח שנדמה שיש ל-background: red; ול-box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); מאפייני ביצועים שונים מאוד, אבל יש.
כפי שמוצג בצילום המסך הקודם, פרופיל הציור מאפשר לכם לקבוע אם אתם צריכים לבדוק דרכים אחרות להשגת האפקטים. כדאי לשאול את עצמכם אם אפשר להשתמש בקבוצה של סגנונות זולים יותר או באמצעים חלופיים כדי להגיע לתוצאה הסופית.
ככל האפשר, כדאי להימנע משימוש ב-paint בזמן אנימציות, כי בדרך כלל 10ms שיש לכל פריים לא מספיקים כדי לבצע את פעולת ה-paint, במיוחד במכשירים ניידים.