ניתוח של ביצועי זמן ריצה

קייס בסקית
קייס בסקית
Twitter GitHub תקלה

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

תחילת העבודה

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

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

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

    https://googlechrome.github.io/devtools-samples/jank/

  3. כדי לפתוח את כלי הפיתוח, לוחצים על Command+Option+I (Mac) או על Control+Shift+I (Windows, Linux).

    ההדגמה משמאל וכלי הפיתוח בצד שמאל

    איור 1. ההדגמה משמאל וכלי הפיתוח בצד שמאל

הדמיית מעבד (CPU) בנייד

כמות המעבד (CPU) במכשירים ניידים נמוכה הרבה יותר מזו של מחשבים שולחניים ומחשבים ניידים. בכל פעם שאתם יוצרים פרופיל בדף, השתמשו בויסות נתונים (CPU) כדי לדמות את ביצועי הדף במכשירים ניידים.

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

  4. עבור מעבדים (CPU), בוחרים באפשרות האטה פי 2. כלי הפיתוח מווסתים את המעבד (CPU) כך שהוא איטי פי 2 מהרגיל.

    ויסות נתונים במעבד (CPU)

    איור 2. ויסות נתונים במעבד (CPU), בקווים כחולים

הגדרת ההדגמה

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

  1. ממשיכים ללחוץ על הוספה של 10 עד שהריבועים הכחולים זזים לאט יותר באופן משמעותי מבעבר. במחשב מתקדם, התהליך עשוי להימשך כ-20 קליקים.

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

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

תיעוד של ביצועי זמן ריצה

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

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

    יצירת פרופיל לדף

    איור 3: יצירת פרופילים לדף

  2. ממתינים כמה שניות.

  3. לוחצים על הפסקה. כלי הפיתוח מפסיקים לתעד, מעבדים את הנתונים ומציגים את התוצאות בחלונית Performance (ביצועים).

    תוצאות הפרופיל

    איור 4: תוצאות הפרופיל

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

ניתוח התוצאות

לאחר שתקבלו תיעוד של ביצועי הדף, תוכלו למדוד את רמת הביצועים שלו ולאתר את הגורמים לכך.

ניתוח פריימים לשנייה

המדד העיקרי למדידת הביצועים של אנימציה הוא פריימים לשנייה (FPS). המשתמשים מרוצים כשהאנימציה פועלת בקצב של 60FPS.

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

    תרשים ה-FPS

    איור 5: תרשים ה-FPS, בקווים כחולים

  2. מתחת לתרשים FPS יוצג התרשים CPU. הצבעים בתרשים CPU תואמים לצבעים בכרטיסייה Summary (סיכום), בחלק התחתון של חלונית הביצועים. העובדה שהתרשים של המעבד (CPU) מלא בצבע, המשמעות היא שהמעבד (CPU) הגיע למקסימום במהלך ההקלטה. בכל פעם שתראו שהמעבד (CPU) מתמלא במשך פרקי זמן ארוכים, זה הזמן למצוא דרכים לבצע פחות עבודה.

    התרשים של המעבד (CPU) והכרטיסייה 'סיכום'

    איור 6: תרשים המעבד (CPU) והכרטיסייה 'סיכום', המסומנים בכחול

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

    הצגת צילום מסך

    איור 7: הצגת צילום מסך של הדף סביב סימן ההקלטה 2,000 אלפיות השנייה

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

    העברת העכבר מעל מסגרת

    איור 8: העברת העכבר מעל מסגרת

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

בונוס: פתיחת מד ה-FPS

כלי שימושי נוסף הוא מד ה-FPS, שמספק הערכות בזמן אמת ל-FPS במהלך הרצת הדף.

  1. לוחצים על Command+Shift+P (Mac) או על Control+Shift+P (Windows, Linux) כדי לפתוח את תפריט הפקודות.
  2. מתחילים להקליד Rendering בתפריט הפקודות ובוחרים באפשרות הצגת עיבוד.

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

    מד ה-FPS

    איור 9: מד ה-FPS

  4. משביתים את מד ה-FPS ומקישים על Escape כדי לסגור את הכרטיסייה רינדור. לא תשתמשו בו במדריך הזה.

איתור צוואר הבקבוק

עכשיו, אחרי שבדקתם ווידאתם שהביצועים של האנימציה לא טובים, השאלה הבאה צריכה לענות על השאלה הבאה: למה?

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

    הכרטיסייה 'סיכום'

    איור 10: הכרטיסייה 'סיכום', מסומנת בכחול

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

    הקטע הראשי

    איור 11: הקטע הראשי, מסומן בכחול

  3. ההקלטה כוללת הרבה נתונים. כדי להגדיל את התצוגה של אירוע אחד של Animation Frame Fired, לוחצים, מחזיקים וגוררים את העכבר מעל Overview – הקטע שכולל את התרשימים FPS , CPU ו-NET. הקטע Main והכרטיסייה Summary (סיכום) מציגים רק מידע לגבי החלק שנבחר בהקלטה.

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

    איור 12: התקרבות לאירוע יחיד שמופעל במסגרת אנימציה

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

  5. לוחצים על האירוע אנימציה הופעל במסגרת אנימציה. בכרטיסייה Summary (סיכום), מוצג עכשיו מידע על האירוע. יש לשים לב לקישור חשיפה. לחיצה שגורמת לכלי הפיתוח להדגיש את האירוע שגרם להפעלת האירוע Animation Framed Fired. יש לשים לב גם לקישור app.js:94. לחיצה על הקישור הזה תעביר אתכם לשורה הרלוונטית בקוד המקור.

    מידע נוסף על האירוע Animation Frame Fired

    איור 13: מידע נוסף על האירוע 'הפריים באמצעות אנימציה'

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

  7. בכרטיסייה סיכום, לוחצים על הקישור app.js:70 בקטע הפריסה נאכפת. כלי הפיתוח מעביר אתכם לשורת הקוד שמאלצת את הפריסה.

    שורת הקוד שגרמה לפריסה מאולצת

    איור 13: שורת הקוד שגרמה לפריסה הכפויה

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

בונוס: ניתוח הגרסה שעברה אופטימיזציה

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

השלבים הבאים

הבסיס להבנת הביצועים הוא מודל RAIL. בעזרת המודל הזה אפשר ללמוד מהם מדדי הביצועים שהם החשובים ביותר למשתמשים. מידע נוסף מופיע בקטע מדידת הביצועים באמצעות מודל RAIL.

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

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

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