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