'צביעה' היא תהליך מילוי הפיקסלים שבסופו של דבר משולב במסך של המשתמש. בדרך כלל זו המשימה שנמשכת הכי הרבה זמן מכל המשימות בצינור עיבוד הנתונים, ומומלץ להימנע ממנה אם אפשר.
סיכום
- שינוי של כל מאפיין מלבד טרנספורמציות או אטימות תמיד מפעיל ציור.
- לרוב, החלק היקר ביותר בצינור עיבוד הנתונים של הפיקסלים הוא 'צבע'. נמנעים מכך ככל האפשר.
- צמצום אזורי ציור באמצעות קידום שכבות ותזמור אנימציות.
- משתמשים ב-Profiler של ציור ב-Chrome DevTools כדי להעריך את המורכבות והעלות של הציור, ומצמצמים אותם במידת האפשר.
איך מתבצעת ההפעלה של הפריסה והצביעה
אם תפעילו את הפריסה, תמיד תפעילו את תהליך הצביעה, כי שינוי הגיאומטריה של כל אלמנט מחייב תיקון של הפיקסלים שלו.
אפשר גם להפעיל את הצביעה אם משנים מאפיינים לא גיאומטריים, כמו רקעים, צבע טקסט או צללים. במקרים כאלה אין צורך בפריסה וצינור עיבוד הנתונים ייראה כך:
איך משתמשים בכלי הפיתוח של 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, במיוחד במכשירים ניידים.