סיכום: Chromium מעדכן באופן אוטומטי את יכולות שיפור המהירות באמצעות חומרה באנימציות SVG, טרנספורמציות המבוססות על אחוזים ובקרוב גם אנימציות בצבע רקע ובנתיבי קליפ.
כשמדובר בביצועים של אנימציה באינטרנט, סביר להניח שהמונחים "האצת חומרה" ו "האצת GPU" יופיעו. אך מה המשמעות של כל אלה? סגנונות עם האצת חומרה הם סגנונות שמשתמשים ב-GPU (יחידת עיבוד גרפי) ולא במעבד (CPU) כדי לעבד סגנונות חזותיים. הסיבה לכך היא שה-GPU יכול לעבד שינויים חזותיים בדף אינטרנט מהר יותר מהמעבד (CPU).
השימוש ב-GPU כדי להפחית את העומס הגרפי של מעברים ואנימציות אינטנסיביים, מספק רכיבים חזותיים חלקים יותר ופחות ג'אנק, כי האנימציות האלה לא מושפעות מה-thread הראשי. על ידי הסרת האנימציות מה-thread הראשי, האנימציות עוקפות את שכבת הקידוד של סקריפטים פעילים אחרים שפועלים בדף, וכתוצאה מכך מאטות את הרכיבים החזותיים ויוצרים בעיות בממשק (jank).
הפעלת אנימציות עם האצת חומרה
אנימציות עם האצת חומרה מורכבות כשכבות ועוזרות למפתחים ליצור אנימציות של 60 FPS (פריימים לשנייה) באיכות חמאה כדי לשפר את ביצועי העיבוד החזותי. בשלב זה יש כמה דרכים להגדיר ולהפעיל באינטרנט אנימציות ומעברים עם האצת חומרה:
- שימוש בפונקציות
transformשל CSS או העברת הערכיםopacityאוfilter - מוסיפים את המאפיין
will-changeלרכיב. - יצירת ציור מונפש על קנבס באמצעות
OffscreenCanvas - יצירת שרטוט של WebGL 3D
opacity, filter ו-transform בשלב זה, background-color ו-clip-path יצטרפו בקרוב לרשימה. מה עוד הופך לתהליך האצת חומרה כברירת מחדל ב-Chromium? בצינור עיבוד הנתונים קורים כמה דברים, כולל אנימציות SVG, בקשות שהמפתחים ביקשו נלהבים לקראתן.
הנפשות SVG עם האצת חומרה
פורמט SVG הוא תוספת מעולה לכל אתר, ועכשיו האינטראקציות האלה עם SVG יכולות להניב ביצועים טובים יותר. החל מ-Chromium 89, Chrome יצטרף לפלטפורמות כמו Firefox כדי לאפשר האצת חומרה כברירת מחדל באנימציות SVG. מה אתה, המפתח, צריך לעשות? שום דבר – ההגדרה הזו תיושם באופן אוטומטי באנימציות SVG ב-Chromium 89 ואילך.
דוגמה
נבחן את ההבדלים בין אנימציית SVG עם או בלי שיפור מהירות באמצעות חומרה. מחווני טעינה הם אלמנטים נפוצים של ממשק המשתמש, כמו זה שמופיע ב-facebook.com. אינדיקטורים אלה מרמזים על העבודה שמתבצעת בשרת בזמן שהמשתמש ממתין לתגובה. במקרה שמוצג כאן, התגובה תהיה טעינת תוצאות נוספות בסרגל הצד.
כשפותחים את כלי הפיתוח, אנחנו יכולים להתחיל ליצור פרופיל ולראות את ההבדלים בין חוויית אנימציה של המעבד (CPU) לבין חוויית האנימציה המואצת באמצעות GPU.
ניתן לראות שבצד ימין (Chromium 87), ציור מחדש מתבצע בכל פעם שהספינר מבצע אנימציה (פעולה שנמשכת ברצף). בצד ימין אין צביעה מחדש (Chromium 89 ו-Firefox). אפשר לבדוק את זה בחלונית העיבוד של DevTools, כשמפעילים את הבהוב של 'ציור'.
כשתבחנו מקרוב את חלונית הביצועים, תוכלו לראות שוב את האפקט הזה ואת האופן שבו הוא משפיע על הביצועים הכוללים של נכס האינטרנט. אתם נמנעים מעיבוד וציור של זמן רינדור באופן מלא עבור האנימציה, כלומר אנימציות חלקות יותר ואפליקציות שמניבות ביצועים טובים יותר. אומנם המערכת של Facebook לא תשלח את הכלי לטעינת SVG הזה מבוסס-SVG עד שתהיה יותר תמיכה בדפדפן ל-SVG עם האצת חומרה. עם זאת, היא תאפשר גמישות רבה יותר מבחינת קביעת המאפיינים, התאמה לעומס (scaling) ורזולוציה, ותחזוקה קלה יותר.
אחוז אנימציות
צוות Interactions מספק תמיכה גם בהעברת אנימציות באחוזים ב-Chromium 89. אנימציות המבוססות על אחוזים מתארות אינטראקציות הכוללות תנועה המבוססת על אחוזים. לדוגמה, אפשר להגדיל ב-20% את הגודל של פריט מסוים, או להסיט תפריט של סרגל צד רספונסיבי אל מחוץ למסך באמצעות הפקודה כמו translateX: -100%.
סוגים אלה של אנימציות בממשק המשתמש נפוצים יחסית, אבל כרגע לא משתמשים בהאצת חומרה כי בעבר לא יכולנו לשלב אנימציות כאלה. האחוזים בהמרות תלויים בגודל התיבה (כלומר פריסה), אבל עכשיו, כל עוד גודל הפריסה לא משתנה בכל פריים, הדפדפן יכול לחשב מראש את ערכי הטרנספורמציה המוחלטים ולהריץ אותם כאילו שהמפתח סיפק ערכי פיקסלים. החדשות הטובות הן שצוות Chromium עובד על התכונה הזו, ובקרוב סוגי האנימציות האלה יעברו באופן אוטומטי למצב מורכבות עם האצת חומרה.
מה השלב הבא?
האנימציות המעודכנות האלה ישפרו את עיצוב האתר בצורה חלקה יותר. וכפי שציינו למעלה, הצוות תמיד מחפש כדי לראות מהם הצרכים העתידיים של האינטרנט. בשלב הזה אנחנו מתכננים להמיר את background-color ואת clip-path כדי להשתמש בהאצת חומרה באופן אוטומטי בגרסאות עתידיות של Chromium.
background-color מקבל עדיפות בגלל מספר השימוש הגבוה של מעברים ואפקטים, ו-clip-path מאפשר אפקטים של מעבר שמניבים הרבה יותר ביצועים באינטרנט. כשביצועים פוגשים באינטראקטיביות, כולם מרוויחים!
תמונת שער: Siora Photography for Unense.