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