ביצועי הרינדור

משתמשים שמים לב אם אתרים ואפליקציות לא פועלים טוב, ולכן אופטימיזציה של ביצועי הרינדור היא חיונית.

משתמשי האינטרנט של היום מצפים שהדפים שבהם הם מבקרים יהיו אינטראקטיביים וחלקים, וזה המקום שבו צריך להתמקד יותר ויותר בזמן ובמאמצים. הדפים לא צריכים רק לטעון מהר, אלא גם להגיב במהירות לקלט של המשתמשים לאורך כל מחזור החיים שלהם. למעשה, המדד מהירות התגובה לאינטראקציה באתר (INP) מודד בדיוק את ההיבט הזה בחוויית המשתמש. כשמדד ה-INP גבוה, המשמעות היא שהדף הגיב באופן עקבי ואמין לצרכים של המשתמש.

אמנם אחד מהגורמים העיקריים לתחושה של דף מהיר הוא כמות ה-JavaScript שאתם מריצים בתגובה לאינטראקציות של המשתמשים, אבל מה שהמשתמשים מצפים לו הוא שינויים חזותיים בממשק המשתמש. שינויים חזותיים בממשק המשתמש הם תוצאה של כמה סוגים של עבודה, שנקראים בדרך כלל בשם עיבוד (רנדרינג). העבודה הזו צריכה להתבצע במהירות האפשרית כדי שחוויית המשתמש תרגיש מהירה ואמינה.

כדי לכתוב דפים שתגובה מהירה לאינטראקציות של משתמשים, צריך להבין איך הדפדפן מטפל ב-HTML, ב-JavaScript וב-CSS, ולוודא שהקוד שאתם כותבים – וגם כל קוד אחר של צד שלישי שאתם כוללים – פועל בצורה יעילה ככל האפשר.

הערה לגבי קצב הרענון של המכשיר

משתמש שמקיים אינטראקציה עם אתר בטלפון נייד.
תדירות הרענון של המסך היא שיקול חשוב כשמדובר ביצירת אתרים רספונסיביים לקלט של משתמשים.

רוב המכשירים כיום מרעננים את המסכים שלהם 60 פעמים בשנייה. כל רענון יוצר את הפלט החזותי שאתם רואים, והוא נקרא בדרך כלל פריים. בסרטון הבא מוסבר מהם פריים:

פריימים כפי שהם מוצגים בחלונית הביצועים של כלי הפיתוח ל-Chrome. כשהסמן מחליק על פס הסרטים בחלק העליון, מוצגת תצוגה מוגדלת של כל פריים בתוך תיאור קצר, בזמן שתפריט הניווט בנייד עובר אנימציה למצב 'פתוח'.

המסך של המכשיר תמיד מתעדכן בקצב עקבי, אבל יכול להיות שלא תמיד האפליקציות שפועלות במכשיר יוכלו ליצור מספיק פריימים כדי להתאים לקצב הרענון הזה. לדוגמה, אם יש אנימציה או מעבר פעיל, הדפדפן צריך להתאים את קצב הרענון של המכשיר כדי ליצור פריים אחד בכל פעם שהמסך מרענן.

מכיוון שמסך רגיל מתעדכן 60 פעמים בשנייה, חישוב מהיר יגלה שלדפדפן יש 16.66 אלפיות השנייה כדי ליצור כל פריים. עם זאת, בפועל יש למעבד הגרפי של הדפדפן עלות זמן משלו לכל פריים, כך שכל העבודה צריכה להסתיים תוך 10 אלפיות השנייה. אם לא תצליחו לעמוד בתקציב הזה, קצב הפריימים יירד ותוכן הדף יזוז במסך. התופעה הזו נקראת לעיתים קרובות jank.

עם זאת, היעדים משתנים בהתאם לסוג העבודה שאתם מנסים לבצע. עמידה בערך הסף של 10 אלפיות השנייה חיונית לאנימציות, שבהן תנועת האובייקטים במסך מתבצעת על ידי אינטרפולציה של סדרה של פריימים בין שתי נקודות. כשמדובר בשינויים נפרדים בממשק המשתמש – כלומר מעבר ממצב אחד למצב אחר ללא תנועה באמצע – מומלץ לבצע שינויים כאלה בפרק זמן שמרגיש למשתמש מיידי. במקרים כאלה, 100 אלפיות השנייה הוא נתון שמצוין לעיתים קרובות, אבל הסף 'טוב' של מדד ה-INP הוא 200 אלפיות השנייה או פחות, כדי להתאים למגוון רחב יותר של מכשירים עם יכולות שונות.

