צבע הוא תהליך המילוי של פיקסלים שבסופו של דבר ישתלבו במסכים של המשתמשים. בדרך כלל זו הביצוע הממושך ביותר של כל המשימות בצינור עיבוד הנתונים, ויש להימנע מכך אם אפשר.
הצבע הוא תהליך המילוי של פיקסלים שבסופו של דבר ישתלבו עם המסכים של המשתמשים. בדרך כלל מדובר במשימה הממושכת ביותר של כל המשימות בצינור עיבוד הנתונים, ויש להימנע ממנה אם אפשר.
סיכום
- שינוי של כל מאפיין פרט לטרנספורמציות או אטימוּת תמיד גורם להצגת הצבע.
- בדרך כלל, צבע הוא החלק היקר ביותר בצינור עיבוד הנתונים של פיקסלים; עדיף להימנע ככל האפשר.
- הפחתת אזורי הצבע על ידי קידום שכבות ותזמור של אנימציות.
- כדי להעריך את המורכבות והעלות של צבעים, אפשר להשתמש בכלי לניתוח הצבעים של Chrome DevTools כדי להפחית היכן שאפשר.
הפעלת פריסה וצביעה
אם תפעילו פריסה, תמיד תפעילו המרת תמונה, מאחר ששינוי הגאומטריה של רכיב כלשהו מצריך תיקון של הפיקסלים שלו.
אפשר גם להפעיל צבע אם משנים מאפיינים שאינם גיאומטריים, כמו רקעים, צבע טקסט או צלליות. במקרים כאלה, לא יהיה צורך בפריסה וצינור עיבוד הנתונים ייראה כך:
שימוש בכלי הפיתוח ל-Chrome כדי לזהות במהירות צווארי בקבוק בצבע
אתם יכולים להשתמש בכלי הפיתוח ל-Chrome כדי לזהות במהירות אזורים שנמצאים לצבוע. פותחים את הכרטיסייה 'עיבוד' ומפעילים את Paint Flashing.
כשאפשרות זו מופעלת ב-Chrome, המסך יהבהב בצבע ירוק בכל פעם שמתבצע ציור. אם המסך כולו מהבהב בצבע ירוק, או אזורים במסך שלא חשבתם שצריך לצבוע, צריך להתעמק קצת.
קידום רכיבים שזזים או מעומעמים
לא תמיד ניתן להשתמש בתמונה אחת בזיכרון. למעשה, הדפדפן יכול לצבוע במספר תמונות, או בשכבות של קומפוזיטור, אם יש צורך.
היתרון של הגישה הזו הוא שאפשר לטפל ברכיבים שנצבעים מחדש באופן קבוע, או נעים על המסך עם טרנספורמציות, בלי להשפיע על רכיבים אחרים. הדבר דומה לחבילות אמנות כמו 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);
}
עם זאת, אין ליצור יותר מדי שכבות, מכיוון שכל שכבה דורשת גם זיכרון וגם ניהול. ניתן למצוא מידע נוסף בנושא הזה בקטע הצמדה למאפיינים של קומפוזיטור בלבד וניהול מספר השכבות.
אם קידמתם רכיב לשכבה חדשה, כדאי להשתמש בכלי הפיתוח כדי לוודא שהדבר משפר את הביצועים. אין לקדם רכיבים ללא פרופיילינג.
צמצום אזורי צבע
עם זאת, לפעמים, למרות קידום האלמנטים, עדיין יש צורך בעבודות צביעה. אחד מהאתגרים הגדולים של בעיות בצבע הוא שהדפדפנים מאחדים שני אזורים שצריך לצבוע, וזה עלול לגרום לצביעה מחדש של המסך כולו. לדוגמה, אם יש לך כותרת קבועה בחלק העליון של הדף ופריט כלשהו נצבע בתחתית המסך, ייתכן שהמסך כולו ייצבע מחדש.
צמצום אזורי צבע הוא בדרך כלל מקרה של תזמור האנימציות והמעברים כך שלא יחפפו באותה מידה או מציאת דרכים להימנע מהוספת אנימציה לחלקים מסוימים בדף.
פישוט המורכבות של המרת תמונה
יש דברים שיקרים יותר מאשר בצביעה. לדוגמה, כל דבר שכרוך בטשטוש (כמו צל, למשל) יידרש זמן רב יותר לציור מאשר ציור תיבה אדומה. עם זאת, מבחינת CSS, זה לא תמיד מובן מאליו: נראה שלbackground: red; ול-box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); יש מאפייני ביצועים שונים לחלוטין, אבל כן.
הכלי לניתוח ביצועי הצבע שלמעלה יאפשר לך לקבוע אם צריך לבחון דרכים אחרות ליצירת אפקטים. שאל את עצמך אם אפשר להשתמש בקבוצה זולה יותר של סגנונות או באמצעים חלופיים כדי להגיע לתוצאה הסופית.
מומלץ תמיד להימנע מציור במהלך אנימציות, כי מספר ה-10 אלפיות השנייה שיש בכל פריים בדרך כלל לא ארוך מספיק בשביל ציור, במיוחד במכשירים ניידים.