לא משנה מה היעדים שלכם – יצירת הרבה פריימים שנדרשים לאנימציות כדי למנוע רעידות, או פשוט יצירת שינוי חזותי נפרד בממשק המשתמש מהר ככל האפשר – חשוב מאוד להבין איך פועל צינור עיבוד הנתונים של הפיקסלים בדפדפן.

צינור עיבוד הנתונים של הפיקסלים

יש חמישה תחומים עיקריים שחשוב להכיר ולשים לב אליהם בעבודה שלכם כמפתחי אתרים. אלה חמשת האזורים שבהם יש לכם את השליטה הרבה ביותר, וכל אחד מהם מייצג נקודה חשובה בצינור עיבוד הנתונים מהפיקסלים למסך:

צינור עיבוד הנתונים המלא של הפיקסלים, שכולל חמישה שלבים: JavaScript,‏ Style,‏ Layout,‏ Paint ו-Composite.
ציור של צינור עיבוד הנתונים המלא של הפיקסלים.
  • JavaScript: בדרך כלל משתמשים ב-JavaScript כדי לטפל בעבודה שתגרום לשינויים חזותיים בממשק המשתמש. לדוגמה, יכולה להיות זו הפונקציה animate של jQuery, מיון של מערך נתונים או הוספת רכיבי DOM לדף. עם זאת, JavaScript לא הכרחי לחלוטין כדי להפעיל שינויים חזותיים: אנימציות CSS, מעבריים ב-CSS ו-Web Animations API יכולים להוסיף אנימציה לתוכן הדף.
  • חישובי סגנונות: זהו התהליך שבו נקבע אילו כללי CSS חלים על אילו רכיבי HTML על סמך סלקטורים תואמים. לדוגמה, .headline הוא דוגמה לסלקטור CSS שחלה על כל רכיב HTML עם ערך מאפיין class שמכיל את הכיתה headline. לאחר מכן, כשהכללים ידועים, הם מוחלים והסגנונות הסופיים של כל רכיב מחושבים.
  • פריסה: אחרי שהדפדפן יודע אילו כללים חלים על רכיב, הוא יכול להתחיל לחשב את הגיאומטריה של הדף, למשל את נפח המקום שהרכיבים תופסים ואת המיקום שבו הם מופיעים במסך. מודל הפריסה של האינטרנט מאפשר לאלמנט אחד להשפיע על אחרים. לדוגמה, הרוחב של האלמנט <body> משפיע בדרך כלל על המימדים של אלמנטים הצאצאים שלו לאורך כל העץ, כך שהתהליך יכול להיות מורכב למדי עבור הדפדפן.
  • צביעה: צביעה היא תהליך של מילוי פיקסלים. הוא כולל את הטקסט, הצבעים, התמונות, השוליים, הצללים ובעצם כל היבט חזותי של הרכיבים אחרי שחישבתם את הפריסה שלהם בדף. בדרך כלל, הציור מתבצע על כמה משטחים, שנקראים לרוב שכבות.
  • מורכב: יכול להיות שחלקי הדף צוירו על כמה שכבות, ולכן צריך להחיל אותם על המסך בסדר הנכון כדי שהדף יוצג כצפוי. חשוב במיוחד לעשות זאת לגבי רכיבים שמצטופפים זה על גבי זה, כי טעות עלולה לגרום לכך שרכיב אחד יופיע מעל רכיב אחר בצורה שגויה.

כל אחד מהחלקים האלה בצינור עיבוד הנתונים של הפיקסלים הוא הזדמנות להוסיף רעידות לאנימציות או לעכב את ציור המסגרות גם במקרים של שינויים חזותיים נפרדים בממשק המשתמש. לכן חשוב להבין בדיוק אילו חלקים בצינור עיבוד הנתונים מופעלים על ידי הקוד, ולבדוק אם אפשר להגביל את השינויים רק לחלקים בצינור עיבוד הנתונים של הפיקסלים שנחוצים לעיבוד שלהם.

יכול להיות ששמעתם את המונח 'rasterize' (טרנספורמציה לתמונה רסטר) בשילוב עם 'paint' (צביעה). הסיבה לכך היא שצביעה היא למעשה שתי משימות:

  1. יצירת רשימה של קריאות לציור.
  2. מילוי הפיקסלים.

התהליך השני נקרא 'רסטוריפיקציה', ולכן בכל פעם שמופיעות רשומות של 'צביעה' ב-DevTools, צריך להתייחס אליהן כאל רשומות שכוללות רסטוריפיקציה. בארכיטקטורות מסוימות, יצירת רשימת הקריאות לציור והרסטוריזציה מתבצעות בשרשוריים שונים, אבל זה לא בשליטתכם כמפתחים.

לא תמיד תצטרכו לגעת בכל חלק בצינור עיבוד הנתונים בכל פריים. למעשה, יש שלוש דרכים שבהן צינור עיבוד הנתונים פועל בדרך כלל בפריים נתון כשמבצעים שינוי חזותי, באמצעות JavaScript,‏ CSS או Web Animations API.

1. JS / CSS > סגנון > פריסה > ציור > שילוב

צינור עיבוד הנתונים המלא של הפיקסלים, בלי החרגת שלבים.

אם משנים מאפיין 'פריסה', כמו מאפיין שמשנה את הגיאומטריה של רכיב, כמו רוחב, גובה או המיקום שלו (כמו מאפייני ה-CSS left או top), הדפדפן צריך לבדוק את כל הרכיבים האחרים ולבצע 'זרימה מחדש' של הדף. צריך לצבוע מחדש את האזורים המושפעים, ולחבר מחדש את הרכיבים הצבועים הסופיים.

2. JS / CSS > סגנון > צבע > שילוב

צינור עיבוד הנתונים של הפיקסלים, בלי שלב הפריסה.

אם שיניתם מאפיין 'צביעה בלבד' של רכיב ב-CSS – לדוגמה, מאפיינים כמו background-image,‏ color או box-shadow – שלב הפריסה לא נדרש כדי לשמור עדכון חזותי בדף. אם תוותרו על שלב הפריסה – אם אפשר – תוכלו לחסוך עבודה על פריסה שעלולה להיות יקרה, שעלולה להאריך את זמן האחזור של יצירת המסגרת הבאה.

3. JS / CSS > סגנון > מורכב

צינור עיבוד הנתונים של הפיקסלים, בלי שלבי הפריסה והצביעה.

אם משנים מאפיין שלא נדרש לו פריסה או צביעה, הדפדפן יכול לעבור ישירות לשלב הקיפול. זוהי הדרך הזולה והמועדפת ביותר בצינור עיבוד הנתונים של הפיקסלים בנקודות לחץ גבוהות במחזור החיים של הדף, כמו אנימציות או גלילה. עובדה מעניינת: Chromium מבצע אופטימיזציה של הגלילה בדף כך שהיא תתבצע רק בשרשור המאגר, במידת האפשר. כלומר, גם אם דף לא מגיב, עדיין תוכלו לגלול בדף ולראות חלקים ממנו שצוירו קודם לכן במסך.

ביצועי האתר הם האמנות של הימנעות מעבודה, תוך הגדלת היעילות של כל עבודה שנדרשת ככל האפשר. במקרים רבים, צריך לעבוד עם הדפדפן ולא נגדו. חשוב לזכור שהעבודה שמוצגת בצינור עיבוד הנתונים שונה מבחינת עלות החישוב. חלק מהמשימות יקרות יותר מאחרות מטבען.

נתעמק בחלקים השונים של צינור עיבוד הנתונים. נבחן את הבעיות הנפוצות ונסביר איך לאבחן אותן ולתקן אותן.

אופטימיזציות של עיבוד בדפדפן

צילום מסך של קורס ב-Udacity

הביצועים חשובים למשתמשים, וכדי ליצור חוויית משתמש טובה, מפתחי האתרים צריכים ליצור אתרים שמגיבים במהירות לאינטראקציות של המשתמשים ומרינדרים בצורה חלקה. מומחה הביצועים פול לואיס יעזור לכם להיפטר מהתנודות בפריימים וליצור אפליקציות אינטרנט שמתאפיינות בביצועים של 60 פריימים לשנייה. בסיום הקורס, תקבלו את הכלים הדרושים ליצירת פרופילים של אפליקציות ולזיהוי הגורמים לביצועי רינדור לא אופטימליים. בנוסף, נלמד על צינור עיבוד הנתונים לעיבוד (rendering) בדפדפן ונגלה דפוסים שיעזרו לכם ליצור אתרים מהירים שהמשתמשים ייהנו להשתמש בהם.

זהו קורס חינמי שמוצג דרך Udacity, ואפשר להירשם אליו בכל שלב